Splitee

Přehled

Splitee je mobilní webová aplikace pro dělení výdajů v malé partě kamarádů, až deseti lidí. Je stavěná pro dvě situace, které nastávají stejně často: krátkou akci (chata, festival), kde se za pár dní hodně utrácí, a dlouhodobé spolubydlení s nájmem, energiemi a nákupy, které se vyrovnávají průběžně. Instaluje se na plochu jako PWA a všem se aktualizuje v reálném čase.

Problém

Výdaje se zapisují ve spěchu: u pokladny, jednou rukou, hned po zaplacení. Když to trvá déle než pár vteřin, nikdo to nedělá a parta to pak skládá z výpisů. Většinu aplikací na dělení výdajů v reálné partě zabijí ještě dvě věci: vždycky se někdo odmítne registrovat a na konci nikdo úplně nevěří číslům. Chtěl jsem, aby zápis výdaje byl nejkratší cesta v celé appce, bilance byla jasná na první pohled a výpočty seděly na haléř.

Co jsem postavil

• Party s názvem, emoji a měnou, připojení šestiznakovým kódem, odkazem nebo QR, s limitem deseti členů vynuceným na serveru
• Výdaje se třemi režimy dělení: rovným dílem, přesnými částkami nebo poměrem (třeba podle velikosti pokoje nebo počtu nocí)
• Dluhy počítané z konkrétních nevyrovnaných podílů, takže u každého „dlužíš“ jde dohledat, za co; vzájemné dluhy se započítají
• Vyrovnání jednoho podílu nebo všeho s jedním člověkem na jedno ťuknutí a možnost vyrovnání zrušit, když se někdo splete
• Hosté: přidáš kamaráda bez účtu a zapisuješ za něj od první minuty; když se později přihlásí, převezme si svého hosta i s celou historií
• Přihlášení přes Google, pak přezdívka a osobní barva, která je v partě unikátní a nese identitu člověka napříč rozhraním
• Realtime synchronizace: výdaj, který zapíše jeden, se všem propíše okamžitě
• Instalovatelná PWA se service workerem a generované Open Graph náhledy pro odkazy na pozvánky sdílené v chatu

Design

Vizuální směr je česká poštovní poukázka přenesená do telefonu. Každý výdaj je vyplněný řádek tiskopisu, každý dluh je ústřižek s perforací a vyrovnat znamená ústřižek odtrhnout. Bledý papírový podklad, bílé archy orámované tenkou linkou jediné tiskové modři, téměř černý inkoust pro text a částky v mono písmu s tabulkovými číslicemi, které sedí pod sebou na haléř. Barva nese jen dvě věci: tisková modř akce a barvy členů identitu. Směr peněz se čte ze znaménka a slov („Dlužíš“, „Dluží ti“), nikdy z červené a zelené. Hlavní akce „Přidat výdaj“ je pruh přes celou šířku dole, přímo pod palcem.

Technologie a proč

Realtime je součást produktu, ne optimalizace: parta zapisuje výdaje současně a bilance musí sedět hned, proto backend běží na Convexu s reaktivními dotazy a bez jediného řádku pollingu. Všechny částky se ukládají jako celá čísla v haléřích a formátují se až v zobrazovací vrstvě. Oprávnění se kontrolují na serveru v každé mutaci, nikdy jen v UI, a chyby putují jako kódy, které si klient přeloží. Celou doménovou vrstvu (dělení, dluhy, vyrovnání, hosty, pozvánky) pokrývá 185 testů ve Vitestu a convex-test.

Nejtěžší část

• Dělení bez ztráty haléře: 100 Kč na tři se beze zbytku nedělí. Zbytkové haléře dostávají deterministicky první podle pořadí vstupu do party a poměrové dělení používá metodu největšího zbytku, takže podíly vždy dají přesně částku výdaje.
• Převzetí hosta: když se člověk zaregistruje, jeho host se v jedné transakci nahradí skutečným účtem napříč všemi výdaji, podíly a vyrovnáními, aniž by se dva lidé kdy sloučili do jednoho.
• Odolnost vstupů: code review odhalilo, že nekonečná váha dokázala potichu zapsat do databáze NaN, takže váhy mají teď pevné meze a podobné okrajové případy hlídají testy.

Výsledek

Nasazená, instalovatelná aplikace pro reálné výlety a společné účty. Oproti dělení výdajů v Journeu je to stejný problém vyřešený mnohem promyšleněji: předem sepsaná produktová specifikace a design systém, peníze modelované v celých haléřích, testy kolem každé cesty, kudy tečou peníze, a rozhraní navržené pro ovládání jednou rukou na telefonu.