Reservation System for School Buffet

Kontext

The cafeteria still ran on paper slips and shouted orders during the lunch rush. For our graduation project at SPŠE and VOŠ Plzeň, we wanted ordering to feel as quick as grabbing a tray, not like another app students would ignore between classes.

Technický přístup

• React (Vite + TypeScript) SPA with Tailwind CSS
• Zustand for cart state and react-auth-kit for session handling
• TanStack Query with Axios for menus and accounts, plus a custom WebSocket service with heartbeat keep-alive for the kitchen display
• Zod validation on inputs and TypeScript interfaces across data-fetching layers

Výzvy

• Building a Kitchen Display System that kept tickets synced in real time without overloading the server
• Developing the frontend while the PHP backend was still being built in parallel
• Handling client-side validation and global state for cart, auth, and navigation under peak traffic

Co jsem se naučil

• Third-party WebSocket libraries did not handle keep-alive the way a kitchen display needs, so we built a native ping interval to prevent dropped connections
• Owning only the frontend forced disciplined API boundaries. Axios and TanStack Query became the integration surface when backend behavior changed late in the semester
• Reliability mattered more than animation polish for kitchen staff and students moving through a short lunch window
• Zod validation and consistent linting saved time during integration testing