A recipe search and bookmark app designed for the amateur home cook! View the deployed app at this link!
- Overview
- Examples
- Setup instructions
- Learning Goals
- Future features
- Technologies used
- View Deployed Page
- Contributors
- Reflections & Wins
- Amateur home cooks crave outlets to find new and exciting recipes, and as it tends to play out, they rely on these staple recipes to get them fed through the work week! Savor is an app that allows a user to search a wide range of recipes to try out in their own kitchen. When they find a recipe that hits the spot, they can easily save it to the 'My Recipe' section for use on a busy weeknight down the road, thus saving them the time it takes to consider, "Where did I find that recipe I liked a few weeks ago??"
- The easiest way to experience Savor is to view this deployed link.
- You can also run it locally on your computer! To do this, please follow these easy steps:
Clone
this repo down to your computer.CD
into the Savor directory- Once inside, type
npm install
into the command line. This will install all of the apps dependencies. - Now you can type
npm start
into the command line to open a browser window where you can interact with the app.
- Once you have Savor open in your browser, you will be greeted with a simple home page that consists of a header and a search bar.
- Simply type a query into the search bar, for example "Cauliflower Steaks", and click on the the magnifine glass icon (or just tap enter!)
- You will be shown the results of your query.
- The recipe cards will show you some brief but relevant info including the recipe's title, cuisine, serving amount, calories, and a thumbnail image of the recipe.
- Clicking on the image or recipe title will open a new window in your browser that takes you to the source article.
- To favorite a recipe, simply click on the bookmark icon in the lower right hand corner of the card. The icon will turn red, and when you navigate to the 'My Recipes' page, you will see it displayed.
- To unfavorite a recipe, click on the red bookmark icon, and it will be removed from your favorites.
- Design an app that fits the needs of a specific audience.
- Deliver a workable product in the timeframe provided.
- Create a simple architecture using the React framework and implement React-Router to handle url paths.
- I plan on adding extra filtering functionality to the recipe search. For example- A user would be able to set a calorie range, or define what type of quisine they are specifically looking for.
- Using an express server to handle the favoriting instead of relying on local storage in the browser.
- Multi-user login functionality to handle more than one chef using the same browser.
- React
- React-Router
- React-Hooks
- Cypress
- JavaScript
- Heroku
- GitHub Projects
- Miro
- As always, the relatively short time frame for seeding the concept to delivering the minimum viable product is a challenge. This forced me to plan efficiently and set attainable goalposts, which in the end were crucial!
- Being a amateur home cook, I'm proud to have designed an app that I will actually use in my daily life! There is something so rewarding about taking a project from 'practice to practical'.
- The repetition of building in the React environment has been very useful to my workflow. I feel that I am getting a better grasp of the overall structure of how apps can be made, as well as getting quicker at achieving functionality.