Movie Radar 🎬 (NextJS)

Welcome to Movie Radar – a modern, fully responsive movie discovery platform built with Next.js. Movie Radar lets you explore trending films, view detailed movie information, search by keyword, and dive into cast and crew details with a clean, professional UI.

Screenshots

Landing Page:

Internal Page:

Features

• Trending & Top Rated Movies: Browse popular and highly rated films with a single click.

• Search Functionality: Find movies by title or keyword with instant, real-time results.

• Movie Details: View comprehensive information for each movie, including synopsis, genres, release date, runtime, and ratings.

• Cast & Crew: Explore detailed cast and crew listings for every movie.

• Responsive Design: Fully optimized for desktop, tablet, and mobile devices.

• Dark/Light Mode: User-friendly theme toggle for comfortable viewing in any environment.

• Professional UI: Clean, modern interface with smooth animations and intuitive navigation.

• Production Insights: Learn about the companies and countries behind each film.

Technologies Used

• Next.js: React framework for server-side rendering and static site generation.

• Tailwind CSS: Utility-first CSS framework for rapid, modern styling.

• TMDB API: The Movie Database API for real movie data and images.

• Vercel: Free deployment platform for Next.js applications.

Installation

1. Clone the repository to your local machine:

git clone https://github.com/nipun-munasinghe/movie-app-next

2. Navigate to the project directory:

cd movie-app-next

3. Install and run:

npm install
# or
yarn install

4. Set Up Environment Variables:

• Create a .env.local file in the project root.
• Add your TMDB API key:

API_KEY = your_tmdb_api_key_here

5. Start the Development Server:

npm run dev
# or
yarn dev

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

Learning Experience

• Next.js Fundamentals: Gained hands-on experience with file-based routing, server-side rendering, and API integration.

• Responsive Design: Learned to build layouts that work seamlessly across all device sizes.

• API Integration: Successfully integrated and utilized the TMDB API for real-time data.

• Environment Variables: Understood the importance of securely managing API keys and sensitive data.

• Deployment: Deployed a Next.js project to Vercel, including setting up environment variables and custom domains.

• Error Handling: Implemented user-friendly error pages and fallback states for a smooth user experience.

Acknowledgements

I would like to express my gratitude to the creators of the amazing resources I used in this project. Special thanks to:

• TMDB API: For providing comprehensive movie data.

• Next.js Documentation: For clear, beginner-friendly guides and examples.

• Tailwind CSS Documentation: For easy-to-use utility classes and responsive design patterns.

• Vercel: For free, easy deployment of Next.js projects.

• Open Source Community: For countless tutorials, forums, and supportive discussions that helped me learn and troubleshoot.

Contributing

Contributions are welcome! If you'd like to improve this project, follow these steps:

1. Fork the repository
2. Clone your forked repo

git clone https://github.com/nipun-munasinghe/movie-app-next

3. Create a new branch

git checkout -b feature-name

4. Make your changes and commit

git add .
git commit -m "Added a new feature"

5. Push the changes

git push origin feature-name

6. Create a pull request and wait for review!

Contact

• Developer: Nipun Munasinghe
• LinkedIn: Nipun Lakmal
• Email: [email protected]
• GitHub: nipun-munasinghe