tmdb-task

Important links

• Live link
• Pagespeed insight

Future improvements

• More sophisticated colors for dark and light mode
• Improve LCP
• Improvement to error handling (capture errors w/ sentry)
• Better loading UI
• Better code colocattion and overall structure
• Improved accessibility

Todos

• Build a responsive movie search and details app using Next.js 13/14 and the TMDB API.

Homepage: /

• Implement infinite scrolling or a load more button on the homepage (Client-Side Pagination)
• Search bar in homepage

Movie details page: /movies/[id]

• Should be dynamic route
• Use SSR with ISR
• Show ecommendations (ISR)

Favorites/Watchlist with Server Actions /watchlist

• Using server action add to Favorites/Watchlist (store in localstorage)

OPTIONAL

• Dark mode toggle
• Global state using context or zustand

EXTRA (ADVANCED)

• Zod for API Response Validation
• React Hook Form for Search
• Dynamic Caching for API Calls
• Optimistic UI for Watchlist
• Middleware for Authentication (protect /watchlist)

Prerequisites

• Node.js v18.17.1
• Git v2.3+
• Prettier editor integration

Install & development

1. Clone repository

git clone https://github.com/farhan2077/tmdb-task

2. Change directory

cd tmdb-task

3. Install dependencies

npm install

4. Add environment variables similar to .env.example

5. Start development server

npm run dev

Open http://localhost:3000 in your browser.