← Back to Projects
OMDB Movie Store
Independent Project
Tech: React, OMDB API, CSS. The tricky parts were API edge cases, error states, and making search feel instant. I added debounce + cancelation and defensive UI around empty/invalid responses. Result: perceived search latency ≈150–200ms after debounce with clear skeleton and empty states.
Key Highlights
- Mastered API integration with comprehensive error handling
- Implemented debounced search with request cancellation
- Built defensive UI for empty and invalid responses
- Created smooth skeleton loading states
- Deployed responsive app with GitHub Pages
Problem
Movie enthusiasts need quick access to comprehensive movie information, but many existing solutions have slow search experiences, poor error handling, and confusing interfaces when dealing with API limitations or network issues.
Solution
Created a robust movie search application with the OMDB API, focusing on instant search feel through debouncing, request cancellation, and skeleton loading states. Implemented comprehensive error handling for all edge cases including network failures and API limits.
Technical Challenge
OMDB API's free tier limited to 1,000 requests per day with no built-in rate limiting. Search-as-you-type created excessive API calls. Network failures and timeouts weren't handled gracefully.
Technical Solution
Built a debounce mechanism with AbortController for request cancellation. Implemented an in-memory LRU cache to store recent searches. Created a comprehensive error boundary system with fallback UI for network failures, API limits, and invalid responses.
Results
- Search latency reduced to 150-200ms perceived time
- Zero unhandled errors in production
- Smooth user experience with skeleton states
- Fully responsive design across all devices
- Clean, intuitive interface for movie discovery