TMDB Single Page Application
This React project showcases how to build a fast, dynamic single-page application using data from the TMDB API. It fetches over 1.16 million movies and displays the first 20 results with search functionality.
The Brief
I wanted to experiment with React 19 and see how far I could push its state management and API integration capabilities. The app is built with Vite for fast bundling, and styled using Tailwind CSS 4.0. Users can search for movies in real-time. I integrated Appwrite as a backend service to store and track each search. The app automatically updates the top five most searched terms live—no page refresh required.
The Solution
The goal was to create a responsive movie search interface using the TMDB API. I also aimed to persist each search to a custom database using Appwrite, where a counter tracks search frequency. This powers a real-time “Top 5 Searches” feature on the front end. React’s useState and useEffect hooks handle API calls, loading states, and error handling, creating a seamless experience—similar to live search on platforms like YouTube.
The Results
The final product is a smooth, interactive frontend that responds instantly to user input. The same structure could be adapted for any searchable API. Future improvements could include dynamic routing with React Router for individual movie pages. Overall, this project deepened my understanding of React’s virtual DOM and how to manage UI updates at a granular level.