client

Streamy - 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

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

npm start

Runs 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 (StreamList Component)

Show Stream (StreamShow Component)

Index (StreamList Component)

Create Stream (StreamCreate 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