Recipes App ~ Get a list of recipes, filter or query as you like, and check the recipe!
APACHE-2.0 License
Healthy Foodie |
---|
Recipes App ~ Get a list of recipes, filter or query as you like, and check the recipe! ~ Consuming an API with React and managinf state with Redux. |
🐞 Report a bug or 🙋♂️ request a feature |
As part of Microverse Students, I have to complete some capstone projects, solo projects at the end of the each of the Microverse Main Technical Curriculum sections. This time is for React section.
This project is based in a catalogue of dogs Catalogue of Dog Clothes. As stated on the description I changed the subject (also I did not found any API on dog clothes :sad: ). I decided to make a catalogue of recipes. It would be useful and flashy; who doesn't loves to see pics of food!
create-react-app
structurestylelint
on the repoeslint
rulescreate-react-app
ESLint
npm
vscode
with ESLint extensionSearch in the navbar for your favorite recipe!
Press any card from the list and see details like ingredients, nutricional info, and a link to the recipe:
npm
6.13 +node
11.15 +docker
and docker-compose
(optional)docker-compose
and have git
and npm
working.> git clone https://github.com/Israel-Laguan/healthy-foodie.git
> cd healthy-foodie
> npm i
> docker-compose build
> docker-compose up frontend
You can also test using docker, run docker-compose up test
or docker-compose run --rm test
Not a fan of Docker or need more information? Continue for instructions to learn more about how to setup your PC for run the frontend!
We used create-react-app
to initialize this project, so it is configurated to be easy to run. Just follow the following instructions.
Now that you are set up, open a terminal and:
git clone https://github.com/Israel-Laguan/healthy-foodie.git
cd healthy-foodie
npm i && npm start
Then open http://localhost:3000/ to see the app.
In the project directory, you can run:
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. You will also see any lint errors in the console.
npm run build
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes. Your app is ready to be deployed!
See the section about deployment for more information.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
Israel Laguan | Email me to [email protected] / Connect to my Linkedin |
---|---|
🤝 Contributions, issues and feature requests are welcome! Feel free to check the issues page.
🤗 Give a ⭐️ if you like this project!
API: Powered by Spoonacular's Food API
Icons from Icons8
Banner from canva.com
Favicon from favicon.io
Production deployment using surge.sh
custom Bootstrap 4's theme from https://bootstrap.build, using a modified version of its Sketchy theme
📝 This project is licensed under the Apache 2 Feel free to fork this project and improve it!