Catálogo de filmes
Netflix-style movie catalog in pure JavaScript, powered by TMDB data.
Context
A study project to practice DOM manipulation, fetch, native carousels (scroll-snap) and framework-free frontend architecture — replicating a streaming catalog experience.
The challenge
Consume the TMDB API without exposing the key on the client. The solution was a serverless proxy on Vercel, with the key protected in an environment variable and edge caching to reduce calls.
Role and responsibilities
- Component architecture in vanilla JS (no frameworks)
- Native carousels with scroll-snap and keyboard navigation
- Serverless proxy on Vercel with key protection and edge caching
- Accessible details modal (focus trap, ESC, aria)
Stack and architecture
Pure HTML, CSS and JavaScript; Vercel Functions for the proxy; TMDB as the data source.
Highlights
- Zero frontend dependencies
- API key never exposed to the client
- Continuous deploy to Vercel on every push
Takeaways
Rebuilding by hand what frameworks solve (state, routing, accessibility) is the best way to understand what they do for you — and when they are worth it.