Project Movie Manager

[yogeshtakeo]

Project: Build a Movie Search Application using React, Vite, and State Management

Objective: Build a movie search application in React using the Vite build tool and manage state using the Context API or Redux.

Task Overview

• Set up a new React project using the Vite build tool.
• Design and implement a movie search application with a search bar and search results.
• Manage the application's state using the Context API or Redux.
• Connect the search functionality to the Movies and TV Shows Database API to fetch movie data.

Task Details

1. Project Setup:

   • Set up a new React project using the Vite build tool.
   • Install necessary dependencies, including React, Vite, and either React Context or Redux.
   • Configure the project structure and necessary files.

2. Design and Implement Components:

   • Create a component for the search bar (SearchBar) to allow users to input their movie search queries.
   • Implement a component for displaying search results (SearchResults) to render the fetched movie data.
   • Design and implement any additional components you deem necessary.

3. Manage State with Context API or Redux: (optional)

   • Set up and configure either the Context API or Redux for state management in your application.
   • Create a context or store to hold the movie search results and other relevant data.
   • Implement actions or reducers to update the state based on user interactions, such as submitting a search query.

4. Connect to the Movies and TV Shows Database API:

   • Utilize the Movies and TV Shows Database API available at RapidAPI to fetch movie data based on the user's search query.
   • You have to create an account on Rapid API to use the App.
   • Review the API documentation for authentication and request formats.
   • Implement the necessary logic to send requests to the API and handle the response.
   • Update the state with the fetched movie data.

5. Display Movie Search Results:

   • Pass the movie search results from the state to the SearchResults component.
   • Render the movie data, such as movie titles, posters, release dates, or any other relevant information.

6. Adding functionality

   • Add a detail page into the movie where can see the movie's data on single.
   • Suggest the user some more movies from the movie library
   • Make sure you can edit the data on the store ( if you have it) or on the state and see the changes
   • You should not be deleting that only Update Read and Create.

7. Test and Refine:

   • Start the development server and run the React project using Vite.
   • Verify that the search bar and search results components are rendered correctly.
   • Test the movie search functionality by entering different search queries and verifying that relevant movie data is displayed.
   • Make adjustments and refinements to the design, functionality, or state management as needed.

Task Submission

• Share the code files (SearchBar.tsx, SearchResults.tsx, etc.) with the implemented movie search application, utilising either the Context API or Redux for state management.
• Include instructions on how to configure the Movies and TV Shows Database API, including any required authentication or request formats.
• Optionally, provide screenshots or a live demo link showcasing the movie search application in Issue Table.
• Share the code files, instructions, screenshots, or links in the issue comment box.

[AnanMoktan]

github link: https://github.com/manojsingh49/moviemanager

[samsub1111]

Movie Project by @tarunChand28298 (Tharun) and @samsub1111 (Subarna) Github link: https://github.com/samsub1111/takeo-frontend-movie.git

[cbohra]

https://github.com/cbohra/Movie_manager.git Chirag and Dinisha https://iridescent-bienenstitch-b86ae0.netlify.app/

[cbohra]

https://phenomenal-buttercream-c4b980.netlify.app/