react quiz live

Jared Anderson

Mike Jasper

ICS Stack Team

what we're building...

realtime polling app

2 "page"

Lorem Ipsum?

Mollit nulla deserunt?

Laborum in reprehenderit?

Lorem Ipsum?

Minim Lorem culpa​?

Home - Question List

"page" 1

Answer 1 

Answer 2

Answer 3

5

3

2

Lorem Ipsum?

Answer 1 

Answer 2

Answer 3

Question

"page" 2

Specs

  • my vote changes bar chart real-time
  • others' votes change bar chart real-time

app

architecture

App

API

rest & socket.io

render in browser

render on server

high level

App

API

rest endpoints

db

local app state

UI components

socket endpoints

service clients

JSON

API

App

tools & tech

app

  • node / browser
  • react
  • redux
  • redux-thunk
  • react-router
  • socket.io
  • helper utils

api

  • node
  • express.js
  • rethinkdb (client)
  • socket.io

data contracts

between app and api

[
    {
        "id": "5694c574-0348-45dd-bde0-2e05563712fe",
        "question": "What's your favorite America?"
    },
    {
        "id": "5e0ca5e0-d31c-418f-a4eb-79747d03d6fd",
        "question": "Where should we go to lunch?"
    },
    {
        "id": "6fed2bae-4325-4e2b-8c93-0662d8dcd682",
        "question": "Would you like fries with that?"
    },
    {
        "id": "2c703db8-3912-4690-a553-5dfb59269a6d",
        "question": "Who would win in a fight?"
    }
]

GET /v1/questions/list

{
    "id": "5e0ca5e0-d31c-418f-a4eb-79747d03d6fd",
    "options": [
        {
            "id": 0,
            "responses": 0,
            "text": "Cubbies"
        },
        {
            "id": 1,
            "responses": 0,
            "text": "Lonestar"
        },
        {
            "id": 2,
            "responses": 0,
            "text": "J & C"
        },
        {
            "id": 3,
            "responses": 0,
            "text": "SmashBurger"
        },
        {
            "id": 4,
            "responses": 1,
            "text": "The Pie"
        }
    ],
    "question": "Where should we go to lunch?"
}

GET /v1/questions/:id

[
    {
        "option": 1,
        "question": "6fed2bae-4325-4e2b-8c93-0662d8dcd682",
        "user": "14289a42-13fc-452c-9c72-328b75c6b1b3"
    }
]

GET /v1/answers/user/:id

{
    "user": "bcdf879d-6fc1-4186-8062-85ca42c8cc93",
    "option": 0
}

POST /v1/questions/:id/answers

{
    "type": "delete",
    "data": {
        "id": "74d6f9c2-44d9-4146-aa40-000d08e06a82",
        "option": 4,
        "question": "5e0ca5e0-d31c-418f-a4eb-79747d03d6fd",
        "user": "c23c8b9e-fd52-490b-a940-4c7bef2e7ac8"
    }
}

ws /

event name: "answers.change"

{
    "type": "create",
    "data": {
        "id": "49100db7-d5f6-4568-8e71-756494338459",
        "option": 3,
        "question": "5e0ca5e0-d31c-418f-a4eb-79747d03d6fd",
        "user": "c23c8b9e-fd52-490b-a940-4c7bef2e7ac8"
    }
}

react

components

App

API

rest endpoints

db

local app state

UI components

socket endpoints

service clients

JSON

You Are Here

UI components

=

let's build this

Answer 1 

Answer 2

Answer 3

5

3

2

Lorem Ipsum?

Answer 1 

Answer 2

Answer 3

Question

"page" 2

Answer 1 

Answer 2

Answer 3

5

3

2

make this bar chart

live code

the <BarChart/> component

the other components

code review

Usage Examples

<HomeLayout
    questions={[
        {
            text: "Quis ut amet excepteur exercitation incididunt ?",
            href: "#123",
            size: 1
        },
        {
            text: "Aute aliquip proident sunt ipsum reprehenderit elit?",
            href: "#123",
            size: 3
        },
        {
            text: "Nisi consectetur ex magna id?",
            href: "#123",
            size: 2
        }
    ]}
