Food is abundant in our modern society. However, every year millions of tons of food goes to waste because individuals can't think of ways to combine every odd ingredient in their refrigerators into something worth eating before those ingredients expire.
Recip-Eco is here to fix this problem of food waste.
Recip-Eco allows the user to submit a list of every odd ingredient they have yet to find a use for, and in return they receive a list of recipes from the Edamam Recipe API that includes all of the recipes listed. Additionally, the user has the power to filter those recipes by dietary restriction. This means that not only will the list of recipes match the ingredient list--but it will also match the preferences of each individual user!
Recip-Eco: Revolutionizing food sustainability.
Checkout the deployed beta version of the application using the link below.
- React fundamentals
- TypeScript fundamentals
- React Hooks
- Build a multipage application with Router
- APIs
- Asynchronous JavaScript
- Testing React components with acceptance testing & end-to-end testing (Cypress)
- Responsive design
To get a local copy up and running follow these simple steps.
- In your terminal, clone the repo
git clone git@github.com:lilydev16/recip-eco.git
cdinto the root directorycd recip-eco- Install NPM packages
npm install
- Start the server to see the application in the browser
npm start
- Runs the app in the development mode.
- Open http://localhost:3000 to view it in the browser.
- The page will reload if you make edits.
This project was definitely a stretch! The thing that made it so challenging was the fact that we had to do the majority of the learning required to complete it on our own time, outside of class. However with that in mind, the project is also an incredible win for us because it shows how far we've grown as developers.
One particular milestone that comes to mind was when we finally figured out how to refactor the project in with React Router so that the url always matches up with the state that the application webpage is currently in.
When the user arrives at the landing page, they are greeted by a simple form asking for the ingredients they would like to use in their search. After they've added the proper ingredients to the search list, they can press the Find Recipes button, and voila--a list of recipes including those ingredients will appear in a queue beneath the form!
If the user has any specific dietary preferences or restrictions, a dropdown will appear with the search results allowing the user to further filter their results as desired.
Finally, when the user has found the recipe they would like to check-out, they can click on the recipe in their queue and a new page will appear with additional recipe details and instructions along with a link to the webpage where the recipe was originally posted online.
In the future, we would like to make the following additions to Recip-Eco:
- The ability for users to login to dedicated accounts so that they can individually favorite the recipes they find for future use.
- Additional dropdown options for refining recipe results by more criteria.
- The ability to use the application in full screen mode with a dedicated desktop and/or mobile version of the application.
- TypeScript
- React
- React Router
- Cypress
- Javascript
- SCSS/SASS
- HTML
- CSS
- WAVE (Chrome extension)
- React Dev Tools (Chrome Dev Tools)
Skip installation by using this deployment link to view the application: Recip-Eco
- No installlation is needed with the provided deploy link.
- The application was deployed using Vercel.