Case StudyVercel - under development

FoodEx Website

FoodEx is a modern, comprehensive restaurant management and dish display website built with React and Firebase. The project delivers a seamless dining experience with an advanced admin dashboard, secure authentication system, real-time dish management, and fully responsive user interface. The project demonstrates expertise in React development, Firebase integration, state management, and best practices for restaurant web applications.

Live Preview Source Code

Core Tech Stack

React
Firebase
Material-UI

Performance

Client-Side Rendering (CSR) for fast initial load
Component-based code splitting
LocalStorage caching for dishes data
Context API for efficient state sharing
Lazy loading of images

Security

Firebase Security Rules for database protection
Environment Variables for API key protection
Protected Routes with authentication checks
Role-Based Access Control (Admin/User)
Input Validation in forms

Key Features

Professional dish display with card-based layout

Interactive dish cards with hover effects and favorite functionality

Multiple meal types support (Breakfast, Lunch, Dinner)

Real-time dish search from header with instant results

Category-based filtering by meal type

Rating system with star display

Favorites management with Firebase synchronization

Responsive search working on all devices

Complete dish details page with full information

Price, description, category, and ratings display

Context API for global state management

LocalStorage integration for temporary data caching

Secure login/logout with Firebase Authentication

New account creation with user profile

Session management with persistent login

Protected Routes for admin dashboard

User role management (Admin/User)

Real-time user activity tracking

Comprehensive admin dashboard

Real-time dish management (Add, Update, Delete)

Bulk dish upload from JSON file

Delete all dishes functionality

User management and activity monitoring

Professional and responsive admin interface

Add new dishes with full details

Update existing dishes

Delete dishes from database

Image URL support for dish images

Data storage in Firestore

Fully responsive design (Mobile, Tablet, Desktop)

Material-UI components for consistent design

Smooth Animations & Transitions

Error Handling & User Feedback with SweetAlert2

Client-Side Rendering (CSR)

React Router for navigation

Dynamic routing for dish details

Component-based architecture

Reusable UI components

Context API for state sharing

Firebase real-time database updates

Optimistic UI Updates for favorites

Project Architecture

src/
├── components/
│   ├── About.js              # About us page component
│   ├── appBarComponent.js    # Top navigation bar with search
│   ├── Branches.js           # Restaurant branches page
│   ├── contact.js            # Contact page
│   ├── content.js            # Main content with dish grid
│   ├── Dishes.js             # Dish card component
│   ├── filterBtns.js         # Meal type filter buttons
│   ├── foodWebsite.js        # Main home page component
│   ├── Home.js               # Home page wrapper
│   ├── login.js              # Login page with Firebase Auth
│   ├── register.js           # Registration page
│   ├── MealDesc.js           # Dish details page
│   ├── Reviews.js            # Reviews page
│   ├── searchContent.js      # Search results page
│   ├── secondBar.js          # Secondary navigation bar
│   ├── supFooter.js          # Footer component
│   ├── MainDataContext.js    # Context API for state management
│   ├── mealsData.json        # Default dishes data
│   └── rating.json           # Ratings data
├── Dashbord/
│   └── adminDashbord.js      # Admin dashboard for dish management
├── firebase/
│   ├── firebaseConfig.js     # Firebase configuration
│   └── dataBaseContext.js    # Database context provider
├── imgs/                     # Component images
├── App.js                    # Main app component with routes
├── App.css                   # Main app styles
├── index.js                  # Entry point with React Router
└── index.css                 # Global styles
public/
├── imgs/                     # Public images and screenshots
├── index.html                # HTML template
└── manifest.json             # PWA manifest

Engineering Strategies

Client Components for all interactive sections (Search, Favorites, Authentication)
Context API for global state management (Dishes, User, Search)
LocalStorage for temporary data caching and offline support
Firebase Firestore for real-time database operations
React Router for client-side routing and navigation
Dynamic routing for dish details pages
State Management via React Context API (Dishes, User, Search, Favorites)
Component-based architecture for reusability and maintainability
Material-UI for consistent design system
Firebase Integration for secure authentication and real-time database
Role-Based Access Control (RBAC) with Admin/User roles
Protected Routes for admin dashboard
Responsive Design with Material-UI breakpoints
Error Handling and User Feedback with SweetAlert2
Environment Variables for secure Firebase API key management
Optimistic UI Updates for favorites functionality
Real-time data synchronization with Firestore
Bulk operations for dish management

Visual Interface