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

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

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

Last synced: 6 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/master369963/little-lemon
• Owner: Master369963
• Created: 2023-02-09T16:32:39.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-30T17:05:37.000Z (10 months ago)
• Last Synced: 2024-10-18T20:55:05.924Z (about 1 month 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

Awesome Lists containing this project

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`