This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Movix - Ultimate Movie and TV Show Discovery Platform Movix homepage

Movix is a web application built using React and Redux that allows users to search for movies and TV shows, view popular, trending, and upcoming releases on a daily and weekly basis, and explore detailed information about each title, including trailers and related videos.

📝 Features Movie and TV Shows Search: Users can easily search for movies and TV shows by their respective names.

Popular, Trending, and Upcoming: The homepage showcases popular, trending, and upcoming movies and TV shows, with their names, posters, genres, and ratings.

Detailed Movie/TV Show Pages: Clicking on a movie or TV show provides users with a detailed page containing comprehensive information about the title, cast, runtime, release year, rating, director, writer, including its description, trailer, and additional videos.

Personalized Recommendations: Users receive recommendations for similar movies and TV shows based on the content they are currently viewing.

Fine-Tuned Filters: Users can apply filters based on various criteria, such as genre, release date, rating, and more, to refine their search results.

🚀 Live Demo https://movix-taupe.vercel.app

Tending & Popular Movies: Movix homepage

Movix homepage

Movie Details Page: Movix homepage

Movix homepage

Search Results Page: Movix homepage

Explore Movies & TV Shows: Movix homepage

Movix homepage

🛠️ Installation Steps:

1. Clone the repository

git clone https://github.com/masud-rana44/Movix.git 2. Install the required dependencies

npm install 3. Start the development server

npm run dev 4. Access the application at

http://localhost:5173 💻 Built with Technologies used in the project:

React - Building user interfaces Redux - UI state management scss - For styling Axios - API requests to the TMDB API React Router - Navigation and routing within the application 🙏 Acknowledgments In the development of Movix, we express our gratitude to the following third-party libraries and APIs that have significantly contributed to the application's functionality and user experience:

Redux Toolkit (@reduxjs/toolkit): A comprehensive toolset for managing application state with Redux, streamlining state management and reducing boilerplate code.

Axios (axios): A reliable and efficient HTTP client that seamlessly integrates with the TMDB API, enabling smooth data retrieval.

Day.js (dayjs): A lightweight and versatile library for date and time manipulation, enhancing the application's date formatting capabilities.

React (react) and React DOM (react-dom): The core libraries powering the dynamic user interface and rendering of React components.

React Circular Progressbar (react-circular-progressbar): An eye-catching component that brings visually appealing circular progress bars to the application.

React Icons (react-icons): A treasure trove of icons that adds visual charm and enhances the user interface with diverse iconography.

React Infinite Scroll Component (react-infinite-scroll-component): Empowers infinite scrolling functionality, making content loading seamless and intuitive.

React Lazy Load Image Component (react-lazy-load-image-component): Enhances performance by deferring image loading until needed, improving page loading times.

React Player (react-player): Facilitates smooth integration of media players to showcase movie trailers and videos within the application.

React Redux (react-redux): Seamlessly integrates Redux state management with React, providing predictable application state handling.

React Router DOM (react-router-dom): Enables smooth and intuitive navigation and routing within the application.

React Select (react-select): Provides customizable select dropdowns for better user interaction and search functionalities.

Sass (sass): A powerful CSS preprocessor that streamlines and organizes styling, contributing to the overall visual aesthetics of the application.

⚠️ Disclaimer Please note that Movix relies on the TMDB API to fetch movie and TV show data. The accuracy, completeness, and availability of the data are subject to TMDB's policies and may be subject to change. Users are advised to refer to the TMDB API documentation and terms of use for any restrictions or usage guidelines related to the data accessed through the API.

💖Like my work? This project needs a ⭐️ from you. Don't forget to leave a star ⭐️.

MovieX : High-quality films for you MovieX is a dynamic and engaging movie website that provides movie enthusiasts with a wide range of movies to explore and enjoy. The website is designed to be user-friendly and easy to navigate, with a variety of features that make it simple to find the perfect movie for any occasion.

At "MovieX", users can browse the latest and most popular movies on the trending page, get detailed information about any movie on the details page, and search for specific movies using the search page. The website's explore page provides users with the ability to find new movies based on their interests, with a variety of genres and themes to choose from.

Features Movie information: A movie website typically provides information about movies, including title, genre, cast, plot summary, and release date. Movie reviews and ratings: Many movie websites allow users to rate and review movies, providing feedback that can help others decide whether to watch a particular movie. Movie trailers: A movie website may include trailers for upcoming movies or popular films that are currently in theaters. Recommendations: Many movie websites provide personalized movie recommendations based on a user's viewing history or preferences. Watchlist: A watchlist feature allows users to save movies they want to watch later. Some movie websites also provide recommendations based on the movies a user has saved to their watchlist. This movieX website has the designing & development following features: Responsive design: Ensure that your website is optimized for viewing on a variety of devices, including desktops, laptops, tablets, and smartphones. Analytics: Implement an analytics system that allows you to track website traffic, user behavior, and other key metrics. SEO optimization: Optimize your website for search engines so that it ranks higher in search results for relevant keywords. Search functionality: Implement a search bar that allows users to search for specific content on your website, such as articles or other user profiles. Modern and user-friendly design Responsive layout for optimal viewing on all devices The website has been built using the following technologies: HTML SCSS JavaScript ReactJS React Redux React Router Dom Folder Structure +---public +---src | ---assests | ---avatar | ---movieX-logo | ---no-poster | ---no-results | ---components | ---carousel | ---circlerating | ---contentwrapper | ---footer | ---genres | ---header | ---lazyloadimage | ---moviecard | ---spinner | ---switchtabs | ---videopopup | ---hooks | ---useFetch | ---pages | ---404 | ---details | ---explore | ---home | ---searchresult | ---store | ---homeslice | ---store |
| ---utils | ---api ---App.jsx ---index.scss ---index.jsx Owner Developer: Pushpraj Paroha GitHub URL: https://github.com/prp0076 Hosted on netlify : visit now Screenshots Home home

Search search

Movie Details search

Explore Movie explore movies

Explore Tv explore tv

For more information please visit website Getting Started To get started with the website, you will need to first clone this repository:

git clone https://github.com/prp0076/MovieX.git

Once you have cloned the repository, navigate to the project directory and install the dependencies:

cd MovieX npm install

After the dependencies have been installed, you can start the development server by running:

npm start This will start the development server at http://localhost:3000/ , allowing you to view the website in your browser.

Contributing We welcome contributions to this project! If you'd like to contribute, please follow these steps: Fork the repository to create your own copy of the project. Create a new branch in your fork to make your changes. Submit a pull request from your branch to the original repository, and we'll review your changes. Thank you for checking out our project!