Restaurant project - frontend

This is an SPA website for booking a table in an imagined vegan restanrant, using React as frontend and Node.js as backend. Foodies can simply browse the menu without login and they need to register as members if they want to make a reservation. On the other hand, admin can manage not only bookings from the customers but also content of the menu.

If you are interested in how I build backend, please check here

Demo

Demo.

You may use the admin's login. Username: admin, password: admin12345678.

‼️ I would be really appreciate if you just delete the picture you uploaded when you want to edit menu. This is due to the fact that I need those already-exist pictures to be displayed in the menu page. Thank you in advance. 😃

Or simply create a new account by registration.

About this project

This project is inspired by one of my assignment when I was learning in a coding mentorship programme with Lidemy. That is a simple homepage of an imagined restaurant where only HTML and CSS are used. Having been learning React and Node.js, I decide to create a SPA website where customers can make reservation without spending time to call restaurants. On the other hand, restaurant owners can save time to look for the availability when customers phone in, meaning they will have more time to be creative in their cuisine.

Fatures

• Customers can
  • browse menu
  • register, login and logout
  • check availability of a specific time and date
  • make reservation accordingly
  • pay table reservation fee once the reservation is made
  • manage their email
• Restaurant owners
  • also have the above features
  • can edit or delete existing bookings
  • can create, edit and delete items in the menu

Technology used

• Create React APP // Creating a React app and its environment
• React hooks // Management of UI components
• React Router // Management of router
• React Boostrap // Creating navigation bar with RWD easily
• styled-components // Style with CSS-in-JS components
• react-calendar // An UI component that manage dates for booking a table
• fetch // Communicating with back-end server (Node.js) via API
• LocalStorage // Saving JWT token for authentication
• react-stripe-checkout // Stripe API which manages payment
• swiper // An UI component creating carousel effect for customers' review
• react-router-hash-link // Same-page-navigation that is used when admin is editing the menu
• Heroku // Deployed to heroku

Content

• Customers

• Restaurant owners

Resources

Unsplash

Flaticon

Declaration

This website is only for prectice and learning, not for any business use.

Installing

1. Clone this repository

git clone https://github.com/Pei-wen-code/react_restaurant

2.Install packages

npm install

3.Run this project locally

yarn start