Dine restaurant website

Table of Contents

• Overview
• Screenshot
• Built with
• Install (How it works)
• The Project Structure
• Author

Overview

This is a solution to the Dine restaurant website. The purpose is to improve my coding skills by building realistic projects.

Screenshot

Home Page

Booking Page

⚙ Built with

This project was bootstrapped with Create React App

Dependencies

• React js
• React Router
• Typescript
• Tailwind css
• Prettier

Install

How it works

Clone the project or download ZIP

git clone https://github.com/Bayoumi-dev/Dine-restaurant-website.git

You must install Node js on the local machine, then install the dependencies used in this project. Run the command in the root

npm install

Start the development server with:

npm start

The Project Structure

├── .gitignore
├── .prettierignore
├── package-lock.json
├── package.json
├── postcss.config.js
├── prettier.config.js
├── README.md
├── tailwind.config.js
├── tsconfig.json
├── .vscode
├── design
└── src     
    ├── assets
    ├── components
    │   ├── eventslist
    │   │   ├── EventContent.tsx
    │   │   ├── EventImage.tsx
    │   │   ├── EventsList.tsx
    │   │   └── EventsSection.tsx
    │   ├── features
    │   │   ├── Feature.tsx
    │   │   ├── Features.tsx
    │   │   └── FeaturesSection.tsx
    │   ├── forms
    │   │   ├── DateFields.tsx
    │   │   ├── Field.tsx
    │   │   ├── Form.tsx
    │   │   ├── PeopleField.tsx
    │   │   └── TimeFields.tsx
    │   ├── highlights
    │   │   ├── HighlightItem.tsx
    │   │   ├── HighlightItems.tsx
    │   │   └── HighlightSection.tsx
    │   ├── reservations
    │   │   ├── ReservationForm.tsx
    │   │   ├── ReservationHeading.tsx
    │   │   ├── ReservationSection.tsx
    │   │   └── ReservedMessage.tsx
    │   ├── Buttons.tsx
    │   ├── CtaSection.tsx
    │   ├── HeroSection.tsx
    │   └── Parallax.tsx
    ├── helpers
    │   ├── animation.ts
    │   ├── listBoxBehavior.ts
    │   └── validation.ts
    ├── interfaces
    │   └── index.interface.ts
    ├── layout
    │   ├── Footer.tsx
    │   ├── Header.tsx
    │   ├── index.tsx
    │   └── ScrollButton.tsx
    ├── pages
    │   ├── Booking.tsx
    │   └── Home.tsx
    ├── types
    │   └── index.d.ts
    ├── utils
    │   ├── svg
    │   │   └──index.tsx
    │   └── _DATA.ts
    ├── App.tsx
    ├── index.css
    └── index.tsx

Author

• Website - bayoumi.dev