The Recipe Box

Date: 02/14/2022

By: Doran Smith

LinkedIn


Description

As a chef, my husband is often creating new recipes but never writing them down. After a busy day at work, creating a new recipe does not sound appealing, and we struggle to remember what he has cooked in the past. The Recipe Box will allow home cooks and chefs to enter their recipe data and reference them in the future.

This site will allow home cooks and chefs to enter their recipe data and reference them in the future. his application includes a Vue frontend, a Postgres database, and a Python Django backend. An external API is used to access ingredients and add to the user's pantry. T


Technologies

  1. Django
  2. Python
  3. Postgres
  4. Vue

Getting Started

My first step was to create a wire frame, which allowed me to visualize what my app was going to look like. The wireframe helped me to build my component hierarchy diagram and map out which components would need to be created, and how they would all be linked. I then created an entity relationship diagram (ERD) to outline the three models that would necessary in my database. The final step before starting to code was to create a Trello board which details all the steps needed on the front end, back end, and eventually styling.

Wireframe

ERD

Component Hierarchy Diagram

Trello


Screenshots

Home Page

Recipe Box Page

Recipe Card


Future Updates

  • Deply on Heroku
  • External API for recipes
  • User authentication
  • Calendar for historical reference and future planning
  • Adjust formatting of instructions and ingredients to improve user experience

Credits

Ingredient API Spoonacular

Recipes & Images: Simply Recipes

Background Image: Unsplash Search

Index Card Styling: CodePen