Afrik Gardens

The restaurant needed to move beyond a static website and manage their business digitally — updating menus, promoting weekend events with flyers, handling table reservations, and moderating customer reviews — all without relying on a developer for every change.

The core challenges were:

• Building a real-time menu with complex pricing (multiple sizes per drink item) that non-technical staff can manage
  
• Handling weekend event flyers that change weekly, with support for multiple flyers per day displayed as a carousel
  
• Preventing reservation conflicts by blocking out already-booked dates in real time
  
• Ensuring spam protection on public-facing forms via reCAPTCHA v3

A two-sided application: a public-facing restaurant site and a protected admin dashboard with role-based access control.

Customer Features:

• Animated menu page with section/subcategory filtering, size-based drink pricing (Large / Mini / Small), and one-tap WhatsApp ordering
  
• Events page with per-day carousel of flyers for Friday, Saturday, and Sunday
  
• Reservation form with a live calendar that greys out booked dates (pulled in real time from Firestore)
  
• Photo gallery with masonry grid and lightbox viewer
  
• Reviews and testimonials section
  

Admin Features:

• Menu manager — add, edit, delete items with image uploads to Firebase Storage
  
• Event manager — create event periods, upload multiple flyers per day
  
• Gallery manager, reservation manager (confirm / cancel bookings), user manager
  
• Featured content manager — control the hero banner/video shown on the menu page

Technical highlights:

• Real-time data sync via Firestore onSnapshot throughout the app, so admin changes appear instantly for customers
  
• Lazy-loaded admin routes to keep the public bundle small
  
• PWA support for installability on mobile devices
  
• Per-page SEO metadata managed with react-helmet-async