Little Lemon Meta Capstone Project

Project in Action

Little Lemon Restaurant

Figma Links

Little Lemon Figma Files Part 1 Little Lemon Figma Files Part 2

Introduction

This demo project was designed and developed for the Capstone Project course of the front-end developer program offered by Meta. This project is based on a scenario involving a fictional restaurant called Little Lemon. Little Lemon has faced difficulties with the reserve-a-table feature on its website. The feature doesn’t exist in the navigation bar and there is no specific button on its homepage to highlight this option. This project involves 3 main features:

1. Landing page
2. Reservation page
3. Navigation bar

Tools & Technologies

For the design and development of this project, these tools and technologies were used:

• Figma (for designing wireframes and prototypes)
• Git & GitHub
• HTML
• CSS
• JavaScript
• React.js (Create-React-App Boilerplate)
• React Router
• React Testing Library
• Jest
• React Icons
• nanoid (Third-Party-Package)
• Browser APIs such as fetch and localStorage

Installation & Run

• To install all dependencies you should run the npm install command in your terminal.

• To run this app, you should run the npm run command in your terminal.

Testing

To test the unit tests that are written run the npm test command. Tests have been written for the reservation form functionality. It's located in src/components/BookingForm.test.js

Notes

• No CSS library or framework has been used. Literally, everything is styled from scratch.

• For state management, I used Context API. No external libraries such as Redux Toolkit have been used.

This is just a demo project for educational purposes. And it's going to be used for the assessment of the capstone project course offered by Meta. In addition, it's going to be presented as one of my portfolio projects that demonstrates my front-end development skills to potential employers.