Welcome to the Little Lemon Restaurant Online Table Reservation and Online Food Order Web App. This project serves as the capstone project for the Meta Front End Development course and has been developed using cutting-edge technologies including React, Redux Toolkit, React-Router-DOM, and Browser Local Storage API. This README file provides an overview of the project, its features, how to deploy and use it, and instructions for running the project locally.
The Little Lemon Restaurant Online Reservation System is a comprehensive web application that offers a seamless experience for users who wish to make restaurant reservations and order food online. Whether you want to secure a table for an upcoming dining experience or enjoy our delicious cuisine from the comfort of your own home, this web app has you covered.
-
Home: This page serves as the landing page and includes essential sections such as a Navbar, Hero section, Menu section, Testimonial section, About Section, and Footer Section.
-
About: This page provides detailed information about the Little Lemon Restaurant, offering insights into its history, mission, and vision.
-
Menu: Here, users can explore the restaurant's extensive menu, view all food items, and have the option to add items to their cart and adjust quantities.
-
Reservation: This page allows users to conveniently book a table online before visiting the restaurant. Users can select their preferred date, party size, and available reservation times.
-
Order Online: On this page, users can access their cart and place orders for food items online. Additionally, they can view their previous order history, including billing and product details.
-
Login: This page provides user authentication functionality, enabling users to sign in or sign up for an account.
- View restaurant information, including an overview, special menu items, and customer testimonials.
- Check available reservation times based on selected date and party size.
- Make reservations by selecting desired time slots and providing contact information.
- Elegant and user-friendly UI design.
- Responsive design ensuring optimal viewing on various devices.
- Installable on any device as PWA (Progressive Web App) and give experience as a native application whether it is Android, iOS or Windows operating system.
This project leverages several technologies to deliver its functionality and aesthetics:
- React: A JavaScript front-end library that facilitates the creation of interactive user interfaces.
- React Hooks: Used to manage component-level state and handle user interactions efficiently.
- CSS: Employed for styling the web pages, ensuring a visually appealing user experience.
- Redux Toolkit: Utilized for state management within the web app, allowing for seamless data handling and updates.
- React-Router-DOM: Provides routing and navigation capabilities, enabling smooth transitions between different sections of the app.
- Browser-Local-Storage: Utilized for persistent data storage, ensuring a seamless user experience.
- Geocoding API: Free api for converting latitude and longitude into physical address and vice-versa, this Api is used with browser geolocation to get user actual address.
- Service Worker Used features of service workers to make the web app a PWA (Progressive web app) make it installable on any device and OS and provide offline capability.
You can access the live web app using the following links:
- Live Web App: Little Lemon Restaurant Online
Feel free to explore the project, provide feedback, and enjoy the Little Lemon Restaurant experience online!
You can watch featues and uses in this slide shows
Little Lemon snaphots slide shows 👆
If you'd like to run this project locally on your own device, follow these steps:
- Clone the repository to your local machine:
git clone https://github.com/abhisheksharma1310/little-lemon.git- Navigate to the project directory:
cd little-lemon- Install the project dependencies using a package manager of your choice (e.g., npm or yarn):
npm install
# or
yarn install- Once the installation is complete, you can start the development server:
npm start
# or
yarn start- The application should now be running locally. Open your web browser and navigate to
http://localhost:3000to access the Little Lemon Restaurant Online Reservation System.
Enjoy exploring and testing the project on your local machine!