React Movie and TV Series App Assessment

Overview:

In this assessment, you will be tasked with creating a React application that displays movies
and TV series utilizing the provided APIs. The application should have several key
functionalities, including navigation, movie and TV series libraries, login/signup capabilities
using Google Firebase, and a search bar. Additionally, users should be able to mark their
favorite movies and TV series, with the ability to view them later in their respective libraries.

Instructions:
Setup:
● Install necessary dependencies (react, react-router-dom, etc.).
● Set up Google Firebase for authentication.
● Familiarize yourself with the project structure and the provided APIs.

Navbar:

Implement a navigation bar with the following buttons:

● Home
● Movies
● TV Series
● Movie Library
● TV Library
● Login/Signup
● Search Bar

Movies and TV Series Display:

● Upon clicking the Movies or TV Series buttons, display a grid of cards containing
movie or TV series details fetched from the respective APIs.
● Each card should include essential information about the movie/TV series (title,
poster, rating, etc.).
● Implement a heart icon on each card. Clicking the heart icon should store the
movie/TV series in the local storage as a favorite.

Movie and TV Series Libraries:

● Implement separate sections for Movie Library and TV Library accessible from the
navigation bar.
● The libraries should display all the movies/TV series marked as favorites by the user.

Search Functionality:

● Implement a search bar that allows users to search for movies in the Movies section
and TV series in the TV Series section.
 ● Upon entering a query, fetch and display relevant search results using the provided
search API.

Signup and Signin using Google Firebase:

● Implement signup and signin functionality using Google Firebase authentication.

● Users should be able to create an account using their email or sign in with their
existing Google account.

Styling and UI/UX:

● Ensure a responsive and visually appealing design using CSS or a UI library of your
choice.
● Focus on user-friendly interactions and intuitive navigation throughout the
application.

Code Quality and Best Practices:

● Follow best practices for React development, including proper component structure,
state management, and code organization.
● Utilize React hooks, context, and other modern features wherever applicable.
● Write clean, readable, and maintainable code.

Submission:

● Once completed, submit your project either by sharing the GitHub repository or by
providing a zip file containing the project files.
● Ensure your submission includes clear instructions on how to run the application
locally.

Resources:

Movie API:

● "https://api.themoviedb.org/3/movie/top_rated?api_key=f531333d637d0c44abc85b3e
74db2186&language=en-US&page=${page}"

TV Series API:

● "https://api.themoviedb.org/3/tv/top_rated?api_key=f531333d637d0c44abc85b3e74d
b2186&language=en-US&page=${page}"

Search API:

● "https://api.themoviedb.org/3/search/movie?query=${query}&api_key=f531333d637d
0c44abc85b3e74db2186&include_adult=false&language=en-US&page=1"

● Google Firebase for authentication: Firebase Authentication

Note:
You are encouraged to use additional libraries or tools if you
deem necessary for the completion of the project.
Reach out to the instructor if you encounter any difficulties or
have questions about the assessment requirements.