LedgerOS — Cashflow Intelligence
Cashflow Intelligence dla startupów
Cashflow Intelligence dla startupów
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.
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.
Podsumowanie
LedgerOS pokazuje, że potrafię podejmować świadome decyzje architektoniczne — wybrać właściwe narzędzie do konkretnego zadania (GSAP vs Motion), zaprojektować system designu niezależny od biblioteki komponentów, i zbudować logikę domenową bez dodatkowych dependencji.
Twój biznes może być
moją kolejną realizacją
Umów bezpłatną konsultację i sprawdźmy wspólnie, co mogę dla Ciebie zrobić.
Bezpłatna konsultacja, bez zobowiązań