Recipes
Table of Contents
Overview
The Recipes app helps users search for recipes based on an ingredient that they would like to use in a dish. This project is the result of four developers who are participating in Chingu’s Voyage 46. Chingu has been an amazing organization that helped us connect with each other to develop a fullstack application. We were given resources to organize, manage, and track our project effectively. Using agile methodologies, specifically the Scrum framework, we all have a working knowledge of solving a problem with this approach. This is an application for individuals who enjoy cooking.
Features
- Header component with an image, a search bar, and button to initiate the search
- The user can input an ingredient, but we were not able to produce results once the button is clicked
- Main data component displays various recipe cards that have an image and recipe title
- Clickable cards that flip to summary details component that shows two tabs: ingredients and instructions
- Data is fetched from a JSON file as an alternative to the Tasty Recipe API
ISSUES
- Typing in the search bar causes the whole site to go blank and produces a TypeError in the console
- Initiating a search by clicking the search button does not change the results and produces a TypeError
- We originally used the Tasty API but we ran out of free API calls. We switched to using the provided JSON file. The Card.jsx and Card.module.css files contain the code that fetchs data from the API.
DEPENDENCIES
DEPLOYMENT
- Open Command Prompt or Terminal to install vite
- Run npm create@latest
- Choose React from list
- Choose JavaScript from list
- cd into project folder
- Run npm install
- Run npm install react-icons
- Run npm run dev
Improvements
- Troubleshoot the search bar component to render results based on the ingredient that the user inputs
- Add a filter in the main data display that allows the user to alter results based on cuisine, dietary restrictions, breakfast, lunch, dinner, or dessert
- Enable the preservation of search criteria between sessions, allowing users to select them from a dropdown menu when needed
- Display an error message when an unlisted item is entered.
- Add a link to the instruction video on the summary detail component
- In addition to the information for the selected data, also display the nutritional data on the summary detail component
- User login where recipes can be saved and a profile can be made
- Integrate social media icons for sharing capabilities
What we learned
Richard
I learned first hand the importance of working as a team as a developer. We were able to apply agile methodologies to designing and implementing a project. We were able to use the expertise of the different team members to produce a better product and add to our own knowledge. We were also able to practice using GitHub when multiple devs have access to the same repo, and how to coordinate that effort. I really feel that I have gained valuable experience of being part of a dev team and I was able to practice the soft skills necessary to successfully collaborate on a project.
Laura G
Working in a team is so much better than working by yourself - more heads are better than one, for ideas, troubleshooting bugs. I learned how to install Vite for a React project and a bit of a refresher on how to write react code since I haven’t worked with it in awhile. Also learned that AI can be a good resource.
Laura C
The past six weeks improved my skills with debugging/testing, project management, team collaboration, version control, and best practices in software developement. I found that applying Agile methodologies with the Scrum framework enforced a better understanding of SDLC. My confidence grew with each sprint and I learned how to communicate effectively with shifting priorities. When things weren't going as planned, I felt supported which enabled me to reach out to Jim or my team for help. I've already promoted this program to students from my college and other developers. I look forward to the next Voyage!
CONTRIBUTORS
Laura Gieg Discord: @frosty5493 GitHub: Follow Laura LinkedIn: Connect with Laura
Richard Whittington Discord: @richardwhittington GitHub: Follow Richard LinkedIn: Connect with Richard
Laura Castro Discord: @lauracastrotech GitHub: Follow Laura LinkedIn: Connect with Laura
Tyler Thietje Discord: @Airboater1978 GitHub: Follow Tyler LinkedIn: Connect with TylerBack to Top