client

Streaming service React client

This is the React Client for the live video streaming service

Tools Used

• react-js [Ref]
• Google API Ref Script Location
• redux, react-router-dom, redux-form
• axios, redux-thunk
• flv.js [Ref]
• Semantics UI (for CSS) [Ref]

Full list: package.json

Running the project

In the project directory, you can run:

npm ci

Install the required packages in node_modules directory from the package-lock.json file

npm start

Run 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.

User States

Mockups

Index

Show Stream (StreamShow Component)

Index (StreamList Component)

Create Stream (StreamEdit Component)

Edit Stream (StreamEdit Component)

Delete Stream (StreamDelete Component)

React Components

main file: index.js

• history
• App
  • Header
  • Modal
  • GoogleAuth
  • streams
    • StreamList
    • StreamForm
    • StreamShow
    • StreamCreate
    • StreamEdit
    • StreamDelete
  • apis
    • streams

Redux Components

Actions

List: types

• SIGN_IN

• SIGN_OUT

• CREATE_STREAM

• FETCH_STREAMS

• FETCH_STREAM

• DELETE_STREAM

• EDIT_STREAM

Definitions:

• index

Reducers

• index
  • authReducer
  • streamReducer

User Flow

TODO