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

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