Next Movie Save

An example Next.js 13 app built using the new router, server components, and all the latest hotness. 🔥

• About
• App Features
• Implementation Features
• Screenshots
  • List View
  • Grid View
  • Single Movie View
• Roadmap
• Movie Database
• Contributing
• License

About

Building a better app for finding great movies has been on my proverbial todo list for awhile. With Next.js 13's paradigm shift, I thought it'd be the perfect time to build it and open source my learnings along the way.

Check it out live here.

App Features

• Advanced movie search by rating, genre, release date, etc
• All movies include YouTube trailers
• Most movies include IMDB rating, RT audience score, and RT critic score
• Supports grid view, list view, and single movie view
• High quality movie database

Implementation Features

• New /app dir
• Blurred image placeholders
• Dynamic OG images
• Dark mode
• Hosted on Vercel
• ORM using Prisma + Postgres
• UI components built using Radix UI
• Styled using CSS Modules
• Data fetching using SWR
• Validations using Zod
• Written in TypeScript
• Fully Open Source

Screenshots

List View

Grid View

Single Movie View

Roadmap

Warning This app is a work in progress. I'm building this in public. You can follow the progress on Twitter @transitive_bs.

• Movie database
• Search functionality
• Grid view
• List view
• Single view (original idea for browsing movies using a "next movie" button)
• Dynamic OG images for movies
• Dynamic OG images for genres
• Dark mode
• About page
• Mobile friendly

Post-v1.0:

• Streaming service availability + filters
• Add TV series
• Advanced search by language, country, etc.
• Better movie detail page design
• Person detail page
• User auth and accounts
  • Watchlist
  • Seen list + user ratings
• Improve text search (fuzzy + weighting)
• Weight single view movie selection by relevancyScore
• Automate scripts to keep movie DB up-to-date
• Improve access to Rotten Tomatoes metadata
• Add top X movies pages

Movie Database

Under the hood, next-movie uses populate-movies to generate it's high quality movie database, featuring:

• ~73k movies (filtered from ~750k TMDB "movies")
• Metadata from TMDB, IMDB, and Rotten Tomatoes
• Automatable pipeline
• Custom post-processing
  • Selects the best available YouTube trailer for every movie
  • Relevancy scores using a combination of popularity, rating, and release date
  • Nuanced foreign movie detection that looks at more than just language/country
  • LQIP preview image generation for all movie images
  • Basic text index for searching
• Open source using TS + Prisma + Postgres

Contributing

See the contribution guide and join our amazing list of contributors.

License

MIT © Travis Fischer

Support my open source work by sponsoring me or following me on twitter