Simplifying Restaurant Discovery and Table Reservations with Modern Web Technologies
A full-stack restaurant discovery and table booking platform built with the MERN stack. Users can discover restaurants, check table availability, and reserve seats, while restaurant owners and admins manage bookings through dedicated dashboards.
Built as a Guided learning project to strengthen React, TypeScript, Express.js, MongoDB, authentication, and REST API development.
- Browse restaurants with search & filters
- View restaurant details and available time slots
- Book and cancel reservations
- Manage bookings from dashboard
- Register and manage restaurants
- Upload restaurant images (Cloudinary)
- View and update booking status
- Approve or reject restaurant listings
- View platform statistics
- Manage restaurants
- JWT Authentication
- Role-Based Access Control (User, Owner, Admin)
- Password hashing with bcrypt
- React 19
- TypeScript
- Vite
- Tailwind CSS
- React Router
- Axios
- Node.js
- Express.js
- MongoDB + Mongoose
- JWT
- bcrypt
- Multer
- Cloudinary
git clone https://github.com/MrSamarjitBanerjee/QuickDine.git
cd QuickDinecd server
npm installCreate .env using server/.env.example
npm run seed # Optional
npm run devcd ../client
npm installCreate .env using client/.env.example
npm run dev| Role | Password | |
|---|---|---|
| Admin | admin@example.com | admin123 |
| Owner | owner@example.com | owner123 |
| User | user@example.com | user123 |
- React Context API
- REST APIs
- JWT Authentication
- Role-Based Authorization
- CRUD Operations
- MongoDB Relationships
- File Uploads
- Cloudinary Integration
Although this project was built by following a guided tutorial, I implemented, explored, and understood the complete development workflow of a modern full-stack application. It helped me strengthen both frontend and backend fundamentals while gaining hands-on experience with real-world development practices.
Learned how to break a large application into reusable, maintainable components. Instead of writing everything in one file, features were separated into pages, layouts, and reusable UI components to improve readability and scalability.
Used useState for managing component state, useEffect for handling side effects such as API requests, and useContext to manage authentication and global application state without prop drilling.
Implemented a centralized AppContext to manage user authentication, JWT token, login modal state, and shared application data, eliminating unnecessary prop passing between components.
Built a multi-page Single Page Application (SPA) using React Router. Learned nested routing, dynamic routes, protected routes, navigation, and role-based access control for different dashboards.
Connected the frontend with backend REST APIs using Axios. Learned request handling, error handling, authorization headers, reusable API clients, and asynchronous data fetching.
Implemented controlled forms for authentication, restaurant registration, and bookings while learning validation, user input handling, and state synchronization.
Used conditional rendering extensively to display different UI based on authentication status, loading states, booking status, and user roles.
Learned how TypeScript improves React development through static typing, interface definitions, type safety, and better developer experience.
Built responsive user interfaces using utility-first styling. Learned responsive layouts, Flexbox, Grid, spacing, reusable styling patterns, and component-based design.
Learned how to design RESTful APIs with clear resource-based endpoints using appropriate HTTP methods (GET, POST, PUT, DELETE) while separating business logic from routing.
Structured the backend using a modular architecture consisting of Routes, Controllers, Models, Configurations, and Middleware, making the codebase easier to maintain and extend.
Learned document-based database design, schema creation, model relationships, CRUD operations, validation, and querying data using Mongoose.
Implemented secure user authentication using JWT and bcrypt. Learned token generation, password hashing, protected routes, and role-based authorization for User, Owner, and Admin.
Developed an understanding of Express middleware for authentication, authorization, request parsing, file uploads, rate limiting, and centralized request processing.
Applied backend security practices including password hashing, CORS configuration, environment variables, rate limiting, and production configuration validation.
Integrated Multer with Cloudinary to upload, process, and store restaurant images while understanding multipart form data handling.
Implemented centralized error handling middleware to return consistent API responses while separating application errors from business logic.
Learned to manage sensitive credentials using environment variables and validate required configuration before starting the server.
Created and executed seed scripts to populate the database with demo users and restaurants, simplifying local development and testing.
Deployed the React application on Vercel, learning how to configure build settings, manage environment variables, and connect the frontend to a production backend through environment-based API URLs.
Deployed the Express.js API on Render, configuring environment variables, connecting to MongoDB Atlas, handling production builds, and exposing REST APIs for the frontend.
Learned to separate development and production environments using .env files and environment variables while ensuring sensitive credentials such as JWT secrets and database URLs remain outside version control.
Practiced version control using Git by managing commits, maintaining a clean repository with .gitignore, and publishing the project on GitHub following industry-standard workflows.
Gained a clear understanding of how a deployed React frontend communicates with a deployed Express backend through REST APIs, including handling CORS, authentication, environment-based configuration, and end-to-end request flow.
- Implemented Role-Based Access Control (RBAC) for
user,owner, andadminroles. - Restricted public registration to normal users only; the Owner/Manager signup option was removed from the production UI.
- New registrations are assigned the
userrole by default, preventing users from assigning themselves privileged roles. - Protected owner and admin functionality through role-based authorization and protected routes.
- Admin and owner accounts are provisioned separately rather than through public signup.
This project was built for learning purposes.