FOOD DELIVERY

Experience Seamless Food Ordering with Modern Technology

🚀 Live Demo: Coming Soon

Built with the tools and technologies:

Overview

Introducing Food Delivery, a comprehensive full-stack restaurant application designed to revolutionize the food ordering experience with modern web technologies.

Why Food Delivery?

This project provides a complete solution for restaurant businesses and food lovers, featuring:

• 🍕 Interactive Menu Display: Beautiful and responsive menu with high-quality food images and detailed descriptions.

• 🛒 Smart Cart Management: Real-time cart updates with quantity management and price calculations.

• 📱 Mobile-First Design: Optimized for all devices with Tailwind CSS responsive design principles.

• 💳 Secure Payment Processing: Integrated Stripe payment system for safe and reliable transactions.

• 📊 Advanced Admin Dashboard: Complete backend management with calendar scheduling, order tracking, and analytics.

• 🎨 Modern UI/UX: Clean, intuitive interface with Framer Motion animations and Lottie graphics.

Getting Started

Prerequisites

This project requires the following dependencies:

• Runtime Environment: Node.js (v18+)
• Database: MongoDB
• Package Manager: npm or yarn

Installation

Build Food Delivery from the source and install dependencies:

1. Clone the repository:

git clone https://github.com/yourUser/Web_Restaurent-fullstack

2. Navigate to the project directory:

cd Web_Restaurent-fullstack

3. Install backend dependencies:

cd backend && npm install

4. Install frontend dependencies:

cd ../frontend && npm install

Configuration

1. Create a .env file in the backend directory:

MONGODB_URI=your_mongodb_connection_string
PORT=5000
JWT_SECRET=your_jwt_secret
STRIPE_SECRET_KEY=your_stripe_secret_key

2. Create a .env file in the frontend directory:

VITE_API_URL=http://localhost:5000
VITE_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key

Usage

Run the project with:

Backend Server:

cd backend && npm start

Frontend Development Server:

cd frontend && npm run dev

Testing

Build the project for production:

cd frontend && npm run build

Built with the tools and technologies

Frontend:

• React - JavaScript library for building user interfaces
• Vite - Next generation frontend tooling
• Tailwind CSS - Utility-first CSS framework
• Redux Toolkit - State management
• Framer Motion - Animation library
• React Router - Client-side routing
• Swiper - Modern touch slider
• Stripe - Payment processing
• Chart.js - Data visualization
• React DatePicker - Date selection components
• AOS - Animate On Scroll library
• Lottie Web - Animation rendering

Backend:

• Node.js - JavaScript runtime environment
• Express.js - Web application framework
• MongoDB - NoSQL database
• Mongoose - MongoDB object modeling
• JWT - JSON Web Tokens for authentication
• Bcrypt - Password hashing
• Stripe - Payment processing API
• Express Validator - Input validation
• CORS - Cross-origin resource sharing
• Moment.js - Date manipulation

Development Tools:

• ESLint - Code linting
• Nodemon - Development server
• PostCSS - CSS processing
• Autoprefixer - CSS vendor prefixing

Features

• 🍽️ Dynamic Menu System: Browse categories, view detailed food items with images and descriptions
• 🛒 Shopping Cart: Add/remove items, quantity management, real-time price updates
• 👤 User Authentication: Secure login/register system with JWT tokens
• 📦 Order Management: Place orders, track order status, comprehensive order history
• 💳 Payment Integration: Secure Stripe payment processing with multiple payment methods
• 📱 Responsive Design: Seamless experience across desktop, tablet, and mobile devices
• ⚡ Fast Performance: Optimized with Vite build tool and lazy loading
• 🔍 Search & Filter: Advanced filtering options to find desired dishes quickly
• ⭐ Reviews & Ratings: Customer feedback and rating system
• 📍 Location Services: Delivery address management and location tracking
• 📅 Reservation System: Table booking with calendar integration
• 📊 Admin Analytics: Comprehensive dashboard with charts and reporting
• 🎨 Modern Animations: Smooth transitions with Framer Motion and Lottie
• 🔔 Real-time Notifications: Order updates and system notifications
• 📱 Progressive Web App: App-like experience with offline capabilities

Design Reference

This project is based on the Figma design.

Preview