This Movie Explorer app was created as part of an interview assignment, showcasing a streamlined and engaging platform for movie discovery. Built with Next.js and leveraging modern web development practices, the application is designed to deliver a smooth and responsive experience for users, whether they’re browsing the latest releases or searching for specific titles.
One of the app’s core features is the infinite scrolling on the homepage, allowing users to explore a seemingly endless list of popular movies without any interruptions. When users enter a movie title in the search bar, they’re instantly presented with relevant results, also displayed in an infinite scrolling format for a consistent experience.
The movie detail pages provide comprehensive information about each film, including a list of recommended titles based on the selected movie. The app uses Server-Side Rendering (SSR) for fast initial loads and Incremental Static Regeneration (ISR) to ensure data freshness without reloading the entire page, enhancing both performance and user engagement.
For those wanting a more personalized experience, the app includes a watchlist and favorites feature. Users can easily add or remove movies, with changes reflected immediately on the UI through an optimistic update approach. This feature is managed by server actions to ensure data persistence, creating a seamless and interactive interface.
On the technical side, the app is built with a clean, modular codebase that emphasizes performance optimization. It achieved a Lighthouse performance score of 98+, thanks to image optimization and other code refinements. Deployed on Vercel, this app is not only efficient but also highly scalable, ready to handle a large user base and rapid data updates.
Technologies
- Next.js 15
- React
- TypeScript
- Tailwind CSS
- ISR, SSR, Image optimization
- performance scoring (Lighthouse score of 98+)