Name	Name	Last commit message	Last commit date
Latest commit History 3 Commits
public	public
src	src
.gitignore	.gitignore
README.md	README.md
eslint.config.js	eslint.config.js
index.html	index.html
package-lock.json	package-lock.json
package.json	package.json
vite.config.js	vite.config.js

DineFlow — Client

🍽️ Modern Restaurant Management Frontend

A feature-rich, responsive React application powering both the customer-facing experience and the admin dashboard for the DineFlow restaurant management platform.

React Vite TailwindCSS Firebase License

Live Demo · Report Bug · Request Feature

📖 About The Project

DineFlow Client is the frontend application of the DineFlow restaurant management platform. Built with React 19 and Vite, it delivers a smooth, modern user experience for two distinct user roles:

Customers — browse the menu, place orders, reserve tables, leave reviews, and track orders in real time.
Admins — access a full-featured dashboard with analytics, menu management, inventory tracking, order processing, and more.

The application features Firebase-powered authentication (email/password + Google OAuth), real-time data fetching with TanStack Query, and a polished UI built with Tailwind CSS v4 and Framer Motion animations.

✨ Key Features

🛒 Customer Experience

🔍 Browse menu with search, category filter, and sort
🛒 Add to cart and place orders (delivery / pickup)
📅 Table reservation with date, time, and guest count
📦 Order history with real-time status tracking
⭐ Dish reviews and restaurant testimonials
👤 Profile management with photo upload
🔐 Firebase auth (Email/Password + Google)

📊 Admin Dashboard

📈 Revenue, orders, and booking analytics (Recharts)
🍔 Full CRUD for menu items and categories
☁️ Cloudinary image upload for menu items
📋 Order management with status pipeline
📅 Booking management (confirm / cancel)
📦 Inventory tracking with low-stock alerts
👥 User management with role assignment
💬 Testimonial approval system

🛠️ Tech Stack

Category	Technology
UI Framework	React 19
Build Tool	Vite 8
Styling	Tailwind CSS v4
Routing	React Router v7
State / Data	TanStack Query (React Query) v5
Forms	React Hook Form
Animations	Framer Motion
Charts	Recharts
Authentication	Firebase (Email/Password + Google OAuth)
HTTP Client	Axios (with JWT interceptors)
Image Hosting	Cloudinary (unsigned upload)
Notifications	React Hot Toast
Icons	React Icons
SEO	React Helmet Async
Date Picker	React Datepicker

🚀 Getting Started

Prerequisites

Node.js ≥ 18.x
npm ≥ 9.x (or yarn / pnpm)
A running instance of the DineFlow Server
Firebase project with Authentication enabled
Cloudinary account with an unsigned upload preset

Installation

Clone the repository

git clone https://github.com/M-R-Saad/DineFlow-client.git
cd DineFlow-client

Install dependencies
```
npm install
```
Set up environment variables

Create a .env file in the root directory (see Environment Variables below).
Start the development server
```
npm run dev
```
The app will be available at http://localhost:5173.

Build for Production

npm run build
npm run preview # Preview the production build locally

🔐 Environment Variables

Create a .env file in the project root with the following variables:

# API
VITE_API_URL=http://localhost:5000/api
# Firebase Configuration
VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id
# Cloudinary
VITE_CLOUDINARY_CLOUD_NAME=your_cloud_name
VITE_CLOUDINARY_UPLOAD_PRESET=your_unsigned_preset

⚠️ Important: Never commit your .env file to version control. It is already included in .gitignore.

📁 Project Structure

