A non-trivial learning app in Next.js, Angular or Nuxt.js
You may also be interested in additional TMDB apps using SvelteKit (Demo) or Lit (Demo)
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 both help on the Core Web Vitals 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!
Views include:
- Popular Movies - with pagination or infinite scroll
- Individual Movies - with recommendations, cast, and more.
- Cast member/Actor with history
- Categories - popular, TV/Movies and more.
- Search - find, filter, sort movies. Paginated.
- Authentication with TMDB - login, logout (Next.js)
- Lists - create new lists (Next.js)
- Lists - view all your saved lists (Next.js)
- Lists - add/remove/edit lists (Next.js)
Screenshots
Category view for Popular (Desktop):
Category view for Popular (Mobile):
Search Results for "Mortal Kombat" (Desktop)
Movie view for "Mortal Kombat" (Desktop)
Movie view in Light and Dark Modes (Mobile)
Category view for "TV/Movies" (Desktop)
Category view for "Recommended" (Desktop)
Actor view (Desktop)
Actor view (Mobile)
Movies view for Light Mode (Desktop)
Popularity view in dark mode (Desktop)
Logged-in view for creating a list of movies (Desktop)
Logged-in view of a single saved list of movies (Desktop)
Logged-in view of all of your lists of movies
Logged-in view for editing a list of movies (Desktop)
Performance Optimizations
Next.js - Optimized Largest Contentful Paint (trace)
PageSpeed Insights - Lighthouse Perfomance Score (90/100)
Nuxt.js - Optimized Largest Contentful Paint (trace)
PageSpeed Insights - Lighthouse Perfomance Score (80/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 and Fidalgo for react-movie-library.
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.