Healthy Foodie - Recipes App

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

Live project at healthy-foodie.surge.sh

• Healthy Foodie - Recipes App
  • Live project at healthy-foodie.surge.sh
  • The Project
    • Features
    • Built With
  • Using the App
  • How to run this project
    • Prerequisites
    • Run it (Quickstart with docker)
    • Installing the project
    • Available Scripts
      • npm start
      • npm run build
    • Learn More
  • Potential Features
  • Author
  • Contributing
  • Show your support
  • License

The Project

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!

Features

• Basic create-react-app structure
• Sets stylelint on the repo
• Sets eslint rules
• Linters
• React
• React-DOM
• React-Create-App
• Redux
• PropTypes
• ES6 syntax
• Export/import ES6+ notation

Built With

• create-react-app
• ESLint
• npm
• vscode with ESLint extension
• Linux/GNU
• Love and Passion for code

Using the App

• Open it and check some pre loaded recipes!

• Press a filter button to get recipes acording to the filter pressed

• Search 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:

How to run this project

Prerequisites

• npm 6.13 +
• node 11.15 +
• docker and docker-compose (optional)
• A Text Editor like VSCode
• A browser like Firefox or Chrome

Run it (Quickstart with docker)

• Be sure to setup docker-compose and have git and npm working.
• Run this:

> git clone https://github.com/Israel-Laguan/healthy-foodie.git
> cd healthy-foodie
> npm i
> docker-compose build
> docker-compose up frontend

• Enter [localhost:3000][] in a browser for the 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.

Installing the project

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.

Available Scripts

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.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Potential Features

• Improves filtering (by calories, by ingredient, by money spent, etc.).
• Create a landing page.
• <Insert your great idea here!>.

Author

Israel Laguan	Email me to [email protected] / Connect to my Linkedin

Contributing

🤝 Contributions, issues and feature requests are welcome! Feel free to check the issues page.

Show your support

🤗 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

License

📝 This project is licensed under the Apache 2
Feel free to fork this project and improve it!