Little Lemon Web App

Introduction

Welcome to Little Lemon, a React-based web application developed as a capstone project for the Front-End Developer Certificate program. This project showcases the culmination of various skills and technologies learned throughout the program, focusing on building a functional and user-friendly restaurant booking system.

Project Description

Little Lemon is a web application designed for a fictional restaurant, providing a seamless and interactive user experience for booking tables. The app consists of three main components: a Home page, a Booking form, and a Reservations page. Each component is crafted with careful attention to UX/UI design principles, ensuring an intuitive and visually appealing interface.

Features

• Home Page: A welcoming interface introducing users to Little Lemon, complete with essential information about the restaurant.
• Booking Form: A user-friendly form allowing customers to book tables at the restaurant. The form includes client-side validation to ensure accurate data entry and prevent double bookings.
• Reservations Page: A dedicated page displaying existing reservations, providing users with a clear view of their bookings.
• Form Validations: Implemented to enhance data accuracy and user experience by preventing erroneous inputs.
• Unit Testing: Ensuring the app's reliability and functionality through rigorous unit tests.
• Responsive Design: Designed with a mobile-first approach, ensuring optimal performance across various devices and screen sizes.

Technologies Used

• React: For building the dynamic user interface.
• Figma: For designing the UI/UX components and creating wireframes.
• CSS Grid: For creating a flexible and responsive layout.
• Semantic HTML: For structuring the app's content meaningfully.
• Git & GitHub: For version control and project management.
• API Integration: For handling booking data and ensuring persistent information.
• Unit Testing: For maintaining code quality and functionality.

Development Process

• Setup and Planning: Setting up the development environment, tracking the project with Git, and designing the UI in Figma.
• HTML & CSS: Establishing the app's HTML structure and styling using reusable CSS components.
• Component Development: Building React components for the home page, booking form, and reservations page.
• Functionality Implementation: Coding the booking system, managing state, and integrating APIs for data handling.
• Testing and Refinement: Adding unit tests, refining the UI/UX based on feedback, and ensuring accessibility.

Conclusion

Little Lemon is a testament to the practical application of front-end development skills acquired during the certificate program. It serves as a job-ready portfolio piece, demonstrating proficiency in React, UX/UI design, and web development best practices. This project not only highlights technical abilities but also reflects a commitment to delivering high-quality and user-centric web applications.

Prerequisites

Before running the Little Lemon web app, make sure you have the following installed on your machine:

• Node.js
• npm (Node Package Manager)
• Git

Installation

To run the Little Lemon web app, follow these steps:

1. Open your terminal or command prompt.
2. Navigate to the directory where you want to clone the project.
3. Run the following command to clone the project from your GitHub account:

   git clone https://github.com/emreaygener/LittleLemonReactApp.git
   

Running the App

Once the project is cloned, navigate to the project directory in your terminal or command prompt. Then, follow these steps:

1. Install the project dependencies by running the following command:

   npm install
   

2. Start the development server by running the following command:

   npm start
   

3. Open your web browser and visit http://localhost:3000 to view the Little Lemon web app.

Contributing

If you would like to contribute to the Little Lemon web app, please follow these guidelines:

1. Fork the project repository on GitHub.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit them to your branch.
4. Push your branch to your forked repository.
5. Open a pull request to the original repository.

License

This project is licensed under the Mozilla Public License Version 2.0. See the LICENSE file for more information.