Git Product home page Git Product logo

kitchen-riffs's Introduction

Kitchen Riffs

Live link to Kitchen Riffs

This recipe website combines features from Bon Appetit and Epicurious. Find recipes to use up the ingredients in your fridge. If there are no exact matches, inspiration will be provided to riff on. Happy cooking!

πŸ“ Table of Contents

🍴 Why Kitchen Riffs?

In the United States, food waste is estimated to be between 30-40 percent of the food supply. This is important to note because nearly 35 million people across America suffer from food insecurity.

This recipe website aims to help use up ingredients that are left in the fridge before they go bad. The search bar takes in individual ingredients and filters recipes that include those ingredients. If we don't have an exact match, inspiration will be pulled up that you can riff on. Say good bye to your leftover bunch of cilantro!

βœ… Functionalities

  • Search for multiple ingredients at a time

  • Filter recipes based on cuisines, meals, and dishes

  • If no recipes match the filters, inspiration for recipes will be displayed using an external API (Tasty) recipe-index

  • View recipe ingredients, directions, and ratings recipe-details

  • Review recipes with a 5 star rating and a comment

  • Delete reviews recipe-reviews

  • Save recipes with notes and tags

  • Update and delete saved recipes

πŸ’‘ Highlights

My original plan for this project comprised mainly of CRUD features (Create, Read, Update, Destroy). Fortunately, I got to practice additional skills and challenge myself in new ways. Two examples are using Python for data manipulation and using an external API to get recipes that aren't in the database yet.

Python data manipulation

When faced with data that requires cleaning, my first instinct is always to turn to Python. I used the Pandas library to clean and manipulate data sourced from ChatGPT to seed all of my recipes, users, ingredients, and ratings.

ingredients = recipes.explode('ingredients')

split = pd.DataFrame(ingredients['ingredients'].to_list(), columns = ['name', 'amount', 'metric'])

ingredients = pd.concat([ingredients, split], axis=1)[['recipe_id', 'name', 'amount', 'metric']]

The code above is a short snippet from my Jupyter notebook where I parsed ingredients to populate a table that could be easily filtered and displayed. Ruby certainly has its strengths, but it was nice to return to Python for a quick task.

Recipe API

I aimed to create a recipe website that prioritizes Zero Waste and allows user to use up what's in their fridge. I find it frustrating when recipes requires a small amount of an obscure ingredient that will later go to waste.

To address this issue, I used an API that fetched recipes related to a list of ingredients or keywords. The code snippet below demonstrates how I passed ingredients into the request.

const params = new URLSearchParams();
    params.set("size", 3);
    params.set("q", ingredients.join(', '));
    const urlWithParams = url + '?' + params.toString();
    const options = {
        method: 'GET',
        headers: {
            'X-RapidAPI-Key': process.env.REACT_APP_RAPID_API_KEY,
            'X-RapidAPI-Host': 'tasty.p.rapidapi.com'
        }
    };

πŸš€ Future Scope

The external API did not have a consistent URL field, so only the name and description of possible recipes are provided. In the future, I hope to build out that feature more to identify and display real recipes that match the filters.

⛏️ Built With

πŸŽ‰ Acknowledgments

kitchen-riffs's People

Contributors

shanenak avatar

Stargazers

 avatar

Watchers

 avatar

kitchen-riffs's Issues

Home, Features, DB Schema

Wiki Page Home

  • Is the first page you see upon entering the wiki
  • Contains a welcome message
  • Contains a description sentence of the app
  • Contains a link/placeholder for a link to the live page
  • All links in the right sidebar should contain each wiki page and link to the correct page
  • Correctly formatted
    • each wiki page is listed in bullet points
    • all links route the correct page

Feature List

  • Should have 7 Features.
    • 3 of those are User Auth, Live Hosting on Render, and Production README.
    • The other 4 are from the Feature List or they have clarified them with you
  • Includes two to three detailed bullets on functionality and presentation of feature
  • At least one CRUD feature, which states what CRUD operations are planned (creation, reading, updating, deletion)
  • Estimates how long it will take the code each Feature
  • Correctly formatted
    • Features are listed in an ordered list
    • Each Feature is broken down into bullet points

Database Schema

  • Contains correct datatypes
  • Contains appropriate constraints/details (primary and foreign keys, not null, indexed, unique)
  • Contains bullet points after the table that state which foreign keys will reference to which table, or references to the associations which will be made
  • Correctly formatted
    • schema is written in a table format
    • table names, column names, and foreign keys are lowercased, snake_cased and back_ticked
    • the table header column names are bolded

Sample State, Backend & Frontend Routes

Sample State

  • State shape is flat!
  • State’s keys are camelCased
  • All keys within the values in the state are accessible in the schema
  • Correctly formatted
    • Sample state is rendered with triple backticks, and the language ```javascript...```). This will display the state as a code block instead of a giant line of text
    • Top level slices
      • entities
      • session
      • errors (here or in ui)
      • ui (if needed)
    • Should NOT have nested slices, aka comments inside of posts
      • Some info from other tables is ok, for instance:
        • The author username and imageurl for a post. Basically any info that the user can’t change
        • Like count and a boolean on whether the user likes the post instead of a likes slice

Backend Routes

  • Contains the following sections: HTML, API Endpoints(Backend)
  • Each route has a description
  • API Endpoint routes contains wildcard variables written in snake_case
  • Routes does not contain superfluous routes
  • Have API routes that will allow the front end to get all info it needs and does not have unneeded routes:
    • probably doesn’t need a GET likes api endpoint because that info comes through the post show

Frontend Routes

  • Frontend routes contains wildcard variables written in camelCase
  • Correctly formatted
    • Routes are displayed with inline coding text (backticks)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.