GURUPRASAD - RESTAURANT MENU APP

Pandemic and the nationwide lock-down have affected the restaurant industry badly. Most of the restaurants shut down during the pandemic. I was inspired by my uncle’s hardship during the lock-down with his restaurant in India. This app is for my uncle to show how he can make use of technology and increase his businesses revenue.

Table of Contents

• User Story
• Future Development
• Demo
• Tools & Technology Used
• Project Structure - Links for files and components
• Wireframe
• Installation
• Acknowledgement
• Resources

User Story

• Customer can view the menu, add the item to the shopping cart, delete items from the cart.
• Customer can contact the restaurant by filling the contact form.
• Customer can view restaurant review.
• Admin can login and logout
• Admin can add, edit the menu item, toggle the status of the item.
• Admin cam search the item according to category name and item name.
• Admin can view and delete the messages from the customers.
• This app is mobile and desktop friendly app.

Future Development

• Adding more test cases.
• Adding order table to database.
• Customer login and logout feature.

Demo

Live Demo Link

Admin page View

Customer page Desktop View

Customer page Mobile View

Tools & Technology Used

• Frontend: React, Chakra UI
• Backend: Node.js, Express.js
• Database: PostgreSQL
• Testing: React Testing Library
• APIs: Google Place API, TheMealDB, Auth0
• Design: Figma, drawSQL

Database Diagram

dbdiagram

Wireframe

• Customer side - Desktop view
• Customer side - Mobile view
• Admin side - Desktop view

Project Structure - Links for files and components

CLICK HERE for Links for files and components

Client

• src/

  • api/
    • adminSideApi.js
    • menuListApi.js
    • thirdPartyApi.js
  • components/
    • admin/
      • __test__/
        • AdminHome.test.js
        • MenuForm.test.js
        • MenuList.test.js
        • MenuListContainer.test.js
        • MessagePage.test.js
      • AdminHome.js
      • AdminPage.js
      • MenuForm.js
      • MenuList.js
      • MenuListContainer.js
      • MessagesPage.js
    • customer/
      • __test__/
        • ContactForm.test.js
        • ContactPage.test.js
        • Home.test.js
        • ReviewPage.test.js
      • Carousel.js
      • Cart.js
      • ContactForm.js
      • ContactPage.js
      • Home.js
      • ReviewPage.js
    • Footer.js
    • Header.js
    • Logo.js
    • PageNotFound.js
    • loading.js
  • App.css
  • App.js
  • App.test.js
  • index.css
  • index.js

  Server

• api/
  • thirdPartyApi.js
• db/
  • db-connection.js
• reference/
  • mockitem.js
  • seed.sql
• src/
  • controller/
    • adminController.js
    • customerController.js
  • models/
    • adminModel.js
    • customerModel.js
  • routes/
    • adminApiRoutes.js
    • apiRoutes.js
• .env.example
• db.sql
• server.js

Installation

First you need to get an Auth0 API, Google Place API key.

Clone the restaurant menu repository

git clone https://github.com/priyaraj7/guruprasad.git

Move inside the repo

cd guruprasad

Next move into the server and install dependencies

cd server
npm install
npm start

Create a .env file and enter your api-key. You can refer .env-example file.

Next restore the Postgres Database

psql postgres -f db.sql

Open another terminal then cd into the client, install dependencies

cd client
npm install

Create a .env file and enter your Auth0 credential.

Start the browser

npm start

Your browser should automatically open at http://localhost:3000.

Note: Server runs on http://localhost:4000 and client on http://localhost:3000

Acknowledgement

I'm extremely grateful to my Mentor - Chris Jaure and Techtonica team for their help on this project.

Resources

Node (Express) API: Authorization
React user Login
React Router v6
Aggregate Rows into a JSON Array Using the json_agg() Function
Adding a LEFT JOIN on a INSERT INTO....RETURNING
Git rebase --onto
Update one of the objects in array, in an immutable way