https://github.com/willie-conway/meta-frontend-capstone-project
🌟 Welcome to the 🍽️Little Lemon Reservation System! This modern 🌐web application enhances the reservation experience for the 🍋 Little Lemon restaurant, making it 👥user-friendly and responsive.
https://github.com/willie-conway/meta-frontend-capstone-project
accessibility component-based-architecture cross-browser-compatibility css dynamic-rendering form-validation front-end-development html javascript mobile-friendly react reservation-system responsive-design restful-api semantic-html single-page-application state-management user-experience user-interface web-development
Last synced: 3 months ago
JSON representation
🌟 Welcome to the 🍽️Little Lemon Reservation System! This modern 🌐web application enhances the reservation experience for the 🍋 Little Lemon restaurant, making it 👥user-friendly and responsive.
- Host: GitHub
- URL: https://github.com/willie-conway/meta-frontend-capstone-project
- Owner: Willie-Conway
- License: mit
- Created: 2024-08-04T19:29:12.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-23T01:16:25.000Z (4 months ago)
- Last Synced: 2025-06-23T02:27:48.544Z (4 months ago)
- Topics: accessibility, component-based-architecture, cross-browser-compatibility, css, dynamic-rendering, form-validation, front-end-development, html, javascript, mobile-friendly, react, reservation-system, responsive-design, restful-api, semantic-html, single-page-application, state-management, user-experience, user-interface, web-development
- Language: JavaScript
- Homepage:
- Size: 33.6 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Little Lemon Reservation System
## 📖 Table of Contents
- [Project Overview](#project-overview)
- [Project Scenario](#project-scenario)
- [Screens and Features](#screens-and-features)
- [SCREEN 1: Home Screen](#screen-1-home-screen)
- [SCREEN 2: Reservation Page](#screen-2-reservation-page)
- [SCREEN 3: Reservation Profile Page](#screen-3-reservation-profile-page)
- [SCREEN 4: Confirmation Message](#screen-4-confirmation-message)
- [Tech Stack](#tech-stack)
- [Installation](#installation)
- [Usage](#usage)
- [Conclusion](#conclusion)
- [License](#license)
- [Acknowledgements](#acknowledgements)
## Project Overview📁
Welcome to the **🍽️Little Lemon Reservation System**! 🎉 This project is a modern, responsive web application designed to enhance the table reservation experience for the 🍋Little Lemon restaurant. The goal is to improve user interaction and satisfaction by addressing the negative feedback regarding the previous 📰reservation functionality.
.png)
.png)
.png)
## Project Scenario📁
The owners of 🍋Little Lemon received feedback that users found the table reservation process confusing and unsatisfactory. As a `front-end developer`, your task was to create a user-friendly interface that simplifies the reservation process while maintaining the restaurant's brand identity.
## Screens and Features
### SCREEN 1: Home Screen
This screen is the starting point for users to make a reservation. It includes:
- Input fields for:
- 📅 `Date`
- ⏰ `Time`
- 🍽️ `Number of guests`
- 🎉 `Occasion`
- A **"`Reserve a Table`"** button that links to the reservation page.
- Consistent branding with the **🍋Little Lemon restaurant** style guide.
### SCREEN 2: Reservation Page
.png)
This page captures essential customer details:
- Input fields for:
- 👤 `First` and `last` name
- 📞 `Contact information` (phone or email)
- Required fields are clearly indicated.
- A **"`Submit`"** button to confirm the 📰reservation.
- Optional confirmation selection.
### SCREEN 3: Reservation Profile Page
.png)
If the user misses any required fields, relevant warnings ⚠️ are displayed to guide them in completing the form.
### SCREEN 4: Confirmation Message
.png)
Once the reservation form is successfully submitted, users receive a confirmation message 🎊 that their reservation has been recorded.
## ⚙️Tech Stack
- 🌐 **`HTML`**:
HTML (HyperText Markup Language) was used to structure the content of the web application. It provides the foundational elements such as headings, paragraphs, input fields, buttons, and links. The semantic structure ensures that the content is accessible and organized, making it easier for users to navigate.
- 🎨 **`CSS`**:
CSS (Cascading Style Sheets) was employed to style the application, allowing for the design of visually appealing layouts and elements. It was used to apply colors, fonts, spacing, and other visual properties, ensuring that the application aligns with the Little Lemon brand identity. Responsive design techniques, such as media queries, were also implemented to adapt the layout to different screen sizes.
- 📜 **`JavaScript`**:
JavaScript provided the interactivity needed for a dynamic user experience. It was used to handle form submissions, validate user input, and provide real-time feedback (such as error messages for missing fields). JavaScript also enabled seamless transitions between different screens within the application, enhancing user engagement.
- ⚛️ **`React`**:
React is a JavaScript library used for building user interfaces. In this project, it facilitated the creation of reusable components, such as forms and buttons, promoting a modular approach to development. React's state management capabilities allowed for efficient handling of user input and dynamic rendering of components, improving the overall responsiveness of the application.
- 📱 **`Responsive Web Design`**:
Responsive web design principles were applied to ensure that the application functions well on various devices, including desktops, tablets, and mobile phones. By using flexible layouts, fluid grids, and media queries, the application maintains usability and aesthetics across different screen sizes, making it accessible to a broader audience.
Summary
## Installation🔃
To run this project locally, follow these steps:
1. **Clone the repository:**
```bash
git clone https://github.com/Willie-Conway/Meta-Frontend-Capstone-Project.git
```
2. **Navigate to the project directory:**
```bash
cd little-lemon
```
3. **Install dependencies:**
```bash
npm install # If using Node.js
```
4. **Start the application:**
```bash
npm start # If using Node.js
```
5. **Open your browser and go to `http://localhost:3000` (or the port specified in your project).**
## 👨🏿💻Usage
- Navigate through the application to make a reservation.
- Ensure that all required fields are filled to avoid warnings.
- Confirm your reservation to receive a confirmation message.
## Conclusion
Congratulations on completing the 🍽️Little Lemon Reservation System! This project showcases your skills in building a modern `front-end` application, incorporating user feedback, and adhering to design principles.
## License📄
This project is licensed under the [MIT License](LICENSE). See the LICENSE file for details.
## Acknowledgements
🙏🏿Thanks to the Meta team for the guidance throughout this capstone project.
Special thanks to 🍋Little Lemon for providing the project scenario.