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