The Movie Buff : A Single-page Progressive Web App (PWA) built using React, Redux, Service Worker, Workbox, Webpack3, Express and NodeJS.

Live Demo

Key concepts used in the application

• PRPL pattern with minimal application core
• Route based chunking with React Router 4 and import()
• Automatic common chunk bundling
• CSS Modules
• Service Workers management using Workbox
• Webpack 3

Lighthouse audit score

Webpack performance budgets

There is a webpack configuration to warn us if any of the chunk exceeds 300kB, thereby impacting user experience:

performance: {
  maxAssetSize: 300000,
  maxEntrypointSize: 300000,
  hints: 'warning'
}

Application architecture/ Technical stack

The REST API powering the app is hosted as a standalone application built using Express and NodeJS. Here is the code. The frontend is a SPA built using React, Redux that is served using a bare minimum express server.

Following are the key technologies used in the frontend and backend:

Frontend

• React 16.x
• Redux
• Redux Thunk
• React Router 4
• Webpack 3
• Workbox
• Prettier
• Materialize CSS
• PostCSS
• SASS
• Lodash

Backend

• NodeJS
• Express JS

Auditing

• Lighthouse

Yarn scripts

yarn install - Installs dependencies
yarn run dev - Starts the Webpack dev server
yarn run start - Starts an Express server to serve our app
yarn run build - Builds the app for deployment
yarn run lint - Lints src/
yarn run lint:fix - Lint check + Fix errors

MIT Licensed