react-components

List of components

  • Directions

  • FreeRecipes

  • GroceryList

  • GroceryListDepartment

  • GroceryListSettings

  • Ingredients

  • Intro

  • Login

  • Menu

  • Recipe

  • RecipeCalendar

  • Router

  • Signup

  • Tabs

  • WeeklyMenu

  • menu.png

Recipe Card -- stuff inside

Weekly Menu -- List of short Recipe Cards

Main components

Recipe

Grocery List

WeeklyMenu

Sub components

  • Recipe

  • Ingredients

  • GLDepartments (Recipe titles + link) (Ingredients from Recipe) (Ingredients from Department)

  • Navigation Screens

=========

Recipe Box (Adding Recipes into database)

Each recipe has

  • Main Recipe Image

  • Additional recipe images

  • Directions

  • Ingredients

  • Recipe Notes

  • Add Recipe Image

  • upload Image

  • Delete Image

  • Gallery

Groceristar

routes

  • grocery lists -> Departments Group

  • Departments select

Ingredients

  • Simple version

  • List with items from recipes

Free Recipe List

it's a simple version of Weekly Menu Page Just list with recipe titles and links to recipe details

Grocery List Screen

it's a page with accordeon. Each section of accordeon related to Department of Ingredients each section contain Department Title(+id) and ingredients from this department

  • link/Button to Recipes Calendar Screen

Directions Screens

is a separated screen that display only step-by-step information about how to prepare a meal

Simple list with data adn with order number of steps.

Dry Goods Screen

is an example of how shopping list looks like where all ingredients grouped by only one department.

Login

Is a page with login form that user canuse to login inside the app

Side Menu

is a feature that will help users to navigate between screens Menu items is negotiable, but let's keep links from screenshot that we have At first time we'll populate that links from js array.

Weekly Menu

is a list with recipes with basic data

It have weekday recipe title recipe description

  • link to recipe details page

Recipe Detais Screen

it's a page where we'll display all information about recipes Data will be requested from our API Server later it have a few basic sections also can contain buttons, other form elements in next releases too.

Recipes Calendar

It's a just list (for now) each item contain weekday name and list of recipe/recipes(use loop), attached to this date.

Grocery List settings

It's a page that containting form where you can configurate grocery list GroceryListSettings Usually it's not an important page. But it good for unusual cases.

It's a list with recipes and form elements which help you to configurate it.

main feature -> enable/disable recipe inside GL(usually all recipes from weekly menu is enabled)

And number of servings per recipe. Like usually you're preparing meals for 3 persons, but at Holiday you'll have friends and want to understand how much ingredients you should purchase for that day.

Last updated