Skip to content

Latest commit

 

History

History
135 lines (94 loc) · 2.51 KB

README.md

File metadata and controls

135 lines (94 loc) · 2.51 KB
Raw

#ng-summit-redux

Trendy Brunch Demo Application for Angular Summit

Get it: git clone https://github.com/e-schultz/ng-summit-redux.git

To start:

  • npm install
  • npm run start
  • open browser to localhost:3000/src

Slides from the Talk

TODO: Add Link

App Overview

To demonstrate reactive architecture using redux + ng-redux with Angular.

TrendyBrunch

Simple resturant application,

  • Reducer for Lineup - people waiting to be seated
  • Reducer for Tables - handles seated people, and their orders
  • Reducer for Menu - food items available, and what is in stock

General Idea:

  • parties of people can join/leave the line
  • parties get seated at tables
  • tables can take place orders - add/remove items from an order, then have it be submitted
  • UI is derived from the application data structure

Data Structure

[Resturant] --------- [Menu]
  |      |               
[Line]   |             
      [Tables]
         | 
         |
      [Order]

UI Overview

  • Lineup + Lineup Summary
  • Dining Room - Smart Component
    • Table - Dumb component
      • Can seat a party
      • Start an order
      • Pay the bill
      • Clean the table
    • Menu - Dumb component
      • Add item to order
      • Remove item from order
      • Place Order
  • Tabs for Orders
    • Pending Orders - orders that are activly being placed
      • No actions, render only
    • Completed Orders - orders that have been taken, and are now in the kitchen
      • Can add items to order
      • Can remove items from order
      • Can deliver the order

Lineup

Data

  • ID
  • number of people

Actions/Events

  • Join Line - PARTY_JOINED
  • Seat a party - PARTY_SEATED
  • Leave the line - PARTY_LEFT

Tables

Data

  • table ID
  • number of seats

Actions/Events --- simplify it so a table is either clean / dirty / occupied
--- events place order / pay bill / seat

  • seat customer
  • add items to order
  • remove items from order
  • submit order
  • request bill
  • pay bill + leave
  • clean table

Orders

  • table id
  • id
  • Order { key = menu item id, value = qty}

MenuItems

  • id
  • price
  • stock
  • description

Components

There are a few examples of components, smart/dumb components, containers in this application.

In the 'Orders' component, three versions are available showing different approaches.

In src/components/index.js you can switch between them by commenting out others and only bringing in the one that you want.

// import orders from './orders-v1'; 
// import orders from './orders-v2'; 
import orders from './orders-v3';