Discover real-time movies and TV shows with detailed information using, ๐ฅ The Moviestan App: A dynamic and fully responsive web app that explores Trending, Upcoming, and Top-rated exciting movies and web shows.๐ฟ Built with React, Axios, Redux, and Custom Hooks, it fetches data in real-time from TMDBโs API, offering an immersive experience with the help of various useful React libraries. This app offers a responsive and visually appealing user interface that adapts seamlessly to various screen sizes.
Live link ๐๐ก - [ https://moviestan-one.vercel.app/ ]
-
๐ฅ 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.
-
๐ 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.
Utilized several React hooks for efficient state management and dynamic behavior:
useState
useEffect
useDispatch
useParams
useSelector
useLocation
useNavigate
useRef
Custom-Hook
In the development of Moviestan, 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.
Please note that Moviestan 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.
If you have any questions or feedback, feel free to reach out:
- LinkedIn : https://www.linkedin.com/in/yashk9293/
- GitHub : https://github.com/yashk9293