CineStream

A sleek, single-file movie & TV streaming app with a premium glassmorphism UI. Browse trending films, search titles, manage your watchlist, and stream instantly — all from one HTML file with zero build tools.

Live Demo

cine-stream.page.gd

Features

• Trending & Top Rated — Browse TMDB-powered catalogs with infinite scroll
• Smart Search — Real-time search across movies and TV shows
• TV Episodes — Season tabs, episode browser, and in-player episode drawer
• Continue Watching — Automatically tracks where you left off
• My List — Save movies/shows with one tap (heart icon)
• Fullscreen Player — Landscape-locked fullscreen with episode switching
• Profile Page — View stats and manage your data
• Glassmorphism UI — Animated orbs, film grain, smooth spring transitions
• Mobile-First — Bottom nav bar, responsive grid, touch-optimized
• Zero Dependencies — Pure HTML/CSS/JS, no npm, no build step

Setup

1. Get a TMDB API Key

   • Sign up at themoviedb.org
   • Go to Settings > API and request a key

2. Configure the API Key

   Edit js/env.js and replace the placeholder with your key:

   window.ENV = {
     TMDB_KEY: 'your_tmdb_api_key_here',
   };

3. Run

   Open index.html in any browser. That's it.

   # Or serve locally
   python3 -m http.server 8080

Project Structure

CineStream/
├── index.html        # Complete app (HTML + CSS + JS)
├── js/
│   └── env.js        # API keys (gitignored)
├── LICENSE           # MIT License
└── README.md

Tech Stack

Layer	Tech
Markup	Vanilla HTML5
Styling	CSS3 (glassmorphism, grid, custom properties)
Logic	Vanilla JavaScript (ES6+)
Movie Data	TMDB API
Streaming	VidApi embeds
Fonts	Google Fonts (Outfit, Space Grotesk)
Icons	Font Awesome 6

Disclaimer

CineStream does not host any files. All content is streamed from third-party embedded players. We do not upload, store, or control any media.

License

MIT — Alienkrishn