An open API service indexing awesome lists of open source software.

https://github.com/boddepallyvenkatesh06/movix-app

About Welcome to The Movie Explorer, your gateway to a world of real-time movies and TV shows with comprehensive details for each title.
https://github.com/boddepallyvenkatesh06/movix-app

api avascript rapidapi reactjs responsive-ui tailwindcss vite-react

Last synced: 28 days ago
JSON representation

About Welcome to The Movie Explorer, your gateway to a world of real-time movies and TV shows with comprehensive details for each title.

Awesome Lists containing this project

README

          

# Movix App

Discover real-time movies and TV shows with detailed information using The Movix App.

This app is built with React.js and styled using Tailwind CSS, providing an engaging and responsive user experience.

This app offers a responsive and visually appealing user interface that adapts seamlessly to various screen sizes.

Live link πŸŒπŸ“‘ - [ https://movix-web.netlify.app/ ]

## Tech Stack πŸ› οΈ

- ⚑ Vite + React.js
- 🎨 Tailwind CSS
- πŸ”„ Redux
- πŸŽ₯ The Movie Database (TMDB) API

## Features 🌟

- 🏠 **Single page application**: Seamless navigation between different pages without the need for page refreshes..

- 🏠 **Random Home Page Background**: Background changes on page refresh or revisit, giving a fresh look every time.

- 🎬 **Carousel**: Explore trending, upcoming, and top-related movies and TV shows using interactive carousels.

- πŸ“„ **Multiple Pages**: Navigate through different pages including Home, Details, Search Results, and Page Not Found.

- ♾️ **Infinite Scroll**: Incorporates the InfiniteScroll library for seamless scrolling through content.

- πŸ” **Search**: Implement the efficient and user-friendly search functionality.

- πŸš€ **Lazy Loading**: Enhance performance by lazily loading images using the react-lazy-load-image library.


## Pages πŸ“‘

- **Home**🏠: Refreshing backgrounds, interactive carousels, and a captivating UI.

- **Details**πŸŽ₯: In-depth information, ratings, and trailers for each movie and TV show.

- **Search Results**πŸ”: Efficiently browse through search results with react-select.

- **Page Not Found**🚫: A friendly page for unexpected routes.

## React Hooks 🎣

Utilized several React hooks for efficient state management and dynamic behavior:

- `useState`
- `useEffect`
- `useDispatch`
- `useParams`
- `useSelector`
- `useLocation`
- `useNavigate`
- `useRef`
- `Custom-Hook`

πŸ“š **React Library**:

- πŸ“… **dayjs**: Utilizes the Dayjs library to beautifully format dates.

- πŸš€ **Lazy Loading**: Enhance performance by lazily loading images using the react-lazy-load-image library.

- ♾️ **Infinite Scroll**: Incorporates the InfiniteScroll library for seamless scrolling through content.

- πŸ” **Select**: Enhance your user interface with interactive and customizable select option using the React Select library.

## πŸ–₯️ Screen Preview:

# 🏠 Random Home Page Background
![Alt Text](https://raw.githubusercontent.com/aniruddha-gade/Movix-App/main/screenshots/home1.png)
![Alt Text](https://raw.githubusercontent.com/aniruddha-gade/Movix-App/main/screenshots/home2.png)
![Alt Text](https://raw.githubusercontent.com/aniruddha-gade/Movix-App/main/screenshots/home3.png)

# Search Button
![Alt Text](https://raw.githubusercontent.com/aniruddha-gade/Movix-App/main/screenshots/home4.png)

# Loading Skeleton
![Alt Text](https://raw.githubusercontent.com/aniruddha-gade/Movix-App/main/screenshots/img11.png)
![Alt Text](https://raw.githubusercontent.com/aniruddha-gade/Movix-App/main/screenshots/img1.png)
![Alt Text](https://raw.githubusercontent.com/aniruddha-gade/Movix-App/main/screenshots/img2.png)

# Details of Movie / TV
![Alt Text](https://raw.githubusercontent.com/aniruddha-gade/Movix-App/main/screenshots/img3.png)
![Alt Text](https://raw.githubusercontent.com/aniruddha-gade/Movix-App/main/screenshots/img4.png)

# Cast of the Movie / TV
![Alt Text](https://raw.githubusercontent.com/aniruddha-gade/Movix-App/main/screenshots/img5.png)
![Alt Text](https://raw.githubusercontent.com/aniruddha-gade/Movix-App/main/screenshots/cast1.png)
![Alt Text](https://raw.githubusercontent.com/aniruddha-gade/Movix-App/main/screenshots/cast2.png)

# Official Videos & Recommendations
![Alt Text](https://raw.githubusercontent.com/aniruddha-gade/Movix-App/main/screenshots/img6.png)
![Alt Text](https://raw.githubusercontent.com/aniruddha-gade/Movix-App/main/screenshots/img7.png)

# Explore Page for Movies && TV Shows
![Alt Text](https://raw.githubusercontent.com/aniruddha-gade/Movix-App/main/screenshots/img8.png)
![Alt Text](https://raw.githubusercontent.com/aniruddha-gade/Movix-App/main/screenshots/img9.png)

# Filters for Generes && Sorting
![Alt Text](https://raw.githubusercontent.com/aniruddha-gade/Movix-App/main/screenshots/img10.png)

# Footer
![Alt Text](https://raw.githubusercontent.com/aniruddha-gade/Movix-App/main/screenshots/footer.png)