FlavorFinder

Description

FlavorFinder is my capstone project for the Code:You web development pathway. It’s a full-stack web app built with HTML, CSS (Bootstrap), JavaScript, Node.js, and Express.js. FlavorFinder uses the Spoonacular API to help users discover recipes based on ingredients they already have, with optional filters for dietary preferences. Users can also save their favorite recipes. FlavorFinder is designed to reduce food waste and help users discover new meals without a trip to the store. This project showcases my ability to work with external APIs, manage dynamic content, and build responsive, user-friendly interfaces.

Technologies Used

HTML5, CSS3, JavaScript, Node.js, Express.js, localStorage, Spoonacular API, Bootstrap, Font Awesome, Git & GitHub, Git Bash, Visual Studio Code

Usage

• On the "Recipe Search" page, type in ingredients you have (comma-separated).
• Check any dietary filters (like Vegetarian or Gluten-Free).
• Click "Search Recipes" to see a list of matching recipes.
• Click “View Recipe” to open the full recipe on Spoonacular.
• Click the heart icon to save recipes.
• On the "Saved Recipes" page, click the trash can icon to remove a recipe from your saved recipes.

Capstone Requirements Fulfilled

Requirement	Implementation
Create a function that accepts two or more input parameters and returns a value that is calculated or determined by the inputs. Basic math functions don’t count (e.g. addition, etc).	Wrote a function that uses a user's list of ingredients (cleanedIngredients) and any selected dietary preferences (diets - if applicable) to build a search URL for the Spoonacular API.
Persist data to an internal API and make the stored data accessible in your app. (including after reload/refresh). This can be achieved either by using local storage or building your own API that stores data into a JSON file.	Used localStorage to allow users to save (and unsave) recipes. Any saved recipes are accessible after the page is reloaded.
Create a node.js web server using a modern framework such as Express.js.	Set up a Node.js web server using Express.js (see server.js) to power recipe search functionality and handle backend logic.
Visualize data in a user friendly way. (e.g. graph, chart, etc) This can include using libraries like ChartJS	Recipe search results are displayed in responsive Bootstrap cards with a consistent layout showing relevant information (recipe name, recipe photo, and buttons to either view or save the recipe).
Integrate an API into your project (MANDATORY). Using a Weather API will not count.	Used the Spoonacular API to retrieve recipe information, allowing users to search for recipes by ingredients and dietary preferences (if applicable).
At least one media query to make your site responsive.	Used a media query, Bootstrap, and Flexbox to ensure the site adapts to smaller screen sizes.

Fetch Request

I fulfilled this requirement by sending a fetch request to the Spoonacular API using a custom-built URL based on the user’s ingredients and any selected dietary preferences. The API's response is displayed on the page using Bootstrap cards. These two screenshots show the main parts of my fetch request (the lines between these two screenshots are for creating the recipe cards, and adding the view recipe and save recipe buttons to each card).

How to Run

1. Make sure you have Node.js installed (download here: https://nodejs.org/en).
2. Clone or download this repo.
3. Open a Git Bash terminal and navigate to the FlavorFinder folder.
4. Type in the command npm install and press Enter.
5. Create a .env file and add a Spoonacular API key (follow this format: SPOONACULAR_API_KEY=[API key goes here]). Make sure to save this to the root of the project.
   [If you're from Code:You and are grading this project, I provided my Spoonacular API Key in the project submission form]
6. Run the project with Node.js by typing the command node server.js into the terminal and pressing Enter.

Credits

• Spoonacular API - food API with several endpoints and over 5,000 recipes to pull from (plus extremely detailed documentation and a generous free tier 😋)
• Bootstrap - for responsive and consistent styling
• Font Awesome - for icons
• Assorted cookbooks - mainly two Taste of Home cookbooks (Taste of Home: Baking and Taste of Home: Winning Recipes) for the "Pantry Staples" and "Cooking Tips" pages

Future Features

Stay tuned for future updates. Some of the future FlavorFinder features (say that ten times fast!) I hope to implement are:

• User Authentication - allow users to create an account and see their saved recipes across devices (will probably use MongoDB for this)
• Improved search functionality - allow users to search with additional filters (cuisine type, cooking time, recipe ratings, etc.)
• Inventory/Shopping List - generate a shopping list for saved recipes based on the ingredients users already have
• Display nutrition information - using Chart.js (luckily, Spoonacular has an endpoint for nutrition information)
• ...and more!