Build a Movie Search Website with AI Code Generation Assistant

Date: 14 Oct 2025 (Tue) & 21 Oct 2025 (Tue)

Time: 14:30 - 16:30

Venue: M403 / Online

Target Audience: All current students

Medium of Instruction: English

**Participants are required to join both sessions (2.0 hrs x 2)

Objective:

In this hands-on workshop, you'll learn how to build a movie search website from scratch using React, a popular JavaScript library for building user interfaces. You'll harness the power of a code assistant tool to streamline your development process and enhance your productivity.

What You Will Learn:

1. Fundamentals of React, including components, state, and props
2. Building reusable and modular UI components with React
3. Fetching data from a movie API (e.g., OMDB or TMDB)
4. Implementing search functionality and filtering movies based on user input
5. Integrating AI Code Generation Assistant to streamline development and boost productivity
6. Deploying your React movie search website to the web

Agenda:

1. Introduction to React
- Understanding the React ecosystem
- Setting up a React development environment
- Creating a new React project

2. Building the Movie Search Interface
- Designing the UI with reusable components
- Implementing user input and search functionality
- Handling component state and props

3. Enhancing with a Code Assistant
- Introduction to code assistant tools (e.g., GitHub Copilot, Continue)
- Integrating the code assistant into your development workflow
- Leveraging the assistant for code suggestions and improvements

4. Fetching Movie Data from an API
- Exploring popular movie APIs (OMDB, TMDB, etc.)
- Making API requests using React lifecycle methods
- Rendering movie data in the UI

5. Styling and Polishing the Website
- Applying CSS styles to React components
- Implementing responsive design for various screen sizes

6. Deploying the Movie Search Website
- Building the production-ready bundle
- Deploying the website to the web