Project 01 · Team / Academic

Movie Database

A React-based movie discovery application powered by the TMDB API, featuring category browsing, detailed movie information, and a favorites feature.

Primary project preview · Managed in WordPress

01 — PROJECT

The Overview

Movie Database is a responsive web application designed to help users discover, explore, and save movies through an interactive browsing experience. Developed as a three-person team project at BCIT, the application integrates the TMDB API to display movie information across different categories, including popular, top-rated, now-playing, and upcoming releases. Beyond displaying movie data, the project focuses on creating a responsive and engaging user experience. Features such as skeleton loading states, dynamically updated hero content, and toast notifications provide visual feedback as users explore categories and manage their favourites. The project provided an opportunity to strengthen my React development skills, work with asynchronous data, and contribute to a collaborative development process.

02 — MY CONTRIBUTIONS

My role &
contributions

Project Lead / Front-End Developer

As the project lead and a front-end developer in a three-person team, I helped coordinate tasks, track progress, and integrate contributions into a consistent application. My primary development focus was creating interactive UI experiences that respond naturally to user actions and application states. I paid particular attention to loading feedback, dynamic content updates, and clear confirmation of user interactions. Rather than treating these details as optional enhancements, I approached them as essential parts of making the application intuitive and enjoyable to use.

What I contributed

- Implemented skeleton loading placeholders that reflect the structure of movie cards while API data is being fetched. - Developed a dynamic hero section that updates its featured imagery and content when users switch movie categories. - Added toast notifications to provide immediate feedback when movies are added to or removed from favourites. - Refined responsive layouts and interactive behaviours across different screen sizes. - Coordinated task assignments, development progress, and communication within the three-person team. - Supported the integration of individual contributions into a consistent application experience.

03 — PROBLEM SOLVING

Challenges & solutions

Fetching movie data from an external API can introduce noticeable delays. Without appropriate loading feedback, users may encounter empty areas or sudden changes in the layout as content appears. I wanted the interface to communicate that content was loading while maintaining a consistent visual structure.

SOLUTION

Skeleton Loading

I implemented skeleton placeholders that resemble the layout and proportions of the actual movie cards. By displaying these placeholders while data is being fetched, the interface provides immediate visual feedback and creates a smoother transition to the loaded content.

Switching movie categories changes the content users are exploring, but updating only the movie grid can make the interaction feel disconnected from the rest of the page. I wanted category changes to be reflected in the main visual area as well, making the selected context immediately recognizable.

Adding or removing a movie from favourites happens without navigating to another page. Without clear feedback, users may be unsure whether their action was registered successfully. I wanted to provide confirmation without interrupting the browsing experience.

04 — DEVELOPMENT

Technical implementation

Movie Database was built with React and integrates the TMDB API to retrieve and display movie information. My technical focus was on making the interface responsive to both asynchronous data and user interactions. Skeleton components represent loading states, category changes drive updates to the hero section, and toast notifications provide feedback for favourite actions. These features demonstrate how React's component-based architecture and state-driven rendering can be used to create a more cohesive and interactive user experience.

SYSTEM ARCHITECTURE

Interactive Movie Discovery

The React interface manages category selection, loading states, and user interactions while movie information is retrieved from the TMDB API. UI components respond to these changes by updating displayed content, showing loading placeholders, and providing interaction feedback.

01React UI & State

02Movie Data & Interactions

03TMDB API

IMPLEMENTATION NOTE

URL-Driven Dynamic Hero

The hero section responds to category changes by updating its featured movie imagery and content. This implementation connects user selection with React's rendering behaviour, ensuring that the main visual area stays in sync with the currently selected movie category.

CODE EXCERPTJAVASCRIPT

const queryCategory = searchParams.get("category");

const category = VALID_CATEGORIES.includes(queryCategory)
  ? queryCategory
  : DEFAULT_CATEGORY;

useEffect(() => {
  const updateHeroMovies = async () => {
    try {
      const data = await getCategoryMovies(category, 1);

      setHeroMovies((data.results ?? []).slice(0, 3));
    } catch (error) {
      console.error("Failed to fetch hero movies:", error);
      setHeroMovies([]);
    }
  };

  updateHeroMovies();
}, [category]);

05 — VISUAL SHOWCASE

Design in detail

Screenshots and demonstrations support the technical story rather than decorate it.

Movie discovery · Dynamic hero and category browsing

Mobile experience · Responsive movie discovery

Favourite interactions · Instant toast feedback

06 — REFLECTION

Results & learnings

Reflecting on the outcomes, lessons learned, and opportunities for improvement.

01 / OUTCOME

The results

Delivered a responsive movie discovery application that combines movie browsing, category navigation, detailed information, and favourite functionality. Beyond the core features, I focused on interaction details that improve the overall experience. Skeleton loading states provide feedback while data is being fetched, dynamic hero updates make category navigation more engaging, and toast notifications clearly communicate favourite actions. The completed application was deployed to Vercel and brought together the contributions of a three-person development team.

02 / INSIGHTS

What I learned

This project strengthened my understanding of React's component-based architecture, asynchronous data handling, and state-driven interfaces. One of my key takeaways was that a good user experience depends not only on what an application can do, but also on how clearly it communicates what is happening. Loading indicators, visual transitions, and confirmation messages may seem like small details, but they play an important role in making interactions feel intuitive. Working as a project lead also helped me develop my ability to coordinate tasks, communicate implementation decisions, and consider the consistency of the application as a whole.

03 / LOOKING AHEAD

What's next

Future improvements could include smoother transitions between category changes, additional accessibility enhancements for interactive components, and more comprehensive testing of loading and error states. I would also like to further refine the application's visual feedback and keyboard interactions to make the browsing experience more accessible and polished.

const queryCategory = searchParams.get("category"); const category = VALID_CATEGORIES.includes(queryCategory) ? queryCategory : DEFAULT_CATEGORY; useEffect(() => { const updateHeroMovies = async () => { try { const data = await getCategoryMovies(category, 1); setHeroMovies((data.results ?? []).slice(0, 3)); } catch (error) { console.error("Failed to fetch hero movies:", error); setHeroMovies([]); } }; updateHeroMovies(); }, [category]);

Movie Database

The Overview