ReactJS: SimpleMPA

"SimpleMPA" is sample code of a multi-page app for React.

The business use case is to separate the main app (for paid users) from other pages (for marketing use).
Examples: an SPA is built as the main app (where users login) and there is a requirement of a landing
page for a blog & promotions (outside the main app). You are tasked to re-use existing SPA code,
as much as possible, and to ensure the UI/UX remains the same.

This repo is for Web built using create-react-app (see docs). It can be used as
starter-kit for the MPA or combined with an SPA monorepo, like SimpleApp for
Mobile use on iOS & Android.

Installation

• Get the repo
• From root directory, do yarn
  Required Basic ReactJS knowledge. If repo user needs review, please read this

Run

For web, from the root directory, do

• node_modules/.bin/webpack -p --progress
• node_modules/.bin/webpack-dev-server --content-base public/ --config ./webpack.config.js --inline --hot --colors
• Manually open a browser to localhost:8080 to see webapp

Demo & Animated GIFs

• Live Demo at Firebase Hosting
• Google PageSpeed Analysis (desktop | mobile)
• SimpleMPA on iOS
  
• SimpleMPA on Android
  
• SimpleMPA Webapp
  

Notes - Development

• ServiceWorker (for PWA) not used
• CSS is mix of custom code and MUI
• Loaders are custom CSS + JS (ReactJS not used)
• If Dynamic Footer needed, please see Oreni for inspiration
• Sample photos & placeholder text obtained via external APIs (photos | text)
• Assets (from graphic designer, writers, editors, etc.) are copied during build process.
• Custom components for Header & Footer used. Can be refactored or expanded as needed.
• SEO can be edited manually per page or on minor refactor, pulled from database during build process.

Inspiration

• Ultimate Death Match: SPA vs MPA
• Static website, multiple pages using webpack
• How OkCupid organizes its multi-page React app
• The Difference between Single-Page and Multi-page Apps