Skip to content

Latest commit

 

History

History
99 lines (68 loc) · 3.51 KB

README.md

File metadata and controls

99 lines (68 loc) · 3.51 KB
Raw

MovieInfo-Hub 🎬

1. Search Page

Search Page

2. Movie Details Page

Movie Details Page

A sleek and dynamic Movie Information Finder app that allows users to search for movies, view detailed movie information, and experience a visually engaging interface. The app fetches data from an external API and presents it beautifully with custom backgrounds, dynamic content, and a modern UI design.

Live Demo

Features

🔍 Search Functionality

  • Real-Time Search:

    • Users can search for movies using a search bar.
    • As you type, movie suggestions are fetched and displayed in real-time based on the input.
    • Results include the movie's title and other key info, such as the release year.
    • Clicking on a movie in the suggestion list will display its detailed information.

  • Dynamic Suggestions:

    • The suggestion list updates automatically based on user input, offering a smooth and responsive experience.
    • The design of the suggestion box adapts to different screen sizes for a seamless mobile, tablet, and desktop experience.

🎥 Movie Details Page

  • Detailed Information:

    • Once a movie is selected, the app transitions to a new screen showing detailed information about the movie.
    • Details include:
      • Movie title
      • Release date
      • Popularity score
      • Overview (summary)
      • Full poster image

  • Dynamic Background:

    • The background of the details page automatically updates based on the movie's backdrop image, with a sleek linear gradient overlay for visual appeal.
    • The poster image is also displayed in a prominent position next to the movie details.

  • Responsive Design:

    • The app is fully responsive, ensuring optimal viewing across desktop, tablet, and mobile devices.
    • Layout adjustments are made dynamically to ensure an intuitive experience regardless of device size.

🔄 API Handling

  • TMDb API Integration:
    • The app fetches movie data from the TMDb (The Movie Database) API.
    • The search queries hit the TMDb API to retrieve relevant movie results based on user input.
    • Upon selecting a movie, detailed information is pulled from the API, including backdrop images and movie metadata.

🚀 Concepts Used

  • React Router DOM: For navigation between pages (search and movie details).
  • useParams: To access dynamic route parameters (e.g., movie ID).
  • useEffect: For side effects, such as fetching movie data and dynamically updating the page on mount.
  • useRef: To handle mutable elements and direct DOM manipulation for optimal rendering and performance.

Getting Started

Installation

  1. Clone the repository:

    git clone https://github.com/mrsahiljaiswal/MovieInfo-Hub.git

  2. Navigate to the project directory:

    cd movie-info-finder

  3. Install dependencies:

    npm install

  4. Start the development server:

    npm start

Environment Variables

You will need an API key from TMDb. Create a .env file at the root of your project and add:

REACT_APP_TMDB_API_KEY=your_tmdb_api_key

🤝Contributing

Contributions are always welcome! If you have suggestions for improvements or encounter any issues, feel free to open a pull request or submit an issue in the repository.

Live Demo