🎬 ReelRadar

ReelRadar is a modern movie discovery platform built with Next.js 15, React 19, and Tailwind CSS. Designed with performance and usability in mind, it provides a fast and intuitive experience for discovering movies, browsing detailed information, and managing a personal favorites collection.

The application integrates the OMDb API while leveraging modern React and Next.js capabilities to deliver a responsive, SEO-friendly interface with clean architecture and an enjoyable user experience.

---

✨ Core Features

🔎 Powerful Movie Search

Search thousands of movies instantly using the OMDb API with real-time results and responsive interactions.

🎯 Advanced Filtering

Refine search results by release year and content type, making it easier to discover exactly what you're looking for.

🎬 Detailed Movie Pages

View comprehensive information for every movie, including:

• Plot summary
• Release year
• Genre
• Runtime
• Cast
• Director
• IMDb rating
• Poster artwork
• Additional metadata

❤️ Personal Favorites

Save movies locally to build your own watchlist. Favorites persist across browser sessions using local storage.

📄 Smart Pagination

Navigate through search results using a clean, user-friendly pagination system without sacrificing performance.

⚡ Modern User Experience

• Responsive layout for desktop, tablet, and mobile
• SEO-friendly rendering with Next.js App Router
• Fast page transitions
• Loading and empty states
• Custom 404 page
• Error boundaries for graceful error handling
• Toast notifications for user feedback

---

🛠️ Technology Stack

Frontend

• Next.js 15 (App Router)
• React 19
• TypeScript

Styling & UI

• Tailwind CSS
• UIVerse-inspired UI components

Data & APIs

• OMDb API
• Axios

Developer Experience

• ESLint
• Prettier
• Husky
• lint-staged

---

🏗️ Architecture Highlights

The project follows a modular architecture that separates UI components, business logic, and API communication for improved scalability and maintainability.

Application Structure

• App Router for file-based routing and layouts
• Reusable Components for shared UI elements
• Dedicated API Layer for all OMDb communication
• TypeScript Models for type-safe development
• Utility Libraries for shared helpers and business logic

---

📁 Project Structure

app/
├── about/
├── favorites/
├── movie/[id]/
├── layout.tsx
└── page.tsx

components/
├── Header
├── Footer
├── SearchInput
├── Dropdown
└── ResultGrid

library/
├── lib/
└── pages/

types/
public/
styles/

---

🚀 Performance & Best Practices

• Server-side rendering and SEO optimization with Next.js
• Optimized image loading
• Modular component architecture
• Type-safe development with TypeScript
• Responsive, mobile-first design
• Clean codebase following modern React patterns
• Consistent formatting and code quality enforcement using ESLint, Prettier, and Husky

---

🎯 Project Goals

ReelRadar was built as a showcase of modern frontend engineering practices while providing a polished movie discovery experience. The project demonstrates expertise in:

• Modern React architecture
• Next.js App Router
• API integration
• TypeScript development
• Responsive UI implementation
• Performance optimization
• Clean component design
• Maintainable project architecture