A React-Redux yummymeals capstone application that comsumes theMealDB APi and returns categorized information that can easily be sorted through and filtered. It provides a catalogue of a variety of meals; Breakfast, Chicken, Vegan, Dessert.
It uses Redux for a single source of truth while doing state management. The redux store keeps the data retrieved from the API.
All pages have a single route within the SPA.
YouTube 📺 Understanding React, Virtual DOM, Redux, State Management & One-way Data Flow
Blog 📜 How to: React, Redux, Virtual DOM, State Management & One-way Data Flow
 |
 |
 |
|---|---|---|
| Mobile view | Tablet view | Laptop view |
 |
 |
 |
|---|---|---|
| Mobile view | Tablet view | Laptop view |
- HTML5, CSS3, & JavaScript
- React
- Redux
To get a local copy up and running follow these simple example steps.
- Gitbash installed to navigate between the branches.
- A preferred text editor for example VS Code.
- A browser such as Google Chrome
Clone this GitHub Repo to your computer on yourFolder by typing these commands in the terminal or download as a Zip file and extract.
$ mkdir yourFolder
$ cd yourFolder
$ git clone https://github.com/KabohaJeanMark/yummymeals/
In the project directory, you can run:
npm install downloads a package and it's dependencies.
npm install downloads dependencies defined in a package. json file and generates a node_modules folder with the installed modules.
This helps you to install all of the packages required by this application to help it to run. These packages are stored in a folder that has been ignored by the file .gitignore. That is why you do not see the folder node_modules on your computer after cloning this project.
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.
Launches the test runner in the interactive watch mode.\
Press a to run all tests
You can easily filter meals depending on categories and add click on their recipes to view more of their details.
By clicking on the recipe, you link to a details page with an explanation of how to create that meal. There is also a link to a YouTube video explaining how to prepare the meal with a demo walkthrough.
👤 Kaboha Jean Mark
- GitHub: @KabohaJeanMark
- Twitter: @jean_quintus
- LinkedIn: Jean Mark Kaboha
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!
- Hat tip to Microverse for the README template, instructions and tutoring for this Capstone project.
This project is MIT licensed.