Hey everyone! 👋
What if you could search for a movie, explore its poster, and open a dedicated details page — all from a simple web application?
That's the idea behind MovieHub, one of my JavaScript projects!
🔗 Live Demo: https://suprio-dev.github.io/MovieHub/
🍿 What can you do with MovieHub?
- Search for movies by title
- Explore movie posters and release years
- View individual movie details
- Navigate from search results to a dedicated details page
- Get feedback when a search doesn't return results
⚙️ How I built it
MovieHub uses the OMDb API to retrieve movie information. JavaScript handles the search form, API requests, and dynamically generated movie cards.
Here's how the application works:
Enter Movie Title
↓
Submit Search Form
↓
Fetch API Request
↓
OMDb API
↓
Receive JSON Response
↓
Generate Movie Cards
↓
Click a Movie
↓
Open Details Page
When a user selects a movie, its IMDb ID is passed through the URL as a query parameter. This allows the details page to identify the selected movie.
🔧 Tech Stack
- HTML5 — Structure
- Tailwind CSS — Responsive styling and UI
- JavaScript — DOM manipulation and application logic
- Fetch API — Asynchronous requests
- OMDb API — Movie search and information
🧠 What I learned
While building MovieHub, I got more practice with:
- Fetching data from an external API
- Using
async/awaitto handle asynchronous operations - Processing JSON responses
- Dynamically creating and rendering movie cards
- Event delegation with
closest() - Passing data between pages using URL query parameters
- Handling loading states and unsuccessful searches
One of my biggest takeaways was understanding how different parts of a frontend application work together — from collecting user input to fetching data and rendering the results.
MovieHub is another step in my journey of learning JavaScript by building projects instead of just reading about concepts.
If you have a moment, check out the live demo and let me know what you think! 🎬
Top comments (0)