MovieMatcher Application Workshop
This was a workshop that we ended up not doing for July 23rd at a local library. Here is a demo of the project.
Hello! Have you ever wondered how the search bar of any movie website works? How any time you click on the Action genre tab within Netflix, it expands the page to countless movies? What if today, you were able to not only learn how it works but how to do it?
Movie Matcher is a simple, beginner friendly, coding project that will be able to walk you through all the steps to how applications like Netflix, Hulu, and MAX search for movies to be able to recommend to you!
This project will perform a search query for movies depending on the genre that you type in.
What you will Learn
The purpose of this workshop is to provide individuals with non-technical backgrounds an accessible introduction to creating a movie project website using popular frameworks such as React and Next.js. The workshop aims to empower participants to develop basic technical skills and gain confidence in building simple web applications.
Outcome
By the end of the workshop, participants will:
- Understand the basics of backend and frontend coding and their roles in web development.
- Gain familiarity with key technologies such as React and Next.js
- Be able to interact with APIs, extract data, and display it on a website.
- Have completed a basic movie project website that displays information about a random movie.
- Feel equipped to explore further in the world of web development and coding, building upon the foundation laid during the workshop.
Session I
You have probably heard about the concept of computer science before. According to WSJ, "The number of students in the U.S. majoring in computer and information science has jumped 40% in five years, to more than 600,000 as of 2023." Our school, *********, is ranked within the Top 50 of Computer Science Departments within the U.S.. Therefore, computer science is a trending topic and important concept to understand in today's generation.
Within computer science, there are two main categories: hardware and software. Hardware is anything physical such as a desktop, laptop, server, and more. Hardware talents align with creating/repairing computers and understanding the physical aspects of what is inside a computer. This is more aligned with computer engineering, another major that is growing in today's generation.
Software is what we are dealing with today. These are programming languages and applications that tell the hardware what to do. Common programming languages being used today would be python, javascript, C++. The older programming languages consist of Fortran, perl, and C.
Today, we will be creating a full stack application. Full stack consists of two parts: backend and frontend. Take for example, a website such as Google:
The frontend is the search bar and the search results after pressing the search bar. It is what the user reacts to and can physically see.
The backend is the logic and reasoning that happens behind the screen. After the user searches for something, the backend must do a bunch of complicated (well not super complicated since we will be doing it very soon) coding in order to show the user their desired results.
While it is a full stack application, we will be diving into more of the backend logic and the frontend will already be written for you. The reason for this is because the backend is much more interesting and frontend is pretty straightforward for a project like this (there's just a search bar).
Let's Start Coding!
What is programming?
Toward a definition
- Programming is about “instructing a computer to perform specific tasks”:
Programming gives us the ability to communicate with machines through a language of commands. Just like giving directions, each line of code serves as a clear, executable instruction. Whether it's calculating complex algorithms or creating visuals on websites, programming is the art of taking ideas into actions. With this, the possiblities are endless to building pretty much anything. - These tasks form an algorithm, like a recipe:
Algorithms are the bread and butter of developing software. Think of algorithms like recipes for computers. Just as a recipe guides you through cooking a delicious dish step by step, an algorithm directs a computer through a series of specific tasks. It's about breaking down complex problems into manageable instructions, ensuring precise execution every time. Whether sorting data, navigating through a map, or analyzing vast amounts of information, algorithms are the backbone of efficiency in computing. - A programming language is based on “a vocabulary and set of grammatical rules” for programming, like a natural language:
Python and Java, two popular examples, each offer unique syntax and capabilities. Python, known for its simplicity and readability, reads almost like plain English, making it ideal for beginners and rapid prototyping. On the other hand, Java's strict syntax emphasizes strong typing and portability, making it a powerhouse for large-scale applications and enterprise solutions. So, whether you're scripting algorithms in Python or building complex systems in Java, mastering these languages opens doors to limitless creativity and problem-solving in the digital world. What we recommend as college students is to get good at one language to build the foundational knowledge to learn more languages and more.
The Next.js environment
First, you will open the application on your computer that is named Visual Studio Code. THis will be what you call your coding environment. Within this environment, there are folders. These were automatically created by the next.js framework.
How we created the next.js app was going in the terminal of Visual Studio Code and typing in
npx create-next-app@latest
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*
Here are the folders that exist there.
public: This folder holds files that will be accessible to the public, like images or stylesheets.
src: This is short for "source." It contains your main code files, like app.js, where you write the core logic of your program.
app.js: This is often the main file where your application starts executing. It's like the conductor of an orchestra, telling each part (or module) what to do.
package.json: This file keeps track of your project's dependencies (like tools or libraries your project needs) and other configurations.
Variables
In all coding languages, they have components that are called variables. Variables in coding are similar to variables in algebra math. They represent a value such as X = 10. There are only three types of variables: strings, integers, float, and booleans. These are the values of these variables:
strings: string variables can only hold letters.
integers: integer variables can only hold whole numbers.
float: float variables can only hold decimal numbers.
booleans: boolean variables can only hold true or false.
Running the Blank Next.js Server
To stop the development server, you can press Ctrl + C in the terminal. If you want to deploy your Next.js application, you can run npm run build to create an optimized production build, followed by npm start to start a production server. This will not work with the file given because there are blank returns, but if you are to make a next.js app on your own- this is how it should look like starting out.
STEP 1: ENTER STATES HERE. THERE ARE 5 in total. Each step will go into creating all 5 states.
1. Importing Packages:
In coding, sometimes we need to use tools or functions that others have already built. To do this, we use something called 'importing packages.' Imagine it like borrowing tools from a toolbox.
Purpose: "Importing packages lets us access pre-written code, saving us time and effort."
Example: "You might see something like import { FUNCTION } from PACKAGE;
which brings in a specific function (FUNCTION) from a package (PACKAGE)."
React, as we've said, is a very popular frontend and we are importing their function UseState . The way that UseState is referred to is in this format:
let [variableName, functionName] = useState("");
A variable is the codename to a word. A function is the set of rules that are applied to the inputs that turn it into outputs. We know from this UseState that the output of functionName will be in the form of the variable variableName. For example, setGenreInput is the function and the output of it will be genreInput.
Axios is a library that is used for making API requests. We will get into what an API is but it heps us gather information from the internet.
2. Using useState for Dynamic Variables:
The purpose of useState is that it helps us create variables that can store and update data dynamically."
Explanation: "For instance, think of a search bar where the user types in different genres. With useState, we can capture and update that input dynamically." The main reason why we use states is because it does not need to be stored- such as things that only need to be shown and not remembered. This is why our search resets when we refresh the page.
Types of Variables: There are two types:
const This is like a fixed label, once set, it can't change.
let: This can be changed.
think of a certain search query as a state, for example "romance," which can change when the user decides to look up "action" instead to handle this. We uses states in react rather than static variables
These lines of code are 1-15¶
import React, { useState } from 'react'; // Import React and useState hook
import axios from 'axios'; // Import axios for making API requests
const Home = () => {
// State to store the user input genre
let [genreInput, setGenreInput] = useState("");
// State to store the selected genre from the dropdown
let [selectedGenre, setSelectedGenre] = useState("");
// State to store the list of movie cards
let [movieCards, setMovieCards] = useState([]);
// State to store genre options for the dropdown
let [dropdownOptions, setDropdownOptions] = useState([]);
// State to store any error message
let [errorMessage, setErrorMessage] = useState("");
STEP 2: ENTER PROCEDURE FOR genreInput variable. THIS CONTAINS CONSOLE.LOG APPROACH.
Let's understand how we update our program's state when things change, like when a user types in a new search term.
setGenreInput() is a function in React that updates a state variable called genreInput. We've previously spoke about this when we were explaining the useState React function. There is a certain line here that states
setGenreInput(event.target.value);
Here is a video of how we got the event.target.value variable. This is done through console.log().
console.log() helps us see what's happening behind the scenes in our code.console.log() is what is done in order to troubleshoot. Troubleshooting is when you test your product step-by-step to see where you may be getting errors from. By using console.log(event), we can check what data the variable event holds at any given moment. It's like peeking at the value inside a box. Explanation: "When event.target.value changes, for example, when a user types something in a search bar, setGenreInput(event.target.value) updates genreInput to reflect that new value."
STEP 3: ENTER PROCEDURE FOR dropdownOptions variable. THIS CONTAINS API REQUEST APPROACH.
These are the new lines that we are analyzing. Here, we are using axios which is from one of the libraries. There is also a long API that has just been introduced, which is the long URL. This url was not taken from our own brain but given by this website TMDB.
let response = await axios.get(`https://api.themoviedb.org/3/search/keyword?api_key=bb76d810eac6dda796c6389702e136b2&query=${event.target.value}`);
let options = response.data.results.map(result => result.name);
An API stands for Application Programming Interface. It's purpose is to implement pre-existing code into your own code. For example, we are learning how to essentially write an API currently because this can be used by others if we are to make it public.
The TMDB API stands for The Movie Database. The API contains a bunch of information about movies such as their poster, summaries, cast and crew, and stats.
The first step to using an API is having an API key. An API key is used to validate what user is using the API. In some cases, this is used so that the API can charge a user for using their key X amount of times. However, for this API, it is free but we still have to create an API key.
We've looked ahead at the API key Terms of Use and saw that there is no limit usage to using an API key. Therefore, we will all share one key which is: bb76d810eac6dda796c6389702e136b2.
If you want to create your own API key, then this is the website: https://developer.themoviedb.org/docs/getting-started
How a variable works is that on the right side of the equal sign is what the variable equals, and on the left side of the equal sign is what the variable is going to be named. Once we got the value of the variable from that long URL side, we then put it inside a variable named response. Afterwards, we did
let options = response.data.results.map(result => result.name)
The response variable is a list of lists of lists. This is going to be kind of confusing but think of it as the data variable is the name of one of those lists. We are accessing that list by writing down response.data.
After you've wrapped your mind around that, now we can understand that data is alos a list of lists. The results variable is a list which is within the data variable which is also a list.
Finally, we have accessed where we've needed to access: response.data.results. The way that we know where our content lives and which list it lives in is through console.log, but we did that task for you.
Now, the map function is when we extract the name from each of those variables within response.data.results. This then stores all those names into a new list called options, which is on the left side of the equal sign: the new name for the variable.
This Code is for lines 16-28¶
const handleGenreInputChange = async (event) => {
setGenreInput(event.target.value); // Update the genreInput state with the value entered by the user
try {
// Fetch genre options from TMDB API based on the user input
let response = await axios.get(`https://api.themoviedb.org/3/search/keyword?api_key=bb76d810eac6dda796c6389702e136b2&query=${event.target.value}`);
let options = response.data.results.map(result => result.name); // Extract genre names from the API response
setDropdownOptions(options); // Update the dropdownOptions state
} catch (err) {
setErrorMessage("Error fetching genre options"); // Set error message if the API request fails
}
};
from IPython.display import HTML
from base64 import b64encode
mp4 = open('/FFX.mp4','rb').read()
data_url = "data:video/mp4;base64," + b64encode(mp4).decode()
HTML("""
<video width=400 controls>
<source src="%s" type="video/mp4">
</video>
""" % data_url)