Z prázdné obrazovky k prvnímu klientovi naživo — za osm dní.
Fit in de Buurt je leadová platforma pro lokální sportovní studia: landing pages, které konvertují, portál pro sledování obvolaných leadů, průvodce podle PSČ a fakturace kolem toho. Návrh, stavba, databáze, hosting a provoz — postaveno sólo.
Naživo na fitindebuurt.nl · Row-level security na všem soukromém · Next.js 16, React 19, Supabase
Problém
Malé sportovní studio inzeruje lokálně, posílá lidi na svůj Instagram nebo obecný web a tam je ztrácí. Kdo zareaguje, přichází přes DM, mail nebo zprávu; majitelka si v hlavě drží, komu má zavolat zpět. Za dva dny je polovina zapomenutá a zájem je pryč.
Tři věci, které pro to existují, řeší každá jen kousek. Tvůrce webů dodá stránku bez následné péče. CRM je příliš těžký pro někoho s hrstkou leadů měsíčně. Linktree nedává žádný vhled. A všechno, co funguje, ukládá osobní údaje jejích klientů na místo, nad kterým nemá kontrolu.
Co z toho vzniklo
Jedna platforma obsluhující tři druhy návštěvníků najednou — sportovce, studio a provozovatele.
Pro sportovce
Domovská stránka je průvodce: zadej PSČ a uvidíš, která studia, posilovny, salony a praxe jsou nejblíž, se vzdáleností, recenzemi a tlačítkem do rezervačního systému nebo na leadovou stránku. Bez cookies, bez účtu a bez toho, abychom ukládali, co někdo hledá.
Pro studio
Vlastní leadová stránka na jméno.fitindebuurt.nl a fitindebuurt.nl/jméno, postavená z bloků a sladěná s identitou. Kdo nechá číslo, přistane hned v portálu, s mailem u toho. Ten portál má jeden seznam: komu volám. U každého leadu systém sleduje pokusy o volání, umožňuje odložit s poznámkou a označit jako získaný nebo odmítnutý.
Pro provozovatele
Editor, kde stavím a publikuji klientskou stránku, statistika na verzi té stránky a fakturace s předplatnými, číslováním, PDF a noční úlohou cron.
Nikde není tlačítko pro volání ani odkaz tel:. To je celý princip: návštěvník nechá své údaje a studio zavolá zpět. Tak majitelka ví, kdo měl zájem, i když se hovor hned nespojí.
Čtyři rozhodnutí, která projekt určují
Rozhodnutí, která prostupují celou codebase — a dělají rozdíl mezi hotovým a odbytým.
Oddělení mezi klienty je v databázi, ne v rozhraní
Každá stránka má jednoho vlastníka. Row-level security v Postgresu rozhoduje, kdo vidí který řádek; aplikace to nemůže obejít, já také ne. Testovací sada používá skutečné přihlašovací údaje dvou vlastníků, aby se pokusila číst, měnit a mazat leady toho druhého. Bez toho zeleného testu nejde nic do produkce.
Obsah stránky žije na dvou místech, záměrně
Šablona je typovaný soubor končící satisfies LandingPagina — chybí-li text, build spadne. Co změním v editoru, uloží se jako overlay v databázi a při renderu se položí přes šablonu. Zachovám záruky kompilátoru a můžu měnit texty bez deploye.
Publikuje se pod jménem, čísla patří k verzi
Každá publikace je neměnný řádek v pagina_versies. Denní čítače si pamatují, co se počítalo na verzi, takže vidím, co přinesl "Kratší hero" oproti "Letní akci", a starou verzi obnovím jako koncept jedním klikem.
Vše v nizozemštině, až do databáze
Sloupce se jmenují belpogingen, snooze_tot, weggedrukt_op. Čte se to stejně pro klienta i pro mě a drží malou vzdálenost mezi tím, co říkáme v rozhovoru, a tím, co je v kódu.
Tři části hodné zdůraznění
Místa, kam šlo nejvíc přemýšlení a stavění.
Editor stránek
Vlevo živý náhled, vpravo stránka shora dolů: jeden panel na blok se vším, co k němu patří. Texty upravuješ přímo v náhledu — ukaž, klikni, piš — a návštěvník dostane přesně stejné HTML. Akcentní barva žije v jedné CSS proměnné; color-mix z ní odvodí pět odstínů, takže každý blok sedí ke každé identitě.
Průvodce podle PSČ
PSČ jdou na lokalizační server Kadastru (PDOK): otevřený, zdarma, bez klíče. Výsledek ukládáme do vlastní tabulky, druhý návštěvník se stejným PSČ nestojí žádný požadavek. Postgres počítá vzdálenost a vrací jen studia splňující všechny podmínky. Z návštěvníka neuchováváme nic: žádné cookie, žádnou IP.
Fakturace
Předplatná na klienta, automatické koncepty z nočního běhu, řada čísel faktur, která nesmí přeskočit, částky v haléřích, DPH na řádek a PDF v úložišti. Odeslaná faktura je zmrazená: databázové triggery odmítají jakoukoli změnu, protože odeslaná faktura má zůstat sedm let stejná.
Potřebujete něco takového pro svou firmu?
Jak je to poskládané
Jeden projekt Next.js obsluhuje čtyři druhy návštěvníků, oddělené skupinami tras: průvodce, marketingové stránky, klientské landing pages a přihlášenou část. Subdomény jdou přes proxy.ts, který obnovuje session Supabase a zamyká vše za přihlášením.
| Vrstva | Volba |
|---|---|
| App | Next.js 16 (App Router), React 19, TypeScript strict |
| Styling | Tailwind CSS 4, vlastní komponenty, plně nizozemské rozhraní |
| Data + auth | Supabase (Postgres, auth, storage), region Frankfurt |
| Validace | Zod, na obou stranách i na proměnných prostředí |
| Resend, pět transakčních mailů s jednou úpravou | |
| @react-pdf/renderer, faktury v Supabase Storage | |
| Hosting | Vercel, wildcard *.fitindebuurt.nl, cron úlohy, preview na push |
| Tajemství | Doppler; žádný klíč v repu |
| Monitoring | Sentry, jen v produkci |
- Dvě noční úlohy na Vercelu za sdíleným tajemstvím: 06:00 fakturace, 04:00 úklid prošlých žádostí.
- Žádná jména, telefonní čísla ani e-maily v logách či chybových hláškách, žádné IP adresy ve statistice.
- Leady se zapisují výhradně na straně serveru — prohlížeč nemá právo zápisu do databáze.
- Odložený lead se vrátí sám: snooze není status, ale datum, žádná úloha na pozadí, která by mohla stát.
Kvalita a způsob práce
Jeden příkaz je brána: npm run check spustí typecheck, ESLint bez varování, Prettier, všechny unit testy a plný build. Co tím neprojde, není hlášeno jako hotové. Husky a lint-staged dělají totéž u každého commitu, GitHub Actions to opakuje u každého pushe.
| Co | Rozsah |
|---|---|
| Kód | 265 souborů, ± 33 000 řádků TypeScriptu |
| Databáze | 27 migrací, 20 tabulek, RLS na všem soukromém |
| Unit testy | 412, ve 37 souborech |
| Prohlížečové testy (Playwright) | 52, v 9 souborech |
| Šablony a bloky | 8 šablon, 12 znovupoužitelných bloků |
| Commity | 94, za osm dní |
Prohlížečové testy dělají to, co člověk
Přihlásit se, získat lead, odložit ho, vypnout blok v editoru, publikovat a ověřit, že se veřejná stránka také mění. Přesně tam jsou chyby, které typecheck a unit testy nevidí.
Dohledatelnost je zafixovaná na čtyřech místech
robots.ts (s dvaceti třemi AI crawlery jmenovitě), sitemap tahající klientské stránky z databáze, generovaný /llms.txt s celým webem v markdownu a strukturovaná data na typ stránky — nikdy víc, než co je na stránce samotné.
Postaveno s pomocí AI, ale ne naslepo
Každá část byla nejdřív sepsaná jako plán v repu — proč, jaké fáze, jaké kompromisy — a pak postavená. Pevné dohody žijí v souboru pravidel, který každá session načítá. Testy, typy a row-level security jsou brzda.
Kde to teď je
Web běží, první skutečný klient je naživo a v průvodci, a fakturace je připravená na jeho první předplatné.
- Zobrazení na mapě a vlastní přehledové stránky na typ a místo
- Ověřené Google recenze
- Export leadů
- Dvoufaktorové ověření
- A/B testy na dvou publikovaných verzích najednou
Od nápadu k platformě naživo
Software na míru, který vydrží.
Leadová platforma, portál, e-shop nebo interní nástroj — postaveno s testy, typy a soukromím jako základem. Pojďme probrat, co potřebujete.