Before running the project, please type the following code in terminal: npm i react-scripts --save-dev
This project was bootstrapped with Create React App.
Little Lemon is a fictional restaraurant that wants to integrate their business into the online platform. Currently, Little Lemon website is only able to show website's background and do a mockup of reserving a table.
This final project includes everything we learnt in the Front End Developer career path by META. That includes learning HTML/CSS, the React framework, testing, creating a UI/UX and others.
For this FinPro, I started by creating a UI/UX for Little Lemon's website and also the reserving tab. While the Little Lemon's style guide have been provided, we were still given the freedom to style it after a UI/UX research (user persona & user journey).
After being done with the Hi-Fi, I start to create the components and merging the local styles from Figma to React. I start by doing the mainpage then continued with the /book
route where we can reserve a table.
For the /book
route, in the table reservation, we had to implement a time checker provided with the date of reservation using useContext which would call a mock-up API to search for the possible time. You could check the implementation in /src/Booking.tsx
.
- React
- Typescript
- React-router
- React-collapse
- Jest