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.
- 🔍 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.
You can try the live version of the app here: https://moviesearch-app-os.netlify.app/
- React (with TypeScript)
- React Query (for data fetching)
- Axios (for API requests)
- Styled-Components (for styling)
- React Router (for navigation)
- Netlify (for deployment)
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
If you'd like to contribute, please fork the repository and use a feature branch. Pull requests are warmly welcome.
- Fork the repository.
- Create a new feature branch (
git checkout -b feature/your-feature-name
). - Commit your changes (
git commit -am 'Add some feature'
). - Push to the branch (
git push origin feature/your-feature-name
). - Create a new Pull Request.