Project : Movie Searching With Redux

[yogeshtakeo]

Task: 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:

   • 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. 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, utilizing 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.

[Youngbikalp]

Name: Bikalp Timalsina Project: Movie Searching With Redux Github Url: https://github.com/Youngbikalp/Project--Movie-Searching-With-Redux

[Narayanadhikari9]

Name: Narayan Adhikari Project : Movie Searching With Redux GitHub URL: https://github.com/Narayanadhikari9/Movie-Search-App

[shantibasnet]

Shanti Basnet project: Movie Searching with Redux URL: https://github.com/shantibasnet/MovieSearching

[mbasnet123456]

Manoj Basnet https://github.com/mbasnet123456/Movie-Search.git