This is a Yummy Recipes project implementation in the ReactJS library. The web app achieved is a front end client that interfaces with the Yummy Recipes Flask REST API.

Requirements

• ReactJS v16.2.0
• Bootstrap v4-Alpha
• React Bootstrap

Installation

1. Clone the Github Repositorty'

$ git clone https://github.com/indungu/yummy-react.git
$ cd yummy-react/

Install dependencies

use npm or yarn using Yarn

  $ yarn install

using npm

  $ npm install

2. Start the Application

using yarn

    $ yarn start

using nspm

    $ npm start

3. Running the Tests

using yarn

     $ yarn test -- --coverage

using npm

    $ npm test -- --coverage

How it works

When you click the link in the description or after starting a loc al instance you should see the following screen:

On clicking Signup you should receive the following SignUp page

After a successful SignUp you should be redirected to the following login page.

The initial Dashboard view you shall recieve on successful login is as shown below:

Clicking the Add Category button should launch the following Modal

On successful addition of a category, you should see the new category in the categories Table as follows:

Clicking the View Recipes button would then display a recipes table below the categories table for the specific categowy whose recipes you are viewing. Note that you will receive a prompt for categories that don't have any existing recipes.

You can then add new recipes to any category by clicking the Add Recipe Button. This will launch a modal as follows:

Both categories and recipes provide for the ability to edit and/or delete any one of them and display the appropriate prompts that effect.