← Projects
2025completed

Reservation System for School Buffet

I built the frontend for a school buffet meal reservation system as part of my graduation project at SPŠE and VOŠ Plzeň (2024/2025). Students browse the menu, add items to a cart, and place orders. Administrators manage the menu and incoming orders. The frontend uses React with Tailwind CSS and communicates with a PHP backend written by a classmate over a REST API.

  • React
  • TypeScript
  • Tailwind CSS
  • React Router
  • Zustand
  • WebSocket
  • TanStack Query
  • Axios
  • Zod
GitHub Live demo

Project Preview

Reservation System for School Buffet — project preview screenshot

Context

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.

Technical Approach

  • 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

Challenges

  • 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

What I Learned

  • 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

Key Features

  • Student interface
  • Admin interface
  • WebSocket KDS integration
  • REST API

Next Project

TextForge

Live text conversion tool with AI formatting, schema inference, and Stripe premium access.

View Project