Survey app is a simplified alternative to Google Forms written with React.js.
Related to: survey-backend
Live demo: survey-app.lengvenis.me
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.
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 testscomponents
- organized by page and testsconfig
- cofiguration filesconstants
- action types and other constantsmodels
- normalizr modelsreducers
- reducers and their testsselectors
- selectors used to select domain objects from normalized datastyles
- css styles written using BEM and SCSSutils
- global utils
More reasoning on folder structure: The 100% correct way to structure a React app (or why there’s no such thing)
BEM methodology was used for writting CSS styles. CSS styles are located under src/styles
folder. General structure is:
core
- css variables and resetlayouts
- reusable container layoutsmodules
- reusable modulespages
- 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
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 nativeJest
due toJest
issues while usingjsdom
and rendering canvas related elements to DOM.
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 |