Movies App Logo

A non-trivial learning app in Next.js, Angular or Nuxt

Demo - Next.js Demo - Angular Demo - Nuxt

You may also be interested in TMDB apps using SvelteKit (Demo), Lit (Demo) or Astro (Demo)

This is a comparison of the two different kinds of movie application implementations that are available. While there are visual differences from a feature perspective they have a lot of similarities

The Movies App is a non-trivial demo application built on top of the TMDB (The Movie Database) API. It features multiple routes and views, authentication, dark mode and a range of performance optimizations.

Our goal is to educate developers on how they can build a good user-experience that can deliver reasonable performance while maintaining good DX. We discourage using these apps for drawing apples to apples performance comparisons as they were not built with this use-case in mind.

Note: While every effort has been made to optimize performance, these applications are not considered perfect and can be impacted by TMDB API latency outside our control. Feel free to learn from them or contribute back if you spot something we could improve!

Bonus: If you are looking for a learning resource closer to the "Rosetta stone" for frameworks, look at component-party.dev.

Views include:

Screenshots

Category view for Popular (Desktop):

Category view for Popular (Desktop)

Category view for Popular (Mobile):

Category view for Popular (Mobile)

Search Results for "Mortal Kombat" (Desktop)

Screenshot

Movie view for "Mortal Kombat" (Desktop)

Screenshot

Movie view in Light and Dark Modes (Mobile)

Screenshot

Category view for "TV/Movies" (Desktop)

Screenshot

Category view for "Recommended" (Desktop)

Screenshot

Actor view (Desktop)

Screenshot of Movies app

Actor view (Mobile)

Screenshot of Movies app

Movies view for Light Mode (Desktop)

Screenshot of Movies app

Popularity view in dark mode (Desktop)

Screenshot of Movies app

Logged-in view for creating a list of movies (Desktop)

Screenshot of Movies app

Logged-in view of a single saved list of movies (Desktop)

Screenshot of Movies app

Logged-in view of all of your lists of movies

Screenshot of Movies app

Logged-in view for editing a list of movies (Desktop)

Screenshot of Movies app

Performance Optimizations

Next.js - Optimized

LCP happens several seconds prior to when it occurs in the original implementation

PageSpeed Insights - Lighthouse Perfomance Score (86/100)

Nuxt.js - Optimized

LCP happens several seconds prior to when it occurs in the original implementation

PageSpeed Insights - Lighthouse Perfomance Score (91/100)

Angular - Optimized

PageSpeed Insights - Lighthouse Perfomance Score (92/100)

Cast/Credits

A huge thanks to all our contributors for their help on optimizations, in particular:

 

Special thanks goes to Jason who wrote the original vue-movies, Fidalgo for react-movie-library, Wayne for the original SvelteKit Movie App and Hiten for Lit TMDB

 

These demo applications abide by the TMDB terms of service and should be used for learning purposes only.

License

Unless otherwise stated, demo applications are released under an MIT license, consistent with code made available via the TodoMVC/TasteJS GitHub organization.