Project Overview Developed Foodi, a high-performance, enterprise-grade full-stack food delivery ecosystem designed to deliver a seamless, modern dining experience from kitchen to doorstep. Unlike typical static frontend prototypes, this is a complete production-ready MERN (MongoDB, Express, React, Node.js) application. The platform features a highly responsive, mobile-first customer storefront, a secure transactional pipeline integrated with Stripe, dual-layer authentication (Firebase + custom JWT), and a dedicated, role-based administrative dashboard for real-time order lifecycle governance and business analytics.

Key Features & Technical Implementation Dual-Layer Authentication: Integrated Firebase Authentication for quick identity verification, paired with a custom server-side JWT (JSON Web Token) exchange mechanism to secure all private API endpoints. Dynamic Catalog & State Management: Utilized React 18 and TanStack Query (React Query) for smart client-state fetching, background synchronization, and automatic caching of menu items and cart states, reducing database load. Secure Payment Pipeline: Integrated Stripe Checkout API using the Stripe Payment Intents model, ensuring safe, PCI-compliant card processing with automatic backend transaction validation and database persistence. Real-Time Order Tracking: Implemented a state-driven interactive timeline tracking the entire lifecycle of an order (Pending → Cooking → On the Way → Delivered) with dynamic UI updates. Role-Based Admin Control Panel: Built a comprehensive dashboard featuring secure route guards, custom menu CRUD operations (with remote image hosting via ImgBB), real-time booking status managers, and user role administration.

Technologies Used Frontend Stack: React 18 (Vite), React Router v6, TanStack Query (React Query), Axios Backend & Database: Node.js, Express.js, MongoDB Atlas, Mongoose ODM Authentication & Security: Firebase Auth, Custom JWT Middleware Payment Integration: Stripe API & SDK Styling & UI: Tailwind CSS, DaisyUI, React-Slick, SweetAlert2, React Toastify Deployment & Hosting: Vercel (Monorepo configuration with /api/* rewrites)

Outcome Delivered a secure, pixel-perfect, and fully functional MERN application featuring optimized rendering times and immediate cart state feedback. The deployment of a unified monorepo on Vercel guarantees clean routing and high scalability, resulting in a premium digital storefront that is fully ready to handle real-world commercial operations.