Modular web app

Netflix Clone using microfrontends

Piral React Typescript Microfrontends

Netlify Status

A Netflix clone using  React and  Piral

Read more: In this DEVCommunity article, I go over my experiences.

Application overview

You can find the application online on netflix.deruwe.me.

This application is a Netflix clone with some basic functionalities.

  • There is a Browse page where the user can discover showcases of trending series and movies, top-rated ones, etc.
  • Clicking a tile brings you straight to the Watch page.
  • Of course, to find a specific movie or series, the user can also use the provided Search bar.
  • Every media tile also has a Favorites toggle in the top right corner. Clicking it adds the series or movies to the user’s favorites list, to be found on the favorites page.
  • The user can switch accounts via the Profile option in the top right. All favorites are linked to the specific account.

It is worth noting that this demo project does not come with a custom backend: all data is coming from a 3rd party API, the accounts are dummy accounts, and the favorites are stored in localstorage.

Mentions

This is the main repository for this web app. In this app shell, all microfrontends are integrated.

App shell

This project consists of multiple microfrondends (in the Piral framework called “Pilets”). You can find the code for them here:

Browse pilet  Profile pilet  Watch pilet  Favorites pilet  Search pilet