Skip to content

A web application that allows users to search for movies, view detailed information such as ratings, synopsis, and cast, and explore trending films using TMDB API.

Notifications You must be signed in to change notification settings

s0lena/moviesearch-app

Repository files navigation

🎬 Movie Search App

A Movie Search App built with React and TypeScript that allows users to search for movies using the TMDb API. This app is powered by React Query for data fetching, Axios for making API requests, and styled with styled-components. It also uses React Router for navigation and is deployed on Netlify.

Features

  • 🔍 Search Movies: Enter a query to search for movies in real-time.
  • 📜 View Movie Details: Click on any movie to see detailed information including release date, overview, and ratings.
  • 🗂 Pagination: Load more movies as you scroll or click "Load More".
  • ⚡ Efficient Data Fetching: Using React Query for caching and minimizing unnecessary API calls.
  • 🎨 Responsive Design: Styled using styled-components for modern and responsive UI.
  • 🚀 Deployed on Netlify: Accessible online with seamless integration.

Demo

You can try the live version of the app here: https://moviesearch-app-os.netlify.app/

Technologies

  • React (with TypeScript)
  • React Query (for data fetching)
  • Axios (for API requests)
  • Styled-Components (for styling)
  • React Router (for navigation)
  • Netlify (for deployment)

Project Structure

Here's an overview of the project structure:

src/
│
├── assets/ # Static assets like images (e.g., MissingPoster)
├── components/ # Reusable React components (Input, MovieList, etc.)
├── hooks/ # Custom hooks (e.g., useMovies, useScroll)
├── pages/ # Page components like SearchView and MovieDetailView
├── services/ # API calls (fetchMovies, fetchGenres)
├── App.tsx # Main App component
├── index.tsx # Entry point of the app
├── styles.ts # Global styles

Contributing

If you'd like to contribute, please fork the repository and use a feature branch. Pull requests are warmly welcome.

  1. Fork the repository.
  2. Create a new feature branch (git checkout -b feature/your-feature-name).
  3. Commit your changes (git commit -am 'Add some feature').
  4. Push to the branch (git push origin feature/your-feature-name).
  5. Create a new Pull Request.

About

A web application that allows users to search for movies, view detailed information such as ratings, synopsis, and cast, and explore trending films using TMDB API.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published