https://github.com/master369963/little-lemon

css cssmodules form-validation html javascript react responsive-design scss

Last synced: 3 months ago
JSON representation

Host: GitHub
URL: https://github.com/master369963/little-lemon
Owner: Master369963
Created: 2023-02-09T16:32:39.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2024-01-30T17:05:37.000Z (over 2 years ago)
Last Synced: 2025-03-03T07:44:53.765Z (over 1 year ago)
Topics: css, cssmodules, form-validation, html, javascript, react, responsive-design, scss
Language: JavaScript
Homepage: https://littlelemon.agathachiu.com
Size: 25.2 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

README

# Little Lemon Restaurant website

In this project, I built the wireframe and prototype in Figma from the beginning and then created a responsive website with React.

There are mainly 2 pages: the homepage and a functional booking page with form validation.

## Live Demo

[Live Demo Link](https://master369963.github.io/Little-lemon/)

## Project Screen Shot(s)

### Home page

You will be re-directed to the related section when you click menu items in the header.

![image](https://github.com/Master369963/Little-lemon/blob/main/ReadmeAssets/main-1.jpg)

![image](https://github.com/Master369963/Little-lemon/blob/main/ReadmeAssets/main-2.jpg)

---

### Reservation page

Select date, time and guest's number to make a reservation.

![image](https://github.com/Master369963/Little-lemon/blob/main/ReadmeAssets/reservation-page.jpg)

Booking form with the validation.
Confirm button is available only when the required areas are filled.

![image](https://github.com/Master369963/Little-lemon/raw/main/ReadmeAssets/booking-validation.jpg)

Booking success page

![image](https://github.com/Master369963/Little-lemon/raw/main/ReadmeAssets/booking-success.jpg)

## Technologies

- React
- React Router
- CSS Modules
- SASS/SCSS
- Swiper
- Formik
- Yup

## Installation

- Clone the repository
- Run `npm install`
- Run `npm start`