Catalogue of Recipes

Project Description

This project is a React capstone based on a catalogue of recipes. It is not an app to help you make a recipe. It is a catalogue with a browsable list of items that you can filter and have access to the details of one item. The webapp has at least 2 types of pages:

• one page with a list of food items that could be filtered by category;
• one page for the food item details;

Data was collected from an API from the React application. A catalogue of meals, using Meals DB

Technical requirements of the project

1. The project is a single page application(SPA) built with React and Redux.
2. The data that is retrieved from the API is stored in the Redux store
3. We filter the data that is retrieve from the API using a Filter stateless component
4. Every page, the main page and pages for each item, has a unique route within the SPA
5. The project is deployed and accessible online

Catalogue of Recipes Screenshot

Live Link on Heroku

• Catalogue of Recipes

Tools used

• Node.js
• React
• React-DOM
• React-Create-App
• Heroku
• npm
• CSS
• ES6
• HTML
• JavaScript
• Redux

Getting Started

To get a local copy of the repository please run the following commands on your terminal:

$ git clone https://github.com/Georjane/redux-recipes-catalogue.git
$ cd redux-recipes-catalogue
$ npm start
$ Open localhost:3000 in your browser if it doesn't open automatically

Run Tests

$ npm test

Author

1. Witah Georjane

• Github: @Georjane
• Twitter: @WittyJany
• LinkedIn: Witah Georjane

Contributing

There are two ways of contributing to this project:

1. If you see something wrong or not working, please open the issue in issue section
2. If you see something to improve or to correct, and you have a solution to that, follow the below steps to contribute:
   1. Fork this repository
   2. Clone it on your local computer by running git clone https://github.com/Georjane/redux-recipes-catalogue.git Replace your username with the username you use on github
   3. Open the cloned repository which appears as a folder on your local computer with your favorite code editor
   4. Create a separate branch off the master branch,
   5. Write your codes which fix the issue you found
   6. Commit and push the branch you created
   7. Open a pull request, comparing your new created branch with our original master branch here

Show your support

Give a ⭐️ if you like this project!

Design Inspiration

• Design idea by Marc-Antoine Roy on Behance
• All design inspiration info can be found here

Acknowledgment

• Microverse
• The Odin Project