DineFlow-client/
├── public/ # Static assets & logos
│ ├── df_logo_bg_removed.png # App logo
│ ├── df_name_bg_removed.png # App name logo
│ └── favicon.svg # Favicon
├── src/
│ ├── api/ # Axios instances & API call functions
│ │ ├── axiosPublic.js # Public axios (no auth header)
│ │ ├── axiosSecure.js # Secure axios (JWT interceptor)
│ │ ├── authApi.js # Auth endpoints
│ │ ├── menuApi.js # Menu endpoints
│ │ ├── bookingApi.js # Booking endpoints
│ │ ├── orderApi.js # Order endpoints
│ │ └── adminApi.js # Admin CRUD endpoints
│ ├── assets/ # Images, icons, static files
│ ├── components/ # Reusable UI components
│ │ ├── shared/ # Navbar, Footer, Loader, Modal, etc.
│ │ ├── home/ # Hero, Featured Menu, Testimonials
│ │ ├── menu/ # MenuCard, Filter, Search
│ │ ├── booking/ # BookingForm, BookingCard
│ │ ├── order/ # Cart, OrderCard, StatusBadge
│ │ ├── dashboard/ # Charts, StatCard, Alerts
│ │ └── auth/ # Login & Register forms
│ ├── context/ # React Context providers
│ │ ├── AuthContext.jsx # Firebase auth state management
│ │ └── CartContext.jsx # Shopping cart state
│ ├── hooks/ # Custom React hooks
│ │ ├── useAuth.js # Auth context shortcut
│ │ ├── useCart.js # Cart context shortcut
│ │ ├── useAxiosSecure.js # Secure axios hook
│ │ └── useAdmin.js # Admin role check
│ ├── layouts/ # Page layout wrappers
│ │ ├── MainLayout.jsx # Public pages (Navbar + Footer)
│ │ ├── DashboardLayout.jsx # Admin pages (Sidebar + Content)
│ │ └── AuthLayout.jsx # Auth pages (Centered card)
│ ├── pages/ # Route-level page components
│ │ ├── public/ # Home, Menu, About, Contact
│ │ ├── auth/ # Login, Register
│ │ ├── customer/ # Profile, Orders, Bookings
│ │ └── admin/ # Dashboard, Manage* pages
│ ├── routes/ # Route configuration
│ │ ├── AppRoutes.jsx # All route definitions
│ │ ├── PrivateRoute.jsx # Auth guard
│ │ └── AdminRoute.jsx # Admin role guard
│ ├── utils/ # Utility functions
│ ├── App.jsx # Root component
│ ├── main.jsx # App entry point
│ └── index.css # Global styles & Tailwind imports
├── .env # Environment variables (not committed)
├── .gitignore
├── index.html # HTML entry point
├── package.json
├── vite.config.js # Vite configuration
└── eslint.config.js # ESLint configuration

🗺️ Pages & Routes

Public Pages (No Authentication Required)

Page	Route	Description
Home	`/`	Hero banner, featured dishes, testimonials, CTA
Menu	`/menu`	Full menu with search, filter, and sort
Dish Detail	`/menu/:id`	Individual dish info, ingredients, reviews
About	`/about`	Restaurant story, team, values
Contact	`/contact`	Contact form, map, restaurant info
Login	`/login`	Email/password + Google sign-in
Register	`/register`	New account creation

Customer Pages (Authentication Required)

Page	Route	Description
Book Table	`/book-table`	Table reservation form
My Bookings	`/my-bookings`	View and cancel reservations
Checkout	`/checkout`	Cart review + order placement
My Orders	`/my-orders`	Order history + status tracking
Profile	`/profile`	Update name, photo, phone, address

Admin Dashboard (Admin Role Required)

Page	Route	Description
Dashboard	`/dashboard`	Overview stats + analytics charts
Manage Menu	`/dashboard/menu`	CRUD for menu items
Manage Categories	`/dashboard/categories`	CRUD for categories
Manage Bookings	`/dashboard/bookings`	View + update booking status
Manage Orders	`/dashboard/orders`	View + update order status
Manage Inventory	`/dashboard/inventory`	Stock tracking + restock
Manage Users	`/dashboard/users`	View users, change roles
Manage Testimonials	`/dashboard/testimonials`	Approve or delete testimonials

🔗 Related Repository

Repository	Description
DineFlow Server	Node.js + Express REST API backend

🤝 Contributing

Contributions are welcome! Here's how you can help:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Please make sure to update tests as appropriate and follow the existing code style.

📄 License

Distributed under the MIT License. See LICENSE for more information.

DineFlow

Built with ❤️ using React, Vite, and Tailwind CSS

⬆️ Back to Top

Folders and files

Latest commit

History

Repository files navigation

DineFlow — Client

🍽️ Modern Restaurant Management Frontend

📑 Table of Contents

📖 About The Project

✨ Key Features

🛒 Customer Experience

📊 Admin Dashboard

🛠️ Tech Stack

🚀 Getting Started

Prerequisites

Installation

Build for Production

🔐 Environment Variables

📁 Project Structure

🗺️ Pages & Routes

Public Pages (No Authentication Required)

Customer Pages (Authentication Required)

Admin Dashboard (Admin Role Required)

🔗 Related Repository

🤝 Contributing

📄 License

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages