dopecello / meal-find Goto Github PK

Leveraging Spoonacular API to make an exploratory meal-prepping app

JavaScript 2.22% TypeScript 97.59% CSS 0.19%

meal-find's Introduction

Find a Meal

Welcome to my meal-finding app. The purpose of this app is to provide a user some inspiration for what food they want to eat based on a number of different parameters.

Local Setup

First, clone the repository into a directory of your choice using git clone.

Then, install dependencies using npm install in the root directory.
Create an API Key, then create a .env fil in the root directory as so:

API_KEY=<your_api_key_combo>

Test the connection to the API by running the development server using npm run dev. Click "Search Recipes" and query the word "Pizza" with no selections.
A successful connection is established if you get a result back with an array of cards on a carousel, followed by an image of the recipe, a description, and a link the the recipe itself.

How to find a meal using the app

Using a general query

You are able to search recipes without any further filtering. All you have to do is go the the search bar where it says "Type in a food...", type in a type of food (ie: pasta), and hit "Done" at the bottom.

Using a filtered query

You can choose to enter in a type of food, or just search for recipes by simply checking off different parameters given to you in the menu. The API will select a number of foods based on the amount of filters you put on it. Careful to not make your search ultra-specific, or else an error message will show, encrouraging you to broaden your search.

Welcome contributions and features

Search by ingredients

There is an endpoint for this on the Spoonacular documentation for searching by ingredients that somebody has suggested to me personally. I do not think it would be too hard to integrate.

Making grocery lists based off of recipes

Each recipe can theoretically be re-fed back into the API and a rough grocery list can be attained through this search. After a user is done selecting one or more recipes, it is possible to leverage the OpenAI API to contruct a prompt that creates a composite grocery list that combines the ingredients of one through all of the recipes. can be exported as a .csv or .txt file.

Using a database to store favorite recipes and grocery lists

So far, I have integrated Prisma into the project to act as a connection to a PostgreSQL server. The end goal is to have user be able to save favorite recipes, grocery lists, and search history.

meal-find's People

Contributors

Watchers

meal-find's Issues

Create basic UI

It is complete when:

There is a Title Section with big font and a logo. Maybe also a slogan
There is a button saying "Find Your First Meal"

-When clicked, a modal pops up with a list of parameters

when parameters are added, a card appears in a div below the button
There is a utility bar at the bottom which gives the user the option to "download grocery list"
A footer stating my name a a copyright section, maybe a small privacy section.

Integrate OpenAI API

First, figure out the correct prompt that returns the best results given different data. Test data and make sure it is consistent.
Figure out a way to make an exportable version of the response, preferably a note in iPhone or a downloadable file of some sort that can be saved on somebody's phone.

Integrate `findByNutrients` endpoint on recipe search

Here are the endpoint docs -->

Integrate into the "Search Recipes" menu

Make client side requests to populate database

Make it so that when an account is created it is saved. Also populate favorite meals and grocery lists

Add a "sifting through" capability to the cards

Make it so a user can browse through all of the returned recipes in the array

Make it so that the user can see how many search results they got

Find out how to reprompt API and return next 100 results

As it is right now, the API only returns 100 results total for each call. Although I am prompting users that when they search and get results over 100, that they should filter their results, there should be:

a "search next 100" button or "search more" buttons that retriggers the API call and returns the next 100 results from the totalResults and returns it in the data array.
This button should only be enabled if there is an overflow of search results.

Sign-in functionality

It has come to a point in the app where I feel like there should be some sort of way that users can save their preferences. This would take time but I think with all things considered it will be a really cool full-stack use case.

Sign in and Log out buttons in the Top right hand corner. I still don't feel a need for a Navbar.
Have auth-guarded links that prompt users to sign in
some sort of dashboard where people can access their "liked" cuisines and access past grocery lists.

Have output modify the API call on `Main.tsx`

Once the tests are complete, then, have data dynamically modify the API call.

As a bonus, see if there is a way if you can measure the number of API calls. If possible, have it display somewhere out of the main view as a courtesy to the user.

Add search results measurer to the modal

WHEN a user is choosing their meal preferences through the modal,
THEN the user can see how many results there are based on the filters they apply
WHEN a user clicks the "Done" button,
THEN the number parameter in the API call adjusts to the maximum possible returned result based off the users filters.

Have a (See more...) <p> tag that generates more of the description by extending the card.
Modal for the grocery list and have an "Add to Grocery List" button so that a user can add to their grocery list.

Will add more as they come

Register API key, create local env var, test API endpoint

A successful connection to the API will be documented below before closing.