Movie Finder - React Movie App

A React-based web app to search, browse, and discover movies using TMDB API, built with Vite and Tailwind CSS.

Click to zoom

Movie Finder: React Movie App

Movie Finder is a modern web application that lets users search, browse, and discover movies using the TMDB API.
The app delivers real-time movie information including posters, ratings, and summaries, all wrapped in a responsive and clean interface.

This project demonstrates my ability to integrate third-party APIs, manage frontend state efficiently, and build polished, production-ready interfaces.

---

What Users Can Do

• Search Movies: Instantly find movies by title or keyword
• Browse Movie Details: View ratings, summaries, release dates, and posters
• Popular & Trending Lists: Discover trending and popular movies dynamically
• Responsive UI: Works seamlessly on desktop and mobile
• Smooth Navigation: Fast transitions between search results and movie details

---

Key Features

• TMDB API Integration – Fetches real-time movie data dynamically
• Search Functionality – Live search with instant results
• Responsive Design – Fully mobile-friendly using Tailwind CSS
• Dynamic Movie Cards – Posters, ratings, and summaries in a clean layout
• Lightweight Frontend – Built with React + Vite for fast performance
• Deployment Ready – Hosted on Vercel for instant access

---

Why I Built This

• To practice React state management and hooks with real-world API data
• To create a user-friendly movie discovery platform
• To learn frontend API integration, data fetching, and error handling
• To explore responsive UI design using Tailwind CSS

---

Tech Stack

Frontend

• React – Component-based UI with hooks
• Tailwind CSS – Utility-first styling for fast, responsive layouts
• Vite – Lightning-fast dev environment and build tool

API & Deployment

• TMDB API – Provides movie data including posters, ratings, and summaries
• Vercel – Continuous deployment and fast hosting

---

Development Experience

React & State Management

• Built reusable components for movie cards, search results, and layouts
• Managed asynchronous API calls using React hooks
• Implemented loading and error states for smooth UX

API Integration

• Connected the app to TMDB API for real-time movie data
• Handled pagination, search queries, and dynamic results
• Ensured fast and reliable data fetching

UI & Design

• Designed a clean and modern interface using Tailwind CSS
• Focused on mobile-first responsive layouts
• Enhanced UI with smooth hover effects and dynamic movie cards

---

Impact & Results

• Fully deployed, functional web app
• Fast, responsive search and browsing experience
• Clean and intuitive interface for movie enthusiasts
• Lightweight frontend architecture ready for future enhancements

---

Future Enhancements

• Movie Filtering: Filter by genre, rating, and release year
• Favorites & Watchlist: Save movies for later
• Movie Trailers: Embed YouTube trailers
• Dark Mode: For better night-time viewing
• Pagination & Infinite Scroll: Seamless browsing of large datasets

---

Key Learnings

• How to integrate third-party APIs effectively in React
• Managing asynchronous state and data fetching with hooks
• Responsive and modern UI design with Tailwind CSS
• Deploying a frontend-only app to production on Vercel
• Building a complete product solo in a short development cycle