SWIFTORY

An experimental project using micro frontend architecture, cross-app communication, and hand-crafted landing pages for some of Taylor Swift's most recent albums. Explore the albums, find artists that contributed to that album and collect their work by adding it to your Jukebox!

Demo

swiftory.ansonlichtfuss.com

Features

Micro frontend functionality and client side routing supplied by single-spa.
Built using ReactJS and Svelte.
Communication between apps using custom browser events.
Fluid animations and transitions powered by Framer Motion.
Performance optimized through CDN caching (thanks B2 + Cloudflare) and image preloading.
Root micro frontend app deployed with Vercel (child app bundles load through the CDN).
Deduplicated dependencies (react, react-dom, and framer-motion) for less redundant JS downloading.
Shared components and utils with fully functional Typescript types and autocomplete.
Browser sessionStorage for hiding splash screens and persisting user selections.

Run Locally

Clone the project

  git clone https://github.com/ansonlichtfuss/swiftory

Go to the project directory

  cd swiftory

In every subfolder except `@types`, run:

Install dependencies

  npm install

Start the server

  npm run start

The above command can be run in the root directory to execute all services simultaneously as well.

Authors

@ansonlichtfuss