LedgerOS: Cashflow Intelligence
Panel finansowy, który pokazuje, kiedy skończą się pieniądze
To projekt demonstracyjny, nie wdrożenie u klienta. Zbudowałem go, żeby pokazać ten mechanizm w działaniu.
W skrócie
Dla kogo
Firmy sprzedające w abonamencie oraz każdy, kto musi pokazać wspólnikowi albo inwestorowi, jak wygląda przepływ gotówki.
Problem
Liczby o pieniądzach mieszkają w arkuszu, którego nikt poza księgową nie otwiera. Decyzje o wydatkach zapadają na wyczucie, bo przeliczanie scenariuszy zajmuje pół dnia.
Co to zmienia
Suwaki zamiast formuł. Przesuwasz przychód albo koszt i od razu widzisz, na ile miesięcy starczy gotówki. Rozmowa o budżecie przestaje być rozmową o arkuszu.
Panel finansowy, który pokazuje, kiedy skończą się pieniądze
Większość narzędzi finansowych dla startupów to albo arkusze kalkulacyjne, albo przytłaczające ERP-y. LedgerOS to projekt koncepcyjny odpowiadający na pytanie: jak powinien wyglądać minimalny, ale kompletny SaaS do monitorowania kondycji finansowej firmy? Interfejs nie prezentuje danych statycznie, opowiada o nich. Użytkownik nie czyta wykresu; scrollując przez hero, widzi jak burn rate, runway i prognoza zmieniają się w czasie rzeczywistym, jak żywy system operacyjny.
Projekt obejmuje 8 w pełni zrealizowanych podstron (Landing, Blog ze statycznie generowanymi postami, Kariera z filtrowaniem po departamentach, Kontakt w stylu terminala, O nas, Design System) oraz kompletny, interaktywny dokument Design Systemu.
Co z tego wynika dla Twojej firmy
Jeśli w Twojej firmie liczby żyją w pliku, do którego nikt nie zagląda, ten projekt pokazuje alternatywę: policzone raz, pokazane tak, żeby dało się spojrzeć i zdecydować. Ten sam wzorzec działa na stronie firmowej jako kalkulator oferty, symulacja raty albo wycena, którą klient robi sobie sam, zanim do Ciebie napisze.
DLA ZAINTERESOWANYCH TECHNICZNIE Na czym to zbudowałem i dlaczego akurat tak. Kliknij, żeby rozwinąć.
Stack technologiczny
Next.js 14 (App Router)
Świadomy podział na Server i Client Components. Strony o charakterze statycznym (/about, /blog/[slug]) korzystają z generateStaticParams i generateMetadata dla optymalnego SEO i Core Web Vitals. Interaktywne sekcje oznaczone "use client" tam gdzie jest to rzeczywiście wymagane, nie domyślnie.
TypeScript (strict mode)
Dane aplikacji zdefiniowane jako as const w lib/constants.ts, co daje pełne autouzupełnianie i eliminuje błędy runtime'owe. Typowany generyk useCallback<K extends keyof CalcInputs>(key, val) w kalkulatorze scenariuszy zamiast any.
Tailwind CSS z własnym Design Systemem
Własne tokeny (bg, ink, blue, lime, ledger.*), skale fluid typography (clamp()-based od fluid-xs do fluid-hero), spacing relatywny do viewportu i neobrutalistyczne cienie (shadow-neo, shadow-neo-hover).
Framer Motion 11
AnimatePresence mode="wait" przy przejściach między etapami narracji hero, layout animation w grid visualizerze Design Systemu, useSpring dla fizycznie wiarygodnego licznika w showcase'u.
GSAP 3 + ScrollTrigger
Załadowany dynamicznie (await import("gsap")) żeby nie wpływał na czas pierwszego renderowania. Inicjalizowany wewnątrz gsap.context() dla poprawnego cleanup. Przypięcie hero panelu i powiązanie etapów narracji z pozycją scrolla na osi 400vh.
Recharts
AreaChart z niestandardowym CustomTooltip, gradientami w defs i animacją 2800ms, celowo wolną, żeby podkreślić narracyjny charakter danych.
Najciekawsze rozwiązania techniczne
useCounter: własny hook animujący liczby z ease-out cubic
Hook oparty na natywnym requestAnimationFrame parsuje stringi typu "$658K" lub "+23%" przez regex, interpoluje wartość od 40% do 100% z krzywą 1 - Math.pow(1 - progress, 3). Cleanup przez cancelAnimationFrame.
calculate(): deterministyczny silnik finansowy
Czysta funkcja symulująca 36-miesięczny przepływ gotówki. Na każdym kroku oblicza netBurn, aktualizuje cash, rejestruje breakeven i przerywa gdy cash <= 0. Wynik zasila jednocześnie sparkline SVG, pasek runway i callout.
Design System jako live playground
TypographyPlayground z contentEditable, GridSystem z Framer Motion layout animation, TokenGrid z IntersectionObserver do stagger reveal. Spy navigation przez drugi IntersectionObserver z rootMargin.
Twoja firma może być
moim kolejnym projektem
Opowiedz mi o swojej firmie, a powiem, który z tych mechanizmów miałby u Ciebie sens, a który byłby wydatkiem bez pokrycia.
Powiem też, czego nie warto u Ciebie robić