Streamix is a responsive movie search engine built with React.js that lets users search for movies in real time using a public movie database API. This project represents the next step in my React learning journey, where I moved beyond basic state management and started working with real-world concepts like API integration, routing, and performance optimization.

https://streamix1.netlify.app/

• Search for movies via external API
• Optimized search input using debounce (don’t fire API calls on every keystroke)
• Dynamic routing with React Router (e.g. movie detail pages)
• Responsive design for mobile & desktop
• Loading and error states for better UX
• Asynchronous API calls, handling headers / API key securely

• useEffect and side effects (fetching data on dependency change)
• useRef for maintaining non-stateful data (for example, debounce timer or input focus)
• useState for managing UI state: search term, movie list, loading, errors
• Debounce logic for performance
• Routing (useParams, dynamic routes) for detail views
• Conditional rendering (loading, errors, empty results)
• Responsive CSS / layout skills

• Add pagination or infinite scroll for results
• Add filters (by genre, rating, etc.)
• Cache search results or autocomplete suggestions
• Improve UI/UX: transitions, animations

I’m proud of how this turned out — it shows how far I’ve come since my first React app.
Would love suggestions on where I can optimize further or libraries/tools I should explore next!