A React + Vite movie search app built around the TMDB API. Type a title, get posters, ratings, and summaries back.

Click to zoom

Movie Finder: React Movie App

Movie Finder is a React + Vite web app for searching, browsing, and discovering movies using the TMDB API. It returns real-time movie information including posters, ratings, and summaries, all in a responsive interface that works on phone and desktop.

I built it in three days when I was learning React hooks. The interesting part was keeping the search input snappy while not hammering the API on every keystroke.

---

What users can do

• Search movies. Instantly find movies by title or keyword.
• Browse movie details. See ratings, summaries, release dates, and posters.
• Popular and trending lists. Discover trending and popular movies dynamically.
• Responsive UI. Works 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 build 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. Fast dev environment and build tool.

API and deployment

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

---

Development experience

React and 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 a responsive 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 and design

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

---

Impact and 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 and watchlist. Save movies for later.
• Movie trailers. Embed YouTube trailers.
• Dark mode. For better night-time viewing.
• Pagination and infinite scroll. Smooth browsing of large result sets.

---

Key learnings

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