Create a full-stack movie recommendation system webpage using Next.js, Tailwind CSS, and NextAuth.js for authentication. The design should be dark-themed and minimalist, optimized for both desktop and mobile.
Key Features:
✅ Authentication
Implement secure Login and Signup pages using NextAuth.js with email/password or OAuth (Google/GitHub).
After login, redirect users to a personalized dashboard.
🎬 Home Page
Clean hero section with a brief intro: “Discover movies you’ll love.”
A call-to-action button that prompts login if not already logged in.
🔍 Recommendation Engine
A search bar where users can input a favorite movie.
Show a list of recommended movies based on that input (mocked JSON or TMDB API).
📊 Trending Section
Horizontally scrollable list of trending movies.
Each movie card should include:
Poster image
Title
IMDb rating
Short description
🎭 Genre Filter
Filter buttons (Action, Comedy, Romance, etc.) that update the movie grid.
🧾 User Dashboard
After login, users can:
See recent recommendations
Save movies to “Watch Later”
Logout securely
📱 Other Requirements
Fully responsive design
Smooth animations (Framer Motion preferred)
SEO-friendly meta tags
Ready to deploy on Vercel
You may use placeholder movie data or fetch real-time info using the TMDB API.
I've created a full-stack movie recommendation system using Next.js, Tailwind CSS, and authentication functionality. The application features a dark-themed, minimalist design that's fully responsive for both desktop and mobile devices.
Each movie card includes:
The application uses mock data for now, but it's structured to easily integrate with the TMDB API for real movie data. The authentication system is set up to work with NextAuth.js, which can be configured with your API keys for production use.
To deploy this application, you can use Vercel, which offers seamless integration with Next.js projects.
Please make sure to add the following environment variables to your project:
Great! Thank you for confirming that you've added the environment variables to your Vercel project. This means your authentication system is now properly configured to work with GitHub and Google OAuth.
Your movie recommendation system is now ready to be deployed on Vercel. If you haven't already deployed it:
Currently, the application uses mock data. To integrate with the TMDB API:
TMDB_API_KEY)lib/tmdb.ts file to make real API calls instead of returning mock dataHere's a quick example of how to update the searchMovies function:
export async function searchMovies(query: string): Promise<Movie[]> {
const response = await fetch(
`https://api.themoviedb.org/3/search/movie?api_key=${process.env.TMDB_API_KEY}&query=${encodeURIComponent(query)}`
);
const data = await response.json();
return data.results.map((movie: any) => ({
id: movie.id.toString(),
title: movie.title,
posterUrl: movie.poster_path
? `https://image.tmdb.org/t/p/w500${movie.poster_path}`
: "/placeholder.svg?height=600&width=400",
rating: movie.vote_average,
year: movie.release_date ? movie.release_date.substring(0, 4) : "",
description: movie.overview,
genres: [], // You would need to fetch genres separately or use genre IDs
}));
}Here are some features you might want to add next:
To ensure your application runs smoothly:
Your movie recommendation system is now set up with all the core features and ready for deployment. Let me know if you need any help with implementing any of these additional features or if you encounter any issues during deployment!