yummymeals

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.

Screenshot

Live Demo

Netlify link

Video Demos

YouTube 📺 Understanding React, Virtual DOM, Redux, State Management & One-way Data Flow

App Walkthrough

Article

Blog 📜 How to: React, Redux, Virtual DOM, State Management & One-way Data Flow

Responsive Design

Landing Page


Mobile view	Tablet view	Laptop view

Meal Details Page


Mobile view	Tablet view	Laptop view

Built With

HTML5, CSS3, & JavaScript
React
Redux

Instructions

To get a local copy up and running follow these simple example steps.

Prerequisites

Gitbash installed to navigate between the branches.
A preferred text editor for example VS Code.
A browser such as Google Chrome

Install

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/

Available Scripts

In the project directory, you can run:

`npm install`

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.

`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 test`

Launches the test runner in the interactive watch mode.\

Press a to run all tests

How to Use

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.

Author

👤 Kaboha Jean Mark

GitHub: @KabohaJeanMark
Twitter: @jean_quintus
LinkedIn: Jean Mark Kaboha

🤝 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!

Acknowledgments

Hat tip to Microverse for the README template, instructions and tutoring for this Capstone project.

📝 License

This project is MIT licensed.

KabohaJeanMark/yummymeals