/>
<QuestionLayout
    id={1234}
    text="Pick a number between 1 and 4?"
    name="test"
    options={[
        { id: 1, value: 1, label: "One", qty: 7 },
        { id: 2, value: 2, label: "Two", qty: 5 },
        { id: 3, value: 3, label: "Three", qty: 2 },
        { id: 4, value: 4, label: "Four", qty: 6 }
    ]}

    onVote={action("Changed")}
/>

api

App

API

rest endpoints

db

local app state

UI components

socket endpoints

service clients

JSON

You Are Here

db overview

Data Explorer

Show Tables

CRUD example

Show `.update()` functionality

show our data models

API: /src/libs/models/db.js

code review

live code

src/routes/questions.js

GET /v1/questions/list

api

live code

src/routes/questions.js

GET /v1/questions/:id

api

code review

src/routes/questions.js

POST /v1/questions/:id

api

API: /src/routes/answers.js

code review

code review

API: /src/server.js

inspect endpoints

app

data retrieval

App

API

rest endpoints

db

local app state

UI components

socket endpoints

service clients

JSON

You Are Here

code review

src/app/services/

jump to 06-services

review

templates/

redux

a predictable state container for JavaScript apps

App

API

rest endpoints

db

local app state

UI components

socket endpoints

service clients

JSON

You Are Here

redux

single source of truth

state is read-only

derived new state

const {questions} = store.getState()
(state=0, {type}) => {
    switch (type) {
        case INCREMENT:
            return state+1;
        default:
            return state
    }

change requests dispatched 

store.dispatch({type: INCREMENT})

subscribe to changes

store.subscribe( () => 
    store.getState()
)
questions.addAnswer(1);

Redux?!

Redux offers a tradeoff. It asks you to:

  • describe application state as plain objects and arrays.
  • describe changes in the system as plain objects.
  • describe the logic for handling changes as pure functions.

In return:

  • predictability
  • decoupled architecture
  • scalability
  • change resilient
  • clarity
  • maintainability
  • shareable data
  • LOTS more

potentially more boilerplate & indirection, but generally worth it :)

Redux Lingo

  • Actions: plain objects that describe the desired change of state
  • Action Creators: helper functions that create actions
  • Reducers: functions that accept current state & action objects and returns new state
  • Selectors: helper function for selecting pieces of data from the store 

our app's data store:

data our app needs

  • question summaries
  • question details
  • answer stats
  • my own answers
  • my user info

action types

RECEIVE_MY_ANSWERS RECEIVE_ANSWER_TALLY RECEIVE_ANSWER_INCREMENT RECEIVE_ANSWER_DECREMENT

 

RECEIVE_QUESTION_SUMMARY RECEIVE_FULL_QUESTION

 

RECEIVE_USER_PROFILE

(events) that change our app state

code review

src/app/store/constants.js

jump to 07-store-constants

action types

live code

src/app/store/reducers/questions.js

src/app/store/index.js

a reducer

redux dev tools

demo

{
    type: 'RECEIVE_QUESTION_SUMMARY',
    payload: {
        id: 1234,
        question: "Where should we go to lunch?"
    }
}

live code

src/app/store/actions/questions.js (part 1)

an action-creator

code review

src/app/store/reducers/user-profile.js

src/app/store/reducers/answers.js

src/app/store/index.js

11-actions-almost-finish

more reducers

code review

src/app/store/actions/user-profile.js

src/app/store/actions/answers.js

more actions

live code

src/app/containers/app.js

a "container"

code review

src/app/containers/home.js

another "container"

13-home-container

code review

src/app/store/actions/questions.js*

src/app/containers/app.js*

src/app/containers/question.js

src/app/routes.js*

final product

app demo

if internet, go to:

http://10.228.251.173:8888

Video

if things went badly...

React Quiz Live

By Jared Anderson

React Quiz Live

  • 1,369

More from Jared Anderson