5calls

Table of Contents

• Development
  • Front End
  • Application Server
  • Quality Assurance
    • JavaScript Unit Tests
    • End-to-end Integration Tests
    • JavaScript Linting
• Contributor Guidelines
• Contributors
• Other Client Projects

Development Notes

The frontend is written in React with Redux for state management and Typescript for type safety and documentation. The application server back end -- for data processing -- is written in Go.

To build the application, you need to install Yarn and run the following commands:

# install dependencies and
#   compile .scss files to .css:
yarn

# Run unit tests in watch mode
yarn test

# Run unit tests with a code coverage report
yarn test:coverage

# start the app running in the
#   webpack development server:
yarn start

# start the app running in https mode
#   (needed for browser geolocation):
yarn start:https

# build the app into build folder
#  for server deployment:
yarn build

# any updates to .scss files need
#  to be compiled to css using:
yarn clean-build-css

Using yarn add to add new dependencies will throw an error related to node-sass-chokidar, which can be ignored.

For the best development experience, you should install both the React and Redux Development Tools extensions into your browser. Both browser extensions are available for Chrome and Firefox.

Unit testing

Unit testing in this repository is done using Jest with Enzyme in addition to the redux-mock-store library to support Redux-related tests.

Architecture, Data Flow and Strong Typing

A selection of files in this repository include code comments describing the architecture, data flow and strong typing conventions used in developing the React-Redux-TypeScript version of the 5 Calls application. These include files that illustrate the following (see the individual files for more details):

Use of TypeScript to Strongly Type Request Parameters Passed by React-Router

Also illustrates the use of Redux to loosely couple a component to data passed to its props.
CallPageContainer.tsx
CallPage.tsx

Data Flow through a Component Heirarcy

Also note the TypeScript conventions used in these files.
CallPageContainer.tsx
CallPage.tsx
Why5calls.tsx

Redux Data Flow

See code comments containing the token 'REDUX DATA FLOW'. Also note the use of TypeScript in these files.
CallPageContainer.tsx
redux/callState/action.ts
redux/callState/actionCreator.ts
redux/callState/reducer.ts

Contributor Guidelines

Contributions to this repository are welcome. Please see the Contributing.md file in the 5calls/5calls repository for information on contributing to this repository.

Contributors

• Nick O'Neill
• Matt Jacobs
• Liam Campbell
• James Home
• Beau Smith
• Anthony Johnson
• Craig Doremus
• Owen Derby
• All contributors

Other Client Projects

• Android
• iOS

Create React App Code Generation

This project was created with create-react-app (CRA, react-scripts ver 1.0.0) using react-scripts-ts (ver 2.2.0) to add TypeScript support. In addition, the node-sass-chokidar library was added for preprocessing of SASS (.scss files) to CSS.

Subsequently, the CRA-created configurations were exposed using the eject command (yarn eject). This created the config and scripts folders and added dependencies and other configurations to package.json.

CRA_README.md is the original README.md file created when the create-react-app command was run.