Filmetryx

The main objectives behind building Filmetryx were:

🎬 Intuitive Discovery: Find movies and TV shows easily with detailed info and recommendations.
🚀 Modern Tech Stack: Built with Next.js 14, TypeScript, and Server Components for speed.
✨ Personalized Experience: Create accounts to save favorites and track your watchlists.
⚡️ Blazing Fast Performance: Optimized for quick loading and smooth interactions.
📱 Seamless on Any Device: Fully responsive, mobile-first design.
🌐 TMDB API Integration: Connects to a real-world movie database for rich content.

Next.js 14: React framework with App Router for modern routing and server-side rendering
Tailwind CSS: Utility-first CSS framework for rapid styling
NextAuth.js: Complete authentication solution for Next.js applications
TMDB API: The Movie Database API for movie and TV show data
avvvatars-react: avatar generation for user profiles

Dynamic carousel of trending movies, sections for Popular/Top-Rated Movies & TV. Includes infinite scroll (Load More).

Secure TMDB token login and JWT-based session management. Includes demo account (filmetryx/1234).

Comprehensive data: title, rating, summary, cast, crew, videos (trailers), galleries, and user actions (Add to Favorites/Watchlist).

Complete cast/crew list with photos and character roles.

Displays series info, all seasons, episode counts, and aggregated cast/crew.

Actor bio, images, most known for credits, and a full, searchable filmography.

Collection name, description, poster.

Universal search across Movies and TV. Features advanced filters (e.g., year), debounced input with real-time suggestions.

Account info, generated avatar, and dedicated tabs for managing Favorite Movies and Favorite TV Shows with interactive removal actions.

I successfully built Filmetryx by solving several key technical problems:

I created a custom NextAuth.js system to handle the complex, multi-step TMDB authentication flow, and added a demo account for easy exploration.
I managed the distinct and complex data structures of movies, TV shows, seasons, and episodes by creating unified TypeScript interfaces and flexible, adaptable components.
I ensured a great experience on every screen with a mobile-first design built with Tailwind CSS, using responsive grids and custom breakpoints.
For the search, I implemented debouncing and built a combined, responsive interface for fast, accurate results across all media types.
Finally, I maintained UI/UX consistency across the app using a comprehensive design system built on shadcn/ui and used Framer Motion for cohesive animations.

Project