A modern, full-stack food delivery application built with the MERN Stack (MongoDB, Express, React, Node.js). Features a beautiful UI, smooth animations, user authentication, and a comprehensive admin dashboard.
- 🎨 Modern UI/UX:
- Glassmorphism design & responsive layout.
- AOS Animations for smooth scroll reveals.
- Interactive "Chef's Suggestions" section.
- 🔐 Authentication:
- Semantic and secure login via Clerk.
- Protected Admin routes.
- 🛒 Shopping Cart:
- Application-wide state management for cart operations.
- Real-time price calculation.
- 👨🍳 Admin Dashboard:
- CRUD Operations: Add, Edit, and Delete food items.
- Real-time updates with optimistic UI.
- Image URL support.
- ⚡ Performance:
- Optimized with Vite.
- Lazy loading & component code splitting.
Frontend:
React (Vite)
Vanilla CSS (Variables & Animations)
Clerk Auth
AOS Library
Backend:
Node.js
Express.js
MongoDB
| Home Page | Admin Dashboard |
|---|---|
| Smooth Animations & Hero | Manage Menu Items |
| Food Menu | Login Modal |
|---|---|
(Tip: Upload your screenshots to an assets folder or paste them into a GitHub issue to get a URL, then replace these links!)
- Node.js installed
- MongoDB Atlas account (for DB URI)
- Clerk account (for Auth Keys)
-
Clone the repo
git clone https://github.com/bandarupavankumar/Restaurant-Website.git cd Restaurant-Website -
Setup Backend
cd backend npm install # Create a .env file in /backend # MONGO_URI=your_mongodb_connection_string npm start
-
Setup Frontend
# Open a new terminal root npm install # Create a .env file in root # VITE_CLERK_PUBLISHABLE_KEY=your_clerk_key # VITE_API_URL=http://localhost:5000 npm run dev
- Connect repo to Vercel.
- Set Environment Variables:
VITE_API_URL: Your Render Backend URL.VITE_CLERK_PUBLISHABLE_KEY: Your Clerk Key.
- Connect repo to Render.
- Root Directory:
backend. - Build Command:
npm install. - Start Command:
node server.js. - Env Var:
MONGO_URI.
Made with ❤️ by Pavan Kumar