Burps

Burps is a user-friendly food ordering application that simplifies the process of discovering, selecting, and ordering delicious meals from a wide range of local restaurants.

With an intuitive interface and a vast selection of culinary options, Burps offers users the convenience of browsing diverse menus, customizing orders, and tracking deliveries in real-time. Currently, Burps have a customer site and vendor portal.

Feel free to explore the demo site here!

This is a final fullstack web application as part of General Assembly's Software Engineering Immersive.

---

Data Modelling

---

Feature Highlights

Customer Portal

1) Burps' Food

• Explore a wide array of delicious options from nearby restaurants.

• Effortlessly place orders from your favorite restaurants.

2) Food Ordering

• Seamlessly place orders and check out with ease.

3) Order Tracking

• Receive real-time order updates through non-intrusive snack bar notifications.

• Monitor your order status in an elegant tracker.

Vendor Portal

1) Menu

• Conveniently add, remove, and update your store's menu items.

• Easily toggle item availability with a single click.

2) Alert

• Receive immediate notifications for incoming orders. Keep customers informed about order status with just a click.

5) Rating & Reviews

• Access all customer feedback in one place.

---

Languages and Technologies Used

Front-end

• React
• TypeScript
• CSS
• Material UI

Back-end

• Express.js
• Database: PostgreSQL
• Driver: Node-progres (pg)
• Image storage: AWS S3

Others

• Socket.io
• Data modelling: Draw.io

---

Setup

Express Backend

All the backend code is in the Back-end directory. Run all backend commands from inside that directory.

Setup .env for Backend

Create a new .env file in the back-end directory and add the following lines:

PORT=5001
DATABASE=burps
DB_USER=''
HOST=127.0.0.1
PASSWORD=''

#Generate your own secrets 
ACCESS_SECRET=''
REFRESH_SECRET=''

# AWS variables for image 
BUCKET_NAME=''
BUCKET_REGION=''
ACCESS_KEY=''
SECRET_ACCESS_KEY=''

Add in your values here.

• The database has to be for a Postgres database. You may create all the tables using the .sql here
• Generate your own Access Secret and Refresh Secret
• Add in credentials for your AWS S3 bucket

Run the app

npm i
npm run dev

React Front-end

All the frontend react code is in the Front-end directory. Run all frontend commands from inside that directory.

Setup .env for Front-end

Create a new .env file in the front-end directory and add the following lines:

VITE_SERVER=http://localhost:5001

Run the app

npm i
npm run dev

---

Wireframes and technical designs

Check out the Figma here!

---

Future development

• Add chatbox to ease communication between customer and vendor
• Add dashboard to vendor portal to populate sales analytics
• Utilize OneMap API to estimate distance time for order deliveries
• Incorporate payment method using Stripe

---

References

Backend:

• CRUD REST API with Node.js, Express, and PostgreSQL

• Building CRUD REST API with Node.js, Express.js, and PostgreSQL

• Create a Chat UI in React with MUI 5

• Chat UI React Package

• Socket.IO Tutorial on YouTube - Video

• TypeScript React Tutorial on YouTube

• TypeScript Express Tutorial on YouTube

• PERN Stack Example on YouTube

• Connect TablePlus to ElephantSQL

• Add CORS Support to Express TypeScript API

• TypeScript Modules Handbook

• No overload matches this call, .env file

• Property 'id' does not exist on type 'string'

• Building Robust APIs with TypeScript and Express

• Change Column Type in PostgreSQL

• SQL COUNT, AVG, SUM Functions

• Change Timezone of a PostgreSQL Database

• Using the NOW() Function in PostgreSQL

• Handling TypeScript Properties in Express Request

• Copying Data Between Tables in SQL

• Express Validator Documentation

• AWS S3 Tutorial for Storing Images on YouTube

• Sharp Package for Image Processing

• Storing Images in S3 from Node Server

• Socket.IO Official Website

TypeScript React:

• Using useContext in TypeScript

• Property 'env' does not exist on type 'ImportMeta'

• Material-UI Grid Align and Vertical Align

• Material-UI Select Set Value is Always Out of Range

• Argument of Type 'string | null' is Not Assignable to Parameter of Type 'string'

• TypeScript: 'Cannot Invoke an Object Which is Possibly 'Undefined'

• Material-UI Button Custom Elevation

• Format Number to Always Show 2 Decimal Places

• TypeScript: Element Implicitly Has Any Type Expression

• How to Make the Browser Go Back to the Previous Page Using JavaScript

Deployment:

• How to Create and Connect to a PostgreSQL Database With Render and pgAdmin

• SSL/TLS required

• SSL for PostgreSQL Connection NodeJS

• Deploying a TypeScript Express Application to Render

---

Credits

• Special credit to Ivan Tong for designing the wireframes! ❤️