Noms was inspired by my Mom and allows users to search through recipes, enter their own recipes and save their favorite recipes to prepare for their weekly grocery list. Phase 2 of Noms will prepare the list for you based on your meals for the week.
This repo contains code for the frontend server only; code for the backend lives here
Check out the live application here!
Feel free to register and then use your own login credentials, or try a demo using:
- Email: user10@user.com
- Password: Password!1
- Build a full-stack application using a Python Django API (using Django REST Framework to serve your data from a Postgres database). Consume your API with a separate front-end built with React. Have multiple relationships and CRUD functionality for a few models. Implement thoughtful user stories/wireframes to develop your MVP and stretch goals. Have an entity relationship diagram showing the proposed database schema. Have a visually impressive design. Follow suggestions to be deployed online so it's publicly accessible.
- 13 days (solo project)
React (JavaScript) | Sass | CSS | Bulma | Python | Django | PostgreSQL | Heroku | Netlify
View of Noms as a non-registered user. Features include the ability to Register, Login and view the Recipe Book:
As a registered & logged in user of Noms, accessible features include the ability to view the Recipe Book, like/unlike a recipe and save it to or remove it from your Noms Box, view your Noms Box (favorites page), as well as Add your own recipe and Sign Out:
I had three ideas I presented to a TA to brainstorm which one made the most sense for Project 4 given the limited time and needed functionality. Once I solidified my idea, I began planning the basic functionality and drawing an entity relationship diagram (ERD) and basic wireframe for the project.
Database ERD:
Excalidraw Wireframe:
More planning with a Miro board:
First, I created a simple ‘Hello World’ Django application and deployed it to Heroku. Then, I connected the app to a PostgreSQL database.
Models, Views, Serializers & Urls
I created a separate Django app for Recipes, wrote a basic Recipe serializer, a simple Recipe model (pictured below is the basic model plus what was added later - the initial model only had a name), a ListView with a GET request for all recipes and added the url path. I then created an app for jwt_auth and wrote the models, views and urls. I tested each route as I went using Django’s built-in admin site and Postman. In addition, I utilized TablePlus to test my connection and see tables/relationships within my PostgreSQL database.
- Recipe Serializer
- I wrote the serializers, updating and/or adding more as needed
- Recipe Model
- I added all of the models from the ERD I knew I needed right from the start, adding to them as information I wanted as part of each model changed. I made sure to have this portion wrapped up prior to implementing them on the frontend as changing models can be tricky when having to migrate the information down the road. As you can see, the Recipe Model also includes a ManyToMany relationship between Recipes and Ingredients. This relationship is through the RecipeIngredient Model and then used on the frontend when adding ingredients to recipes as recipes have many ingredients and a single ingredient could be part of many recipes.
The RecipeIngredient Model included a third component for quantity that was outside of the ManyToMany relationship as well since the quantity of an ingredient changes with each individual recipe.
- Class ListView(APIView)
- I opted to use the Class view for most of the Views throughout this project as they allow for more functionality. I did utilize a few Generic models as well.
- URLs (Recipe App)
Once I had the models, views, serializers and urls for the Recipe App where I wanted them, I added register and login functionality through the jwt_auth app. I included a User Serializer with password confirmation. In addition to the Register, Login and Credentials View, I included a Current User View, Profile View and Profile List View in order for each logged in user to be able to access their Noms Box (favorites) page. The Profile View includes Authentication to identify which user is logged in so they can see their own favorited recipes.
In order to add the "liked" feature to each recipe and have it linked to the User, I created a Custom User Model within the jwt_auth app and registered the model in the admin.py file.
- URLs (jwt_auth app)
I worked on the frontend and backend simultaneously when I first got the frontend up and running. Being able to see some of the work I completed come to life on the frontend is a motivating factor and helps me to conceptualize what comes next. I imported Axios, connecting the frontend to the API (backend) with the deployed version herokuapp url and numerous axios endpoint requests. I utilized Postman to make sure each path worked as intended as I moved forward.
The NavBar indicates whether someone is logged in or out based on the options available. If signed in, there is a Sign Out link available. Once signed out, the user's authentication token is removed and the user is taken back to the home page.
The form for adding your own recipe includes a section with checkboxes to add ingredients to your recipe. It does not currently include the ability to add your own or add the quantity of the ingredient, but this is on the list for future functionality! The ingredients currently listed on the form were input manually on the backend in the database, as they are ingredients included in the recipes available to view in the recipe book. Pulling the ingredients from the database was challenging as the ingredient itself was nested quite deep within the object. Below are snippets of code showing the checkboxes on the form as well as the functions for selecting ingredients.
- No known bugs at this time! :)
- I really liked using Django on the backend as there were many built in functions already which made it easy to use. The challenging part of the whole project was just the overall amount of steps, code, and puzzle pieces that had to be put together bit by bit in such a short amount of time.
- Getting the ingredients out of the database and into the form to add your own recipe was a win and a half!
Some additional features I would like to add to improve the app and create a more in-depth user experience:
- The ability for users to add their own ingredients and quantity of those ingredients into the create your own recipe form.
- A weekly Meal Page that translates into a weekly grocery list, compiling all ingredients needed for each recipe chosen and if an ingredient is added to the list more than once, combining the quantity needed of that ingredient for all recipes it's included in that week.
- A more responsive design for mobile/tablet use.
- Error handling on the frontend registration/login pages displaying the error to the user. Right now, the error shows in the console only.
- I really enjoyed using Django on the backend as there were many built in functions that made it super easy to use.
- Building a full-stack app from back to front independently and being able to see it all come together in the end was extremely satisfying. I learned a lot throughout the process that I may not have otherwise had I opted to work in a pair or group.