Live site: Masuk's Kitchen
Welcome to Masuk's Kitchen Restaurant, a modern and feature-rich restaurant website developed using HTML5, CSS3 with Tailwind, JavaScript with React.js, Node.js with Express.js, and MongoDB for the database. This project also leverages Firebase for authentication and hosting, as well as Vercel for server-side deployment.
- Features
- Technologies Used
- Getting Started
- Installation
- Usage
- Authentication
- React Libraries
- Site Structure
- Admin Dashboard
- User Dashboard
- Deployment
- Contributing
- License
- Navigation bar with Home page, Menu page, Order page, contact us, and login.
- Home page with a banner, chef says, featured and popular items, review slider, and additional information.
- Two login methods: email/password and Google Sign-In.
- Separate dashboards for customers and administrators.
- Admin dashboard includes sections for Admin Home, Add item, Manage Item, Manage orders, Manage bookings, and user management.
- Customer dashboard includes sections for User Home, Table Reservations, Order Summary, Add Review and booking management.
- HTML5
- CSS3 with Tailwind
- JavaScript with React.js
- Node.js with Express.js
- MongoDB
- Firebase (Authentication and Hosting)
- Json Web Token(Securing API at server site)
- Vercel (Server-side Deployment)
- Tanstack Query
- React Swiper
- Axios
- Stripe (Payment Gateway)
To get started with Masuk's Kitchen Restaurant, follow the steps below:
- Clone the repository:
git clone https://github.com/MasukBD/Masuks-Kitchen-Restaurant.git - Change into the project directory:
cd Masuks-Kitchen-Restaurant - Install All dependencies with(Check Package-look.json):
npm install
To run the development server, use the following command ```bash npm run dev
This will start the server, and you can view the website at localhost
Masuk's Kitchen Restaurant uses Firebase for authentication. Users can log in using their email and password or via Google Sign-In.
- Tanstack Query: Used for data fetching and management.
- React Swiper: Enables the implementation of a responsive image slider.
- Axios: Used for making HTTP requests.
- Stripe: Integrated for payment gateway functionality.
- Navbar: Includes links to the Home page, Menu page, Order page, Contact us, and Login.
- Home Page: Contains a banner, chef says, featured and popular items, review slider, and additional information.
- Menu Page: Displays different food categories for browsing. Users can go to the Order page from the Menu page.
- Cart Page: Accessible if logged in. Users can delete items from the cart or proceed to payment.
- Order Page: Accessible from both the Menu page and the Navbar.
- Contact Page: A page where users can get in touch with the restaurant.
- Login Page: Redirects to login when attempting to add an item to the cart without being logged in.
- Dashboard Page: Accessible from the profile photo for large devices, or in the same column as logout for small devices.
- Payment Page: Offers multiple payment method options.
- Order Summary Page: Displays details of the order, transaction ID, and previous orders after successful payment.
The admin dashboard provides the following functionalities:
- Home: Overview of the restaurant's performance.
- Add Item: Add new menu items to the website.
- Manage Item: Edit and update existing menu items.
- Manage Order: View and process customer orders.
- Manage Bookings: Handle reservation requests.
- All Users: View and manage user accounts.
The user dashboard provides the following functionalities:
- Home: Personalized content and recommendations.
- Table Reservations: Make reservations for dining.
- Order summary: View past orders.
- Add Review: Can able post Review based on past orders.
- My Bookings: Manage reservation history and details.
The website is deployed using Firebase for hosting and Vercel for server-side deployment.
Contributions are welcome! Please follow the contribution guidelines.
This project is licensed under the MIT License.