Skip to content

The Movie Buff - A Single-page Progressive Web App built using React, Redux, Workbox, Webpack, Express and NodeJS.

Notifications You must be signed in to change notification settings

RajaPradhan/moviebuff

Repository files navigation

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

Live Demo

Demo of the app

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

Screenshot of Lighthouse audit

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'
}

Screenshot of Performance Budget

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

Backend

Auditing

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