A React movie search app using TMDB, with a 900 ms search debounce, loading and error states, and an Appwrite-backed list of frequently searched movies.
Click to zoom- Role
- Frontend Developer
- Timeline
- 3 Days
- Team
- Solo
- Status
- Completed
Built with
- React
- JavaScript
- Vite
- Tailwind CSS
- TMDB API
- Appwrite
The brief
Movie search needs to stay responsive while results come from a remote API. This project turns a typed title into a browsable set of posters and movie information.
Built the search interface, TMDB request flow, reusable movie cards, and search-count integration with Appwrite.
Implementation notes
Separate typing from fetching
The input updates immediately. A separate search value changes after a 900 ms debounce, which reduces requests while someone is still typing.
Make request state visible
Loading, result, and error state are tracked separately. The interface can show a spinner during a request and a message when fetching fails.
Track search activity
Successful searches update an Appwrite search count. Frequently searched movies are loaded separately from TMDB discovery results.
Current result
A deployed React app for movie search and browsing, with a second discovery surface based on recorded searches.
The search flow
With an empty query, the app requests TMDB's discovery list sorted by popularity. Entering a title switches to the search endpoint after the debounce. Results appear as movie cards rather than raw API data.
What to inspect
The main React component shows how input state, asynchronous requests, and loading feedback connect. The Appwrite integration adds persistence for search activity without moving the movie catalog into a separate database.
This is a compact frontend project. Its focus is API-backed interaction and React state, with the demo and source available for review.
"You have a right to perform your prescribed duty, but you are not entitled to the fruits of actions."
Design by SahilCodex
© 2026. Built with hands.