Skip to content

Latest commit

 

History

History
97 lines (66 loc) · 3.94 KB

README.md

File metadata and controls

97 lines (66 loc) · 3.94 KB
Raw

Survey app frontend

Survey app is a simplified alternative to Google Forms written with React.js.

Related to: survey-backend

Demo

Live demo: survey-app.lengvenis.me

Scripts

Webpack configuration is based on create-react-app boilerplate.

Install dependencies using yarn or npm manager:

yarn install

Start development version:

yarn start

For building a production version use:

yarn build

Note: survey-backend instance has to be running on localhost:3001 for application to work.

Design notes

Folder structure

Due to a specific domain, reducers and actions are reused on different pages, therefore they are put to src/reducers and src/actions folder appropriately. In general domain/feature/page oriented component file structure is used:

  • actions - actions and their tests
  • components - organized by page and tests
  • config - cofiguration files
  • constants - action types and other constants
  • models - normalizr models
  • reducers - reducers and their tests
  • selectors - selectors used to select domain objects from normalized data
  • styles - css styles written using BEM and SCSS
  • utils - global utils

More reasoning on folder structure: The 100% correct way to structure a React app (or why there’s no such thing)

CSS design

BEM methodology was used for writting CSS styles. CSS styles are located under src/styles folder. General structure is:

  • core - css variables and reset
  • layouts - reusable container layouts
  • modules - reusable modules
  • pages - page dependant styling

Plain BEM was used due to the fact that BEM methodology itself solves global namespacing and other issues. Styled-components is an option I will consider using in future app versions.

More reasoning about CSS usage: Stop using CSS in JavaScript for web development

Unit tests

src/setupTests.js holds project test env configuration. Technologies used:

  • enzyme - a wrapper for React test utils
  • chai - assertion library
  • mocha - a test framework
  • jsdom - a javascript DOM implementation

Component functionality was tested with focus to regression vulnerable logic. One action creator and one reducer where tested for example purposes.

Note: I have used Mocha instead of create-react-app native Jest due to Jest issues while using jsdom and rendering canvas related elements to DOM.

Features log

Feature Status References
JWT authentification DONE jwt.io
BEM and SCSS DONE getbem.com
Redux-form and validation DONE github.com/erikras/redux-form
Data normalization DONE github.com/paularmstrong/normalizr
Fetch for API calls DONE github.com/github/fetch
Async/await presets DONE MDN Async Functions
Router v4 DONE github.com/ReactTraining/react-router
Redux selectors DONE Computing Derived Data
Mobile version DONE
Unit tests DONE
Error handling DONE
Offline usage and workers
RxJS and Observable
Docker container