Rezervační systém školního bufetu
Postavil jsem frontend rezervačního systému jídel školního bufetu jako součást maturitního projektu na SPŠE a VOŠ Plzeň (2024/2025). Studenti procházejí menu, přidávají položky do košíku a zadávají objednávky. Administrátoři spravují menu a příchozí objednávky. Frontend používá React s Tailwind CSS a přes REST API komunikuje s PHP backendem, který napsal spolužák. Nicméně nebylo možné ho nasadit, protože bufet obsluhovala jedna osoba z partnerské organizace, takže provoz i platby byly na převzetí moc složité.
- React
- TypeScript
- Tailwind CSS
- React Router
- Zustand
- WebSocket
- TanStack Query
- Axios
- Zod
Náhled projektu
Kontext
Jídelna stále jela na papírových lístcích a vykřikovaných objednávkách během obědové špičky. Pro maturitní projekt na SPŠE a VOŠ Plzeň jsme chtěli, aby objednávání bylo stejně rychlé jako vzít si tác, ne jako další appku, kterou studenti mezi hodinami ignorují.
Technický přístup
- React (Vite + TypeScript) SPA s Tailwind CSS
- Zustand pro stav košíku a react-auth-kit pro správu sezení
- TanStack Query s Axiosem pro menu a účty, plus vlastní WebSocket služba s heartbeat keep-alive pro kitchen display
- Zod validace vstupů a TypeScript rozhraní napříč vrstvami načítání dat
Výzvy
- Postavit Kitchen Display System, který udržuje tikety synchronizované v reálném čase bez přetížení serveru
- Vyvíjet frontend, zatímco PHP backend vznikal paralelně
- Zvládnout client-side validaci a globální stav pro košík, auth a navigaci pod špičkovým provozem
Co jsem se naučil
- Knihovny třetích stran pro WebSocket nezvládaly keep-alive tak, jak kitchen display potřebuje, takže jsme postavili nativní ping interval proti výpadkům spojení
- Vlastnit jen frontend vynutilo disciplínu v API hranicích. Axios a TanStack Query se staly integrační plochou, když se chování backendu měnilo koncem semestru
- Pro kuchyňský personál a studenty v krátkém obědovém okně záleželo víc na spolehlivosti než na animačním leštění
- Zod validace a konzistentní linting ušetřily čas při integračním testování
Hlavní funkce
- Studentské rozhraní
- Admin rozhraní
- WebSocket KDS integrace
- REST API
Další projekt
OMORI Headspace
Interaktivní fanouškovská stránka věnovaná hře OMORI se scroll-driven animacemi v GSAP a precizním front-endovým zpracováním.