A full-stack Django/React web application that keeps track of when food in your fridge is best by. Utilizes a React frontend with Material UI and Axios API calls, and a Django backend that interacts with a PostgreSQL database through the Django REST Framework. Built by Joe Gilberto.
Not currently deployed.
As a user, I want to land on a well styiled home page when I visit the application.
As a user, I want to sign in to acces personalized data.
As a user, I want to sign in to acces personalized data.
As a user, once signed in I want to access a personalized homepage.
As a user, I want to be able to access my fridge with groceries who's expiration dates are being tracked.
As a user, I want to be able to see relevant notifications about the expiration status of my groceries.
As a user, I want to be able to add grocereis to my fridge to be tracked.
For the frontend, I utlized React components combined with Material UI for styling and Axios to make API calls to my backend. My backend was built using Django and interacting with PostgreSQL, while employing the Django REST Framework, to make RESTful API routes. User's are authenticated by signing in with Django Token Authentication.
Below are specific relevant resources I referenced while building this application.
- A public domain plant icon from Wikimedia that I used as the favicon and header logo.
- A Django REST Framework authetnication guide from the Django REST Framework documentation, that I specifically used the secition on TokenAuthentication
- An article, "How to Implement Token Authentication using Django REST Framework", that helped me implement authentication upon getting a token for authentication (from the above resource, A Django REST Framework authetnication guide).
- A Django REST Framework tutorial for authentication and permissions from the Django REST Framework documentation, that I used to set permissions for CRUD operations.
- A Stack Overflow thread that discusses posting a password to the Django User model, that I used to allow users from the frontend to sign up without admin support.
_-_The_Noun_Project.svg){kind=link}
The following instructions were used through macOS with a silicone M1 chip.
To deploy locally, fork and clone this repo. Then, using the terminal, navigate into the backend directory.
Once in the backend, you will have to set up a virtual environment through the following commands.
First, install virtualenv:
pip3 install virtualenv
Then create a virtual environment:
python3 -m venv myenv
Enter the virtual environment:
source myenv/bin/activate
Next, install backend dependencies by running:
pip install -r requirements.txt
Then, create a local PostgreSQL database.
createdb date_and_thyme
Still in the backend directory, create an env file:
touch backend/.env
Within that .env file, add the SECRET_KEY vairable of your choosing and a WHITELIST variable to allow the frontend React app (running on localhost:3000) to interact with the Django backend:
SECRET_KEY='<your key>'
WHITELIST='http://localhost:3000'
For the final step of your backend set up, spin up the server with the following command:
python3 manage.py runserver
For the first step of your frontend set up, navigate into your frontend directory via your terminal and install your dependencies.
npm i
Next, create your environmental variables:
touch .env.local
Then, add your database environmental variables to interact with your backend (running on localhost:8000):
REACT_APP_FOOD_API_URL=http://localhost:8000/food-items/
REACT_APP_NOTIF_API_URL=http://localhost:8000/notifications/
REACT_APP_AUTH_API_URL=http://localhost:8000/api-token-auth/
REACT_APP_USER_API_URL=http://localhost:8000/user/
Finally, while still in your frontend directory, spin up your frontend app:
npm start
Now, you can go to http://localhost:3000/ in your browser (Google Chrome is reccommended for best performance) and browse the application.
From the home page, the user can read up on the application. The user can then sign in (through the button on the homepage or header) to access the application. Once on the authorization page, a returning user can sign in and a new user can sign up. If a returning user were to attempt to sign up with the same credentials, they would be automatically logged in. After logging in, users can navigate the site throuhg the header's nav. Through "Add Groceries" they can add food items and their expiration date to their fridge. The user can check what items are in the fridge through the "Fridge" navigation link, and can click on those items to view further details, edit those details, or delete the grocery item. Then, through the fridge icon in the navigation, users can see what notifications they have (reminding them when food has 5 or less days, warning them when food has 2 or less days, and alerting them when the food has expired). The notifications will update every time the user opens the app.
Features to be added in further edits:
- The ability to track what food is eaten, what food is discarded after expiration, and which items are neutrally deleted.
- Users will receive email and/or text notifications when food is about to go bad
- When viewing a grocery item's detail page, the OpenAI API will generate and return one recipe with said grocery item.