Skip to content

Comment and review foods at UCSC dining locations

Notifications You must be signed in to change notification settings

HungrySlugs/webapp

Repository files navigation

Hungry Slugs Web App

This web app serves as an alternative to the current official UCSC Dining Menus. However, there are many improvements over the original website:

  • This web app is able to display all the foods available at each location in new clean UI which is nice change from the school's original websites UI.
  • Meal times are automatically hidden if they are no longer being offered at a given dining location.
  • Ability to rate the quality of a given food at UCSC using a review feature.
  • Comment on any given food available at UCSC as user signed in or an anonymous user.
  • See what other people have rated a food as well as the average ratings of any given food.
  • Get notified when a food you rated highly is available at a dining location.

All of these new features allow for users to better guage the food at each of the UCSC dining locations.

Development Environment Setup

To start developing the Hungry Slugs Web App you need to set up a local development environment. This includes configuring necessary secrets and programs. You will first need to follow the Secrets guide. It's then recommended that you follow the nix guide and setup the local development environment. Nix will work any Unix based OS (Linux/MacOS/WSL). If you are using Windows and want to use Nix then you need to install Windows Subsystem for Linux (WSL). You can install WSL by following the WSL Installation guide. Nix will also work for the x86_64 and 64bit Arm architectures without additional configuration. Nix is the recommended way to setup the local development environment because it is guaranteed to be reproducible. If you do not want to use Nix for any reason then you can follow the Without Nix guide.

Secrets

Make sure to have a private folder in the root directory that contains all secrets. You can get access to this folder using this Link to a shared Google Drive if you have been granted access to it. However, if you do not have access to this Google Drive, then you can make the secrets yourself. The required private folder files will be outlined below:

ssl-cert-ucsc.pem

To create this file you need to get the SSL certificate from the UCSC Menu website and add it SSL certificate file from the python certifi library. You can also disable SSL security checks by modifying the web scraping code, but this considered unsafe.

secrets.ts

These are the secrets for the front-end of the web app. The variables in this file are:

  • export const GOOGLE_CLIENT_ID
  • export const GOOGLE_CLIENT_SECRET

private_settings.py

These are the secrets for the back-end of the web app. The variables in this file are:

  • DJANGO_SECRET_KEY
  • MONGODB_USERNAME
  • MONGODB_PASSWORD
  • MONGODB_CLUSTER
  • UCSC_SSL_CERT = "private/ssl-cert-ucsc.pem"
  • IS_DEV = True

__init__.py

Create this file as well and leave in blank inside of the private folder.

Nix

Install Nix if not already installed. Here is guide on how to install for your system.

We need to enable nix flakes as this will make running future commands easier. However, it's not completely necessary as it can still be run without enabling flakes but the command to activate the environment will be longer. Here is a guide on how to enable flakes for your system. If you are not using NixOS or Nix Home-Manager then use the command mkdir -p ~/.config/nix && echo "experimental-features = nix-command flakes" > ~/.config/nix/nix.conf. What this does is creates a file nix.conf with the text, experimental-features = nix-command flakes, inside of it inside the ~/.config/nix folder on your system.

To activate the environment run one of these commands:

With Flakes (Recommended):

nix develop

Without Flakes:

nix --experimental-features 'nix-command flakes' develop

Note

  • You can append -c $SHELL to open the Nix shell in your preferred shell like zsh or fish as the default is bash.
  • You can update the packages in the flake using nix flake update this will change the flake.lock if there are update to reflect the new version.
  • After setting up the nix environment all the python packages will be install in _build folder and the node dependencies will be install in the node_modules folder. This folder is in the .gitignore as it should not be uploaded.
  • If you are using Visual Studio Code and would like it to recognize what python packages you have installed when using the python extensions (python and pylance), then you have install/use direnv with the correct direnv Visual Studio Code direnv extension. You can install direnv by following this guide: direnv - Installation.

Without Nix

This method is unrecommended as it less likely to be reproducible. However, it can be easier for some people to setup the environment if they do not have nix already setup or you want to run on a non unix environment/system.

Python

You need to install python on your system. The python version that was used to create this website is python 3.11. However, this may change in the future. You then need to install all of the python dependencies using pip install -r requirements.txt.

Bun/Npm/Yarn/Pnpm

You need to install one of the four options bun, npm, yarn, or pnpm. All of these should work, but these docs use bun. You will then need to run the package install command for the program that you installed. For bun the command is bun i or bun install.

Running Web App

Running the web app requires two steps once your development once your development environment is set up. You need to run two separate terminals with one running the back-end server and the other running the front-end. The commands are listed below:

Back-end: python backend/manage.py runserver

Front-end:

*Note the command you run depends on what you have installed in your development environment

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Web App Structure

Front-end

App Router

This web app uses Next.js App Router so each of the websites pages are stored in the app folder. For a better understand of how the app folder works you should read: Next.js App Router - Routing.

The web app also uses the TypeScript language which has the advantage of Static Typing and other improvements which can further explained on the TypeScript Website. Custom types for the project are defined in an the interfaces folder and imported when needed.

There is also a components folder which stores React components that can be imported and are used inside of pages.

Tailwind CSS

This web app also utilizes Tailwindcss which is a css framework that can be read more about on the Tailwindcss Docs. We utilize Tailwindcss CSS's features through the custom classnames in the classname field in each tag. These custom classnames are then converted to css and associated with each element that has that classname. This allows for faster devolvement as less time is spent learning fancy CSS and there is a more consistent website appearance.

