TasteWaste

By Chad Calcote - Live Site

A consumer-based review app geared to increase sustainability practices in the restaurant industry.

For a deeper dive into my planning process and code setup, please visit my Wiki!

Table of Contents

• TasteWaste at a Glance
• Technologies Used
• Application Architecture
• Frontend Overview
• Backend Overview
• Backend Installation and Setup
• Frontend Installation and Run Application Locally
• Conclusion

TasteWaste at a Glance

TasteWaste is a consumer-based review app geared to increase sustainability practices in the restaurant industry.

The application is made with a React frontend utilizing mostly original components and some material-ui components. The backend is a Python Flask server with a PostgreSQL database.

Key Features

• User sign in / sign up with flask-login authentication and encrypted password with werkzeug

• View restaurants using TasteWaste in your area
• Call restaurant, get directions to their location, and view their menu
• View other user reviews, add new reviews, or delete your own reviews

Technologies Used

• Frontend
  • React
  • Javascript
  • Redux
  • CSS
  • Material-UI
• Backend
  • Flask
  • Python
  • Postgres
  • SQLAlchemy
  • Alembic
  • Heroku deployment via Docker

Application Architecture

The frontend is a create-react-app using functional components with hooks. The backend is a Flask server with various RESTful endpoints. They are deployed via Docker to a Heroku server.

TasteWaste Postgres Database Schema

Frontend Overview

The front end is an original design aiming for a modern website with original styling. I implemented a custom component library for all restaurants, reviews, and users to keep styling the same and DRY up the code base.

To render out the unique rating for each restaurant, I had to make an API call to fetch all the reviews from that restaurant and construct a function that calculated the average of all of the ratings from those reviews:

Backend Overview

The Flask backend is a collection of RESTful routes serving data to the frontend and an interface with the Postgres database.

The database is queried using the SQLAlchemy ORM, and seed data added using the Alembic library.

To get all of the reviews from a single restaurant I had to write a custom query that filtered the Reivew model using the restaurant id passed into the route:

Backend Installation and Setup

1. Clone this repository (only this branch)

   git clone https://github.com/ChadCalcote/TasteWaste

2. Install dependencies

   pipenv install --dev -r dev-requirements.txt && pipenv install -r requirements.txt

3. Create a .env file based on the .env.example with proper settings for your development environment

4. Setup your PostgreSQL user, password and database and make sure it matches your .env file

5. Get into your pipenv, migrate your database, seed your database, and run your flask app

   pipenv shell

   flask db upgrade

   flask seed all

   flask run

---

IMPORTANT! If you add any python dependencies to your pipfiles, you'll need to regenerate your requirements.txt before deployment. You can do this by running:

pipenv lock -r > requirements.txt

ALSO IMPORTANT! psycopg2-binary MUST remain a dev dependency because you can't install it on apline-linux. There is a layer in the Dockerfile that will install psycopg2 (not binary) for us.

---

Frontend Installation and Run Application Locally

This project was bootstrapped with Create React App.

No environment variables are needed to run this application in development, but be sure to set the REACT_APP_BASE_URL environment variable in heroku!

This app will be automatically built when you deploy to heroku, please see the heroku-postbuild script in your express.js applications package.json to see how this works.

1. Change Directory to react-app

   cd react-app

2. Install Dependencies

 npm install

3. Start the local host

  npm start

4. Visit application at localhost:3000 (changes you make locally will appear)

Conclusion

COVID-19 has minimized our dining experiences to mostly takeout service only. With that, this means more of those to-go boxes going into your trash. What are your favorite restaurants doing to reduce waste and help the planet? Our application dives into this question by rating restaurants' sustainability practices while offering solutions.

Future features would include a search bar to find restaurants, more information in review form to better support sustainability efforts, and expand to cities across the U.S. rather than select cities.