Movie App v2 is a Next.js application leveraging the App Router, styled with Tailwind CSS, and offering optional user authentication through Clerk. The app supports both dark and light modes via next-themes and features a responsive navbar, movie and TV show grids, dynamic routes, search functionality, and advanced filtering and pagination.
- Next.js App Router for routing
- Tailwind CSS for styling
- Clerk for optional user authentication
- Dark and light mode support using next-themes
- Responsive Navbar with navigation links and theme toggle
- Movies Page displaying a grid of movies
- TV Shows Page displaying a grid of TV series
- Dynamic Routes for individual movie details
- Search Functionality to find specific movies or TV shows
- Filtering for Movies and TV Shows
- Pagination and filtering functionality
- Fetch Movies function with optional year and type filters
- Filter Buttons for All, Movies, Series, and 2023
- Grid Display of movie cards with links to individual movie pages
- Pagination Buttons (Previous and Next) that maintain current filters
- Page Counter showing the current page and total pages
- Live Search Results in the Navbar as the user types
- Dynamic Search Results Page that displays all results upon pressing enter or clicking the search button
- Related/Recommended Content on individual movie and TV show pages
Users can:
- Browse through all movies
- Filter by type (movie or series)
- Filter by year (2023 as an example, additional years can be added)
- Navigate through pages of results
- Click on a movie to view its details
This application uses the OMDb API, The Open Movie Database, to fetch movie and TV show data. The OMDb API provides a comprehensive database of movie and TV show information, including details such as titles, years, genres, directors, actors, plot summaries, and more.
- Clone the repository:
git clone https://github.com/Aliabdo6/movie-app-v2.git
- Install dependencies:
cd movie-app-v2 npm install - Add your OMDb API key to the environment variables:
NEXT_PUBLIC_OMDB_API_KEY=your_api_key
- Run the development server:
npm run dev
This project is licensed under the MIT License - see the LICENSE file for details.