Post & Get requests

Front-end http requests are made to our back-end using Axios which define the majority of the main function requests in app/requests.ts. There are other various requests that have not be moved to this file but will moved to this file at a later time.

Login

Logging in is also handled on the front-end in the app/profile/page.tsx using OAuth. The only method of sign in that is accepted right now is Google because each UCSC student has Google Account. In the future there could be other ways to sign in. The log info (email, name) are sent to the back-end to processed and added to the database.

Figma

We also used Figma UI to mockup the implementation of the UI design for each of pages on the web app. The Figma UI designs for each of the pages can be found in the docs/figma_ui. When implementing a new page it could be helpful to implement it in Figma before creating the page with code.

All packages for the front-end are defined in the file package.json.

Back-end

Python

The back-end is made using Django. This back-end is Python based, so all the code written for the back-end is in python. All of the back-end code is in the backend folder. Inside of this folder there are two main folders: backend/backend and backend/api. The first is for the setting up the main settings in Django which is mostly done in the settings file.

Django

One of the main reasons the back-end was made using Django was beacause the web scrapping framework used to web scrape the UCSC Food Menu website, BeautifulSoup, is a Python framework. The web scraper can be found in the folder backed/webscraper with the main file being the food_locations.py. This web scraper gets all of the food data from each food location on the UCSC campus and its respective categories. It is also able to get the food restriction data which gives information about the allergens and contents of the foods. This web scraper is called by a http request to update the database with the new menus if an hour has passed since the last update.

More HTTP requests

All of the http requests are stored in the backend/backend/urls.py which imports the backend/api/urls.py. The second file contains all of the http functions that are called on the front-end to our back-end. The main http functions are stored in the backend/api/views.py. Http requests for each model are located in views.py file in each model folder in backend/api/model_logic folder.

Model structures

All the models that are used on the back-end which interact with MongoDB are defined in the backed/api/models.py file. In this file there are validators so that every time something is pushed to the database it follow the structure defined in this file. Each of the model's CRUD functions are defined in actions.py file in each model folder in backend/api/model_logic folder. Each of the tests for the models are defined inside of these same folders but in the tests.py file.

All packages for the back-end are defined in the file requirements.txt.

Running Unit Tests

To run tests to check the CRUD functions for each of the models on the back-end you can run from the root of the repository:

python backend/manage.py test backend/api --shuffle

This runs all the tests found in the back-end api folder. This also shuffles the order of the tests such that running sequential tests does not change the test results. Currently there are only tests for the back-end models and in the future tests can be added for http calls and front-end actions.

Style Guide

Overall

  • Focus on simple and clean code that easily readable/understandable for other people.

Front-end

  • Each page made should roughly follow the same style as the Next.js website for how to create a page: Next.js Docs - Pages;
  • In general use as many features from Next.js instead of using older features from React.js.
  • All front-end code should be written in TypeScript and each custom model fetched from the backend should have interfaced defined that TypeScript can use.
  • All the code written should be formatted with prettier. This can be done by running the command: bunx prettier * --write. This will format all files used by the front-end.

Back-end

  • All the code written should be formatted with python black. This can be done by running the command: black backend/**/*.py. This will format all the python files on the back-end.

Known Bugs

Major Bugs

  • Dynamic routes issue related to inputting incorrect url paths will lead to an indefinite loading screen on pages.
  • Can not save images to the database and thus preventing us from fetching these images to display them to other users.
  • Anonymous users are all considered the same user across all website sessions.

Minor Bugs

  • A long delay (about 10 seconds) when loading the home page due to the data being web scraped when it has been a long enough interval for it to be updated. This caused by the front end pulling data from the UCSC dining hall website through the webscrapper, rather than just pulling the data from the database.
  • A long delay (about 5 seconds) when clicking on a location. It is not fully known why this is happening but it assumed that is related the http request to fetch all the data takes too long.
  • A new rating will not remain displayed when opening and closing a food category. However, the backend acknowledges the change; so when reloading the page the new rating will appear correctly.
  • A new comment will not remain displayed when switching pages on the food item page. However, the back-end recognizes the change; so when reloading the page the new comment will appear correctly. Also, if another user comments while you are viewing the comment page it will not appear until you reload the page.
  • Errors related to the use of LocalStorage are thrown in the console when using the search features on the website. However, the search still works with all of its functionality.
  • Users must click on the text of the buttons on the locations page to get to the food page rather than the button looking box around it.
  • Some of the styling varies between pages.
  • Some fonts and minor styling may vary depending on the OS or browser of the user.
  • The food data for the locations can be inaccurate if the location does not have anything currently offered.
  • GET request for favicon occasionally fails, but still loads image.
  • The profile page takes a very long time to load the ratings for the user (30 seconds).

Technologies Used

Front-end

  • Next.js
  • Tailwindcss
  • React
  • Axios
  • TypeScript
  • OAuth
  • Prettier
  • Figma

Back-end

  • Django
    • Django Cors Headers
    • Django Rest Framework
  • MongoDB
    • PyMongo
  • BeautifulSoup
  • Python Black

DevOps

  • Github
  • Google Drive
  • Discord

Scrum Documents

All scrum documents can be found in the docs folder.