Webové aplikace postavené od základů

1. 01

   Tabulky, dashboardy a mapy

   Stavíme rozhraní pro velké objemy dat: tabulky se stránkováním a virtualizací řádků, filtry uložené v adrese stránky, dashboardy a mapové pohledy. Agregaci a filtrování dělá server, prohlížeč vykresluje jen stránku, kterou má uživatel před sebou.

   Technologie

   • React ·
   • TanStack Table ·
   • TanStack Virtual ·
   • React Query ·
   • Google Maps

2. 02

   Backend, API a databáze

   Píšeme serverovou část v Node.js: API, datový model a dotazy do PostgreSQL. Napojujeme i další systémy, například účetní software nebo zpracování souborů na pozadí.

   Technologie

   • Node.js ·
   • NestJS ·
   • Fastify ·
   • Prisma ·
   • PostgreSQL

3. 03

   Převzetí existujícího kódu

   Převezmeme aplikaci, kterou rychle postavil jiný tým nebo AI, a zlepšujeme ji po malých krocích v rámci běžných úkolů. Přidáme testy, pravidla pro lint a CI, které u každé změny zkontroluje typy a build.

   Technologie

   • TypeScript ·
   • Jest ·
   • Playwright ·
   • ESLint ·
   • GitHub Actions

4. 04

   Přístupnost podle WCAG

   Upravíme aplikaci tak, aby se dala ovládat klávesnicí i čtečkou obrazovky a splnila WCAG 2.1 AA. Změny hlídají automatické kontroly axe a screenshot testy, takže se vzhled nezmění nechtěně.

   Technologie

   • React ·
   • Playwright ·
   • axe-core

1. Žádné přepisování od nuly

   Kód zlepšujeme po kouscích v rámci úkolů, na kterých se zrovna pracuje. Nové funkce tak vycházejí dál.

2. Nejdřív záchranná síť

   Než začneme kód přesouvat, napíšeme end-to-end nebo screenshot testy. Ukážou, když se něco změní, aniž bychom chtěli.

3. Těžkou práci dělá server

   Data agregujeme a filtrujeme na serveru a další stránku tabulky načítáme dopředu. Části dashboardu se načítají a selhávají každá zvlášť, takže jeden pomalý dotaz nezablokuje celou stránku.

1. 01

   Analytika tísňových volání, USA

   Analytický modul platformy pro linky 911: velké datové tabulky s agregací na serveru a virtualizací řádků, dashboardy a mapové pohledy. Jedna stránka postavená celá, od dotazů v Postgresu a Databricks po rozhraní.

   Technologie

   • React ·
   • TypeScript ·
   • Google Maps ·
   • PostgreSQL ·
   • Databricks

2. 02

   Právní e‑billing, USA

   Full stack na Next.js, NestJS a PostgreSQL. Převzali jsme AI asistenta: nástroje běží pod přihlášeným uživatelem a načítají se, až když si o ně model řekne. Pevný kontext každého požadavku tím klesl odhadem o 60 %. K tomu unit testy a CI pro web.

   Technologie

   • Next.js ·
   • NestJS ·
   • PostgreSQL ·
   • Vercel AI SDK ·
   • Gemini

3. 03

   Enterprise headless CMS

   Přístupnost celého produktu na úroveň WCAG 2.1 AA, v týmu frontendových vývojářů. S kontrolami axe a vizuálními testy v Playwrightu.

   Technologie

   • React ·
   • Playwright ·
   • axe-core

4. 04

   SaaS pro kontrolu gramatiky

   Většina aplikace včetně backendu: API na Fastify, Prismě a PostgreSQL, crawler na Crawlee a kontroly směrované podle jazyka do LanguageTool nebo GPT-4o-mini.

   Technologie

   • Fastify ·
   • Prisma ·
   • PostgreSQL ·
   • Crawlee

5. 05

   Pharmatech

   Nová struktura frontendu v Reactu, kód přesouvaný po malých krocích a end-to-end testy.

   Technologie

   • React ·
   • TypeScript

Časté otázky

Technologie

Rozhraní

React, TanStack Table, TanStack Virtual, React Query, Google Maps

Server a data

Node.js, NestJS, Fastify, Prisma, PostgreSQL

Kvalita a testy

TypeScript, Jest, Playwright, ESLint, GitHub Actions, axe-core