Skip to content

Latest commit

 

History

History
108 lines (60 loc) · 3.2 KB

README.md

File metadata and controls

108 lines (60 loc) · 3.2 KB

FLAME Movie Application -

Fully responsive web application to get to know about awesome movies and web shows. Everything is renderd dynamically from TMDB's API using Axios, Redux, Custom Hooks and many more usefull react libraries.

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.

Live link - Try Now 🙂

🖥️ Screen Preview:

🏠 Random Home Page Background

Alt Text

Details of Movie / TV

Alt Text

Recomendation Page for Movies && TV Shows

Alt Text

Footer

Alt Text

🛠️ Installation Steps:

1. Clone the repository

git clone https://github.com/Abhishek5165/Private.git

2. Install the required dependencies 

npm install

3. Start the development server

npm run dev

4. Access the application at

http://localhost:5173/

Contact 🌟

If you have any query or feedback, feel free to reach out 💖: