Summary of "How To Create Full Stack Food Delivery Website In React JS, MongoDB, Express, Node JS & Stripe"

The video tutorial comprehensively guides viewers through building a full stack food delivery web application using the MERN stack (MongoDB, Express.js, React.js, Node.js) with Stripe payment integration. It covers both frontend and backend development, along with an admin panel for managing food items and orders.

Key Technological Concepts & Features Covered:

Frontend (React.js)

• Project Setup:
  • React project initialized with Vite.
  • Folder structure: components, pages, context, assets.
  • Usage of React Router for navigation between pages (Home, Cart, Place Order, Verify, My Orders).
  • Context API for global state management (food list, cart items, user token, backend URL).
• UI Components:
  • Navigation Bar with menu filtering, cart icon with dynamic dot indicator.
  • Responsive Header with background image and fade-in animation.
  • Explore Menu component to filter food categories dynamically.
  • Food Display and Food Item components showing food details with add-to-cart functionality.
  • Cart page with item list, quantity management, promo code input, and order summary.
  • Place Order page collecting delivery info and proceeding to Stripe payment.
  • Login/Signup popup with form validation and toggle between login and signup.
  • Footer and Mobile App Download components.
  • Admin panel with Sidebar, Navbar, and pages for Add Items, List Items, and Orders.
  • My Orders page displaying user’s order history with order tracking.
• Functionality:
  • Dynamic filtering of food items by category.
  • Cart management with add/remove items, quantity updates synced with backend.
  • User authentication with login, signup, token storage in localStorage, and logout.
  • Smooth scrolling navigation.
  • Responsive design with media queries for mobile compatibility.
  • Toast notifications for success/error messages.
  • Stripe payment integration with dummy card testing.
  • Real-time order status tracking with manual refresh via “Track Order” button.
  • Admin panel allows adding new food items (with image upload), listing items, and managing order statuses.

Backend (Node.js, Express.js, MongoDB)

• Server Setup:
  • Express server with middleware: JSON parsing, CORS, dotenv, body-parser, multer (for image upload), JWT for auth.
  • MongoDB Atlas used as cloud database.
  • Environment variables for secrets and connection strings.
• Models:
  • Food model: name, description, price, image URL, category.
  • User model: name, email (unique), hashed password, cart data (object).
  • Order model: userId, items (array), amount, address (object), status, date, payment status.
• Controllers & Routes:
  • Food Controller: add food item (with image upload), list food items, remove food item.
  • User Controller: user registration (with validation and password hashing), login (with JWT token generation).
  • Cart Controller: add to cart, remove from cart, get cart (all require auth middleware to decode token).
  • Order Controller: place order (creates Stripe checkout session), verify payment, list user orders, list all orders (admin), update order status.
  • Middleware for authentication: verifies JWT token from request headers and injects user ID into requests.
• Stripe Integration:
  • Payment session created with line items (products + delivery fee).
  • Success and cancel URLs redirect back to frontend.
  • Payment verification endpoint updates order payment status or deletes order on failure.

Tutorials / Guides / Reviews Provided:

1. Step-by-step React frontend build:
   • Setup, components creation, styling, routing, state management.
   • Login/signup popup with form validation.
   • Cart functionality with context API and backend sync.
   • Stripe payment page integration.
   • Responsive design with media queries.
   • Smooth scrolling and UI enhancements.
2. Backend API development:
   • Express server setup with middleware.
   • MongoDB models for food, user, order.
   • RESTful APIs for CRUD operations on food, user auth, cart management, order processing.
   • File upload handling with multer.
   • JWT-based authentication middleware.
   • Stripe payment session creation and order verification.
3. Admin panel creation:
   • React admin panel setup with routing.
   • Sidebar and navbar components.
   • Pages for adding food items, listing items, and managing orders.
   • API integration for admin CRUD operations.
4. Integration of frontend and backend:
   • Consuming APIs with Axios.
   • Managing authentication tokens.
   • Syncing cart and order data.
   • Real-time order status updates.
5. Deployment considerations:
   • Environment variables for backend secrets.
   • Dynamic backend URL handling.
   • Recommendations for resume inclusion and job readiness.

Main Speakers / Sources:

• The tutorial is presented by the creator of the Great

Category

Technology

Share this summary

Share on X/Twitter Share on Facebook Share on LinkedIn Share on Reddit Share on WhatsApp Share on Telegram

Video