Skip to content

Latest commit

 

History

History
28 lines (19 loc) · 1.65 KB

README.md

File metadata and controls

28 lines (19 loc) · 1.65 KB

META Front End Developer Capstone Final Project

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.

Background

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.

Process

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.

Technology Used

  1. React
  2. Typescript
  3. React-router
  4. React-collapse
  5. Jest

Links

Certificate: Coursera Figma file: Figma