Update to CRA-v2, and new project structure

[handshou]

Will update with changelog

Updated (26/10):

1. New project structure

• Reduced number of folders
• Moved css files, to a nested css folder within component folder
• Updated .gitignore, to no longer track package-lock.json and .idea dot-files.
• Renamed .jsx files to .js (aligning to this convention)
• .css files are now infixed with .module (i.e. name-of-css.module.css) to take advantage of css-modules when compiling production code in react-scripts@2.0.0 and above.

/ ...
└── src
    ├── actions
    │   ├── ...actions.js
    │   └── index.js
    ├── components
    │   ├── css
    │   │   └── ...example.module.css
    │   ├── App.js
    │   ├── PrivateRoute.js
    │   └── ...PageComponents.js
    ├── constants
    │   ├── ...constants.js
    │   └── index.js
    ├── reducers
    │   ├── ...reducer.js
    │   └── index.js
    ├── resources
    │   └── (images)
    ├── services
    │   ├── ...service.js
    │   └── index.js
    ├── helpers
    │   ├── auth-header.js
    │   ├── fake-backend.js
    │   ├── history.js
    │   ├── index.js
    │   ├── serviceWorker.js
    │   └── store.js
    ├── index.html
    └── index.js

2. Service Workers

We are taking advantage of Service Workers to take our first step towards a Progressive Web App, PWA!

For our PWA needs, we will aim to accomplish the following:

• Caching for offline use (Serviceworkers)
• Push notifications (Push API), see this
• Payment request (Payment Request API)

To see caching in action:

• Run app in production mode by using

npm run build
serve -s build

• Open Chrome's inspection menu (right click -> inspect)
• Locate 'more options' on the toolbar
• Click on Application
• Select Service workers
• Toggle 'offline'
• Navigate the app, it still works without showing the 404!

3. Material-UI

still work in progress

Will look at Material-UI updates from Quan and Shuxuan, before merging PR.