✦ 👑 Royal Cravings Banglo (RCB) 👑 ✦

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

✨ A Premium Food Ordering Web Experience ✨

A sleek, fully-featured food ordering web app with Firebase backend, 4-step checkout, PDF receipts, custom toast notifications, and a premium UI — built entirely with vanilla HTML, CSS, and JavaScript. Zero frameworks. Zero build tools. Pure golden code. 👑

---

🚀 Live Demo

Experience the app now 👉 royal-cravings-banglo.vercel.app

---

✨ Features at a Glance

🛒 Dynamic Cart Add items, adjust quantities, real-time totals, slide-out removal 🔐 Firebase Auth Email/password + Google OAuth with session persistence 🔍 Search & Filters Live search bar + category filter buttons (Burgers, Pizza, Chicken, Pasta, Snacks) 💳 4-Step Checkout Summary → Delivery → Payment → Success wizard

📄 PDF Receipts Branded order receipts via jsPDF — download, email, or WhatsApp 🔔 Custom Toasts Branded popups with product images, progress bars, and 3 styles ⚠️ Confirm Dialogs Custom blur-backed confirmation before deleting cart items 📱 Fully Responsive Mobile-first design, works on all screen sizes

---

🎬 How It Works

1️⃣ Browse Menu

→

2️⃣ Add to Cart

→

3️⃣ Checkout

→

4️⃣ Pay

→

5️⃣ Get Receipt 👑

---

⚙️ Tech Stack

Layer	Technology	Purpose
Markup	HTML5	Semantic page structure
Styling	CSS3	Flexbox, Custom Properties, Animations
Logic	Vanilla JavaScript (ES6+)	Cart, Auth, Checkout, Payments
Backend	Firebase	Firestore DB + Firebase Authentication
Receipts	jsPDF 2.5.1	Client-side PDF generation
Carousel	Swiper.js v12	Customer reviews carousel
Icons	Font Awesome 6.7.2	UI icons throughout the app

💡 No package.json, no node_modules, no build tools — all libraries loaded via CDN.

---

📂 Project Structure

Royal-Cravings-Banglo/ │ ├── index.html # Main page (menu, cart, auth, orders) ├── checkout.html # 4-step checkout wizard ├── products.json # Product catalog (8 items) ├── LICENSE # MIT License │ ├── css/ │ ├── style.css # Main styles (1100+ lines) │ └── checkout.css # Checkout page styles │ ├── js/ │ ├── config.js # Firebase + Razorpay credentials │ ├── firebase-config.js # Firebase auto-init + fallback │ ├── main.js # Cart, products, toasts, confirms │ ├── auth.js # Authentication (Firebase + local) │ ├── checkout.js # Checkout flow + PDF + email │ ├── orders.js # Order history management │ ├── search.js # Search & category filters │ └── seed.js # Firestore product seeder │ └── images/ ├── logo.png, icon.png ├── food items (8 products) └── UI illustrations

---

✨ Features In Detail

🛒 Smart Cart System One-click add-to-cart with custom toast notification showing product image + price Duplicate prevention — shows "Already in Cart" warning toast +/- quantity controls with real-time price recalculation Custom confirm dialog with product image before removing items Slide-out animation on removal with "Removed" toast Cart badge counter updates in real-time 🔍 Search & Category Filters Live search — instant filtering as you type Category buttons: All | Burgers | Pizza | Chicken | Pasta | Snacks Combined search + filter for precise results 🔐 Authentication Firebase Authentication: Email/password sign-in & sign-up Google OAuth: One-click Google sign-in Smart fallback: localStorage-based auth when Firebase is unconfigured Session persistence across page reloads User avatar + dropdown menu with sign-out and order history 💳 4-Step Checkout Wizard Step What Happens 1. Order Summary Review cart items, subtotal, delivery fee (₹40), 5% tax, grand total 2. Delivery Details Name, phone, email, full address, city, pincode, delivery instructions 3. Payment Demo card form with auto-format (card number spaces, MM/YY) 4. Success Order confirmed! Download PDF receipt, email it, or share via WhatsApp Progress bar at top showing current step Back/Next navigation between steps Form validation at each step before proceeding Loading spinner during payment processing 🔔 Custom Toast Notifications Style When Color Success Item added to cart Green gradient Warning Duplicate item / empty cart Orange gradient Delete Item removed from cart Red gradient Auto-dismiss after 3 seconds with animated progress bar Only one toast visible at a time (new replaces old) Manual close button with product image thumbnail ⚠️ Custom Confirm Dialog Blurred backdrop overlay Shows product image and name "Are you sure?" message Two buttons: Keep It (grey) / Delete (red gradient) Click outside to cancel 📄 PDF Receipt Generation Branded receipt with RCB logo header Order ID, date, payment method Full item list with quantities and prices Subtotal, delivery fee, tax breakdown, grand total Delivery address and contact info Download as PDF file 📊 Order Management Slide-in order history panel from the right Orders saved to Firestore (or localStorage as fallback) Sorted by date (newest first) Order status badges: Placed | Preparing | Delivered 📱 Fully Responsive Design Mobile breakpoint at 780px Hamburger navigation on mobile All sections adapt: hero, services, menu, reviews, checkout Toasts and dialogs are mobile-optimized

