Detailed Setup Instructions

To set up and run the Movie Listing Application, please follow these steps:

1. Clone the repository to your local machine using the following command. git clone https://github.com/Mahir-Neema/movie_listing_application.git.
2. Navigate to the project directory: cd movie-listing-app
3. Install the required dependencies using npm: npm install
4. Obtain an API key from the OMDB API by visiting http://www.omdbapi.com/apikey.aspx and signing up for a free account.
5. In the App.jsx file, replace 'YOUR_API_KEY' with your actual API key in the following line: https://www.omdbapi.com/?apikey=${apikey}&s=${searchTerm}
6. Save the changes and start the development server: npm run dev
7. Open your web browser and visit http://localhost:5173/ ****to access the Movie Listing Application.

Code Architecture Description

The Movie Listing Application follows a modular and component-based architecture. Here's a description of the main files and directories:

• src: The root directory of the application's source code.
  • components: Contains reusable React components used in the application.
    • MovieListing.jsx: Component responsible for rendering the list of movies based on the search term.
    • Favorites.jsx: Component responsible for rendering the user's favorite movies.
  • App.jsx: The main entry point of the application. It manages the state, fetches movies from the OMDB API, and handles user interactions.
  • App.css: Contains the styling for the application using CSS.
  • index.js: The entry point of the React application that renders the App component.
• public: Contains the public assets of the application.
  • index.html: The main HTML file that hosts the React application.

The application uses React hooks, such as useState and useEffect, to manage state and perform side effects. The useEffect hook is used to fetch movies from the OMDB API whenever the search term changes. The fetched movies are stored in the movies state variable and passed down to the MovieListing component for rendering.

The handleInputChange function is responsible for updating the search term state whenever the user types in the search input field. The addToFavorites and removeFromFavorites functions handle adding and removing movies from the favorites list, respectively. The handleThemeChange function toggles between the light and dark themes when the theme change button is clicked.

The application's styling is defined in the App.css file using CSS classes. The classes are conditionally applied based on the current theme state.