About the Project
Catering Calculator is a React + Vite web application built for event catering businesses to streamline menu pricing, bulk order calculations, and recipe discovery. The app is structured around two core workflows: a smart catering cart and an interactive recipe book.
The cart system supports bulk pricing with unified discount handling, separating subtotal, savings, and final payable total into clearly distinct values. A guest count input multiplies product quantities across the entire cart and dynamically updates total cost, per-person cost, and savings in real time — making it accurate for large group event orders.
The recipe book went through two major UI iterations. The first introduced an interactive flipbook interface using react-pageflip, giving users a physical book-browsing experience with page-flip animations and accidental-flip prevention on action buttons. The second redesign replaced the flipbook with a categorised, filterable list view — adding category, product, and search filters for faster discoverability alongside user-friendly tips, which proved more practical for real-world use.
The codebase was refactored from a monolithic App.jsx into dedicated modular components and custom hooks — separating UI sections from business logic for maintainability and scalability. The header was rebuilt with a reusable button pattern and a mobile toggle menu. The footer, cart page, and enquiry page were all updated with improved visual hierarchy and responsive layouts.
Navigation uses React Router with a ScrollToTop utility ensuring the window resets to top on every page transition. The dev environment supports LAN access, ngrok tunnelling, and a custom port for flexible external preview during development.
Key Highlights
Technical Breakdown
Feature areas & implementation details