Skip to content

README.md

Latest commit

 

History

History
73 lines (54 loc) · 2.22 KB

README.md

File metadata and controls

73 lines (54 loc) · 2.22 KB

Live Demo

WEB BINGE

WEB BINGE is a responsive React single-page application for browsing TV shows and movies. It includes a dynamic watchlist, a modal details view, and a details page with an embedded video and suggestions.

Features

  • Responsive UI (desktop/tablet/mobile) using custom CSS
  • Browse sections: Top TV Shows and Top Movies
  • Filter by minimum star rating (0.0 to 5.0) with numeric input
  • Click any card to open a modal with title, year, runtime/director, and an extended description
  • Add/remove/clear items in My Watchlist (persisted in localStorage)
  • Click Watch Now to navigate to the /details page
  • /details page shows an embedded video, extended description, and a suggestions list

Tech Stack

  • React (component-based UI + state handling)
  • React Router DOM (navigation between main page and details page)
  • Vite (build tooling)
  • HTML + CSS (semantic structure + styling/responsiveness)
  • JavaScript (dynamic behavior: filtering, modal, watchlist, persistence)

Getting Started

  1. Install dependencies:

    npm install

  2. Run in development mode:

    npm run dev

  3. Build the production bundle:

    npm run build

  4. (Optional) Preview the production build:

    npm run preview

Usage

  • Filter: Set “Minimum stars” (0.0 - 5.0). Cards update instantly.
  • Add to Watchlist:
    • Type a title in My Watchlist and click Add Movie.
    • If the title matches an existing item, the full details are added; otherwise a new placeholder entry is created.
  • Remove/Clear:
    • Click Remove on a watchlist card.
    • Click Clear All to empty the watchlist.
  • Details:
    • Click a card to open the modal.
    • Click Watch Now to go to the full details page.

Project Structure

  • index.html - app root HTML
  • src/main.jsx - React bootstrap
  • src/App.jsx - routes + watchlist persistence
  • src/pages/ - MainPage.jsx, DetailsPage.jsx
  • src/components/ - Navbar, MovieCard, Modal, Notification, etc.
  • src/data/ - seed media data
  • src/utils/ - helper functions
  • src/style.css - styling