-
Notifications
You must be signed in to change notification settings - Fork 1
FrontEnd
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.
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.
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.
Sends a POST request to the /login endpoint with the username and password to authenticate the user. The response contains a JWT token.
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.
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.
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.
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.
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.
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.
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.
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.
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.
This folder contains all the core React components that are used to build the UI of the application. Each component handles a specific part of the user interface or functionality.
LandingPage()
Renders the landing page of the application. This page includes an introduction and a "Get Started" button.
Loader()
Displays a loading spinner or animation while data is being fetched or processed in various parts of the app.
LoginForm()
Renders a form for users to log in by entering their username and password. Upon submission, it triggers authentication logic via AuthContext.
NavBar()
Renders the navigation bar of the application, which includes links to different sections like "Home", "Search", "Watchlist", "Signup" and "Login."
ProtectedRoute({ children })
A higher-order component that restricts access to certain routes based on user authentication status. If a user is not logged in, they are redirected to the login page.
RecommendedMovies()
Displays a list of recommended movies based on user preferences or watch history. It fetches recommendations from an API and renders them in a grid format. Users can also add movies to their watchlist.
RegisterForm()
Renders a form for new users to create an account by providing necessary details like username and password.
SearchMovies()
This component allows users to search for movies, select up to 5 movies, and get personalized recommendations.
SelectedMovies()
Displays details about selected movies, such as title, genre, and description.
Watchlist()
Displays a list of movies that have been added to the user's watchlist. It allows users to manage their watchlist by removing movies or viewing details.