Skip to content

A simplified version of Google Forms application frontend written with React.js

Notifications You must be signed in to change notification settings

rlengvenis/survey-app-frontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

90 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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