---

⚙️ Configuration

🔥 Firebase Setup Edit js/config.js with your Firebase credentials: const FIREBASE_CONFIG = { apiKey: "YOUR_API_KEY", authDomain: "your-project.firebaseapp.com", projectId: "your-project-id", storageBucket: "your-project.appspot.com", messagingSenderId: "your-sender-id", appId: "your-app-id", measurementId: "G-XXXXXXXXXX" }; 💳 Razorpay Setup (Optional) Replace the placeholder key in js/config.js: const RAZORPAY_KEY = "rzp_test_XXXXXXXXXXXXXX"; ⚠️ The app works without Razorpay — checkout uses demo payment by default.

---

🚀 Getting Started

📋 Prerequisites A modern web browser (Chrome, Firefox, Edge, Safari) A local web server (required for Firebase Auth — file:// won't work) 📦 Installation # 1. Clone the repository git clone https://github.com/ayushnandi718-dev/FOOD-WEBSITE.git # 2. Navigate to the project cd FOOD-WEBSITE # 3. Start a local server npx serve . # Node.js # or python -m http.server 8000 # Python # or # VS Code: Right-click index.html -> "Open with Live Server" 🌱 Firestore Seeding (Optional) To populate Firestore with the 8 menu items: // Open browser console on index.html and run: seedProducts();

---

📸 Screenshots

---

🧠 What I Built & Learned

✦ Production-style UI components — cart, multi-step forms, modals, toasts, confirm dialogs ✦ Custom notification system — branded toasts with progress bars, product images, and animations ✦ Application state management with vanilla JavaScript (no Redux, no Vue) ✦ Firebase integration — Authentication, Firestore CRUD, graceful fallback ✦ Client-side PDF generation with jsPDF ✦ Responsive layouts using CSS Flexbox and Custom Properties ✦ Graceful degradation — Firebase → localStorage fallback pattern ✦ Modular code architecture without frameworks or build tools

---

🔮 Future Improvements

🏗️ Admin Dashboard — Manage menu items, view all orders 💬 Real-time Order Tracking — Live status updates via Firestore 🔔 Push Notifications — Order status alerts 🌍 Multi-language Support — Hindi, English 🎁 Coupon & Promo System — Discount codes at checkout ⭐ Ratings & Reviews — User-submitted food reviews 🚚 Delivery Partner View — Separate interface for delivery agents 💳 Real Razorpay Integration — Replace demo payment with live gateway

---

📄 License

This project is licensed under the MIT License — see the LICENSE file for details.

Copyright (c) 2026 rva.creates

---

👨‍💻 Author

Ayush Nandi — Full Stack Developer

---

🏆 Portfolio Value This project demonstrates strong frontend fundamentals, ability to build real-world UI systems, clean modular code architecture, and focus on user experience and design. If you found this project helpful or impressive, give it a ⭐ on GitHub!

✦ 👑 ✦ Made with ❤️ by Ayush Nandi 👑 ✦ ✦