Food Ordering Flow
Allows users to browse food items, manage a cart, place orders, and complete checkout.
// Full-Stack / Food Delivery Demo Project
Make My Flavour
A full-stack food delivery demo application built with React, Vite, Express, MongoDB, JWT authentication, Stripe, and a dedicated admin panel.
2025
Full-Stack
01 / Overview
Make My Flavour is a full-stack food delivery demo application that allows users to browse food items, manage a cart, place orders, complete Stripe test checkout, and view order history. The project also includes an admin panel for adding food items, managing the food list, and updating order statuses. It uses React, Vite, CSS, Express, MongoDB, Mongoose, JWT authentication, bcrypt, Stripe, Multer, Axios, and Render to demonstrate full-stack architecture, authentication, cart workflows, order management, payment flow, image uploads, and admin-side operations.
Admin Management
Provides an admin panel for adding food items, managing menus, and updating order statuses.
Payment Integration
Uses Stripe test checkout to simulate online payment and verify order completion.
02 / Key Features
01
Food Browsing & Categories
Users can browse available food items and explore menu categories through a responsive food delivery interface.
02
Cart Management
Supports adding items to the cart, removing items, updating quantities, and calculating subtotal, delivery fee, and total price.
03
JWT Authentication
Implements user registration, login, password hashing with bcrypt, and token-based authentication with JWT.
04
Order Placement Flow
Allows authenticated users to enter delivery information, submit orders, and store order records in MongoDB.
05
Stripe Test Checkout
Integrates Stripe checkout in test mode to simulate online payment and verify order payment status.
06
Admin Menu Management
Provides an admin interface to add new food items, upload food images, view the menu list, and remove items.
07
Admin Order Management
Allows admins to view customer orders and update delivery statuses such as processing, out for delivery, and delivered.
03 / Process
01
May 2025
Planning
Defined the food delivery flow, user authentication needs, cart behavior, order model, admin panel features, and full-stack project structure.
02
May - June 2025
Frontend Development
Built the customer-facing React interface, including home sections, category browsing, cart page, checkout form, login popup, and order history.
03
June - July 2025
Backend Development
Created the Express and MongoDB backend with user, food, cart, and order routes, controllers, models, and JWT authentication middleware.
04
July 2025
Admin Panel
Built a separate admin interface for adding food items, uploading images, viewing menu records, and updating order statuses.
05
July 2025
Deployment & Demo Setup
Configured environment variables, connected the app to a MongoDB-backed demo database, deployed the project on Render, and prepared it for portfolio presentation.
04 / Tech Stack
React
JavaScript
Vite
CSS
React Router
Axios
Node.js
Express
MongoDB
Mongoose
JWT Auth
bcrypt
Stripe
Multer
Render
Git
05 / Results
🛒
Cart
Ordering Flow
📊
Admin
Management Panel
💳
Stripe
Test Checkout
🚀
Live
Render Deploy
© 2026 Hyosang Han's Portfolio. All rights reserved.