FrontEnd

The key files and functions for the Frontend code

App.js

App()

This is the root component of the React application. It renders the main structure of the app and includes routing for different pages like landing page, login, signup, search, and watchlist.

index.js

index()

This file is responsible for rendering the root component (App) into the DOM. It uses ReactDOM.createRoot() to initialize the React app and inject it into the root element in index.html.

apiCalls.js

api

An axios instance is created. It also includes an interceptor that attaches the JWT token from localStorage to the Authorization header for each request, if the token exists.

loginUser(username, password)

Sends a POST request to the /login endpoint with the username and password to authenticate the user. The response contains a JWT token.

createUser(username, password)

Sends a POST request to the /createUser endpoint with the username and password to create a new user. The response contains the created user data.

searchMovies(term)

Sends a POST request to the /search endpoint with a search term. It uses FormData to send the term in a multipart form format. The response contains search results for movies matching the term.

predictMovies(movieList)

Sends a POST request to the /predict endpoint with a list of movies. The response contains predicted movie recommendations based on the provided movie list.

addToWatchlist(imdbID)

Sends a POST request to the /addtoWatchlist endpoint with an IMDb ID to add a movie to the user's watchlist. The response confirms whether the movie was successfully added.

getWatchlist()

Sends a GET request to the /getWatchlist endpoint to retrieve the current user's watchlist. The response contains all movies in the user's watchlist.

deleteFromWatchlist(imdbID)

Sends a DELETE request to the /deleteFromWatchlist endpoint with an IMDb ID to remove a movie from the user's watchlist. The response confirms whether the movie was successfully removed.

AuthContext.js

AuthContext

A React context (AuthContext) is created to manage and share authentication state (JWT token) across the application. This context allows components to access and modify the user's authentication status.

AuthProvider({ children })

This component is responsible for providing authentication-related state and functions (like login and logout) to the rest of the app. It uses React's useState to store the JWT token and useEffect to load any existing token from localStorage when the app is first loaded.

useAuth()

A custom hook that allows any component to easily access the authentication context by calling useAuth(). Components can use this hook to get the current token or call login/logout functions.