A fast, modern streaming experience for discovering and watching movies and TV shows. Built with Vanilla JavaScript and Vite, it lets you explore a wide library of titles, play content instantly through embedded players, and save your favorites to a personal watchlist — no sign-up required, just open and watch.
- Home Page — Hero carousel with featured movies, trending rows, new releases, and top-rated content
- Movies Page — Browse 90,000+ movies with genre filter chips and paginated grid
- TV Shows Page — Explore 19,000+ TV series with genre filtering and pagination
- Embedded Player — High-quality video player powered by VidAPI (supports 1080p, 720p, etc.)
- TV Episode Selector — Season dropdown and episode grid for easy navigation
- Auto-Next Episode — Automatically loads the next episode when one finishes
- Resume Playback — Saves your progress and resumes where you left off
- Detail Modal — Click any card to see synopsis, runtime, cast, director, and genres
- Metadata powered by Cinemeta — Free API, no key required
- Watch Page Info — Full movie/show details displayed below the player
- Watchlist — Add/remove favorites with a single click (persisted in LocalStorage)
- Watch History — Automatically tracks your recently watched content
- Dark Theme — Netflix-inspired dark UI with red accent colors
- Responsive — Fully responsive across mobile, tablet, and desktop
- Smooth Animations — Page transitions, hover effects, and micro-interactions
- Skeleton Loading — Card-shaped placeholders while content loads
- Back to Top — Floating button for easy navigation
| Layer | Technology |
|---|---|
| Build Tool | Vite |
| Language | Vanilla JavaScript (ES Modules) |
| Styling | Vanilla CSS with CSS Custom Properties |
| Font | Inter (Google Fonts) |
| Content API | VidAPI — Movie/TV listings & embedded player |
| Metadata API | Cinemeta — Synopsis, cast, runtime (no key needed) |
| Storage | LocalStorage — Watchlist, history, resume progress |
| Router | Custom hash-based SPA router |
TanawTa/
├── index.html # SPA entry point
├── package.json # Project config & scripts
├── vite.config.js # Vite configuration
└── src/
├── main.js # App entry — routes & initialization
├── router.js # Hash-based SPA router with transitions
├── api.js # VidAPI + Cinemeta API services
├── storage.js # LocalStorage (watchlist, history, progress)
├── styles/
│ └── index.css # Complete design system & responsive styles
├── components/
│ ├── navbar.js # Navigation bar with mobile toggle
│ ├── card.js # Movie/TV card with poster & rating
│ ├── row.js # Horizontal scrollable content row
│ ├── modal.js # Detail modal with Cinemeta integration
│ ├── player.js # VidAPI iframe player wrapper
│ ├── back-to-top.js # Floating scroll-to-top button
│ └── footer.js # Site footer
└── pages/
├── home.js # Homepage with hero slider & content rows
├── movies.js # Movies browse page with genre filters
├── tvshows.js # TV Shows browse page with genre filters
└── watch.js # Watch page with player & episode selector
- Node.js (v18 or higher)
- npm (comes with Node.js)
# Clone the repository
git clone https://github.com/yourusername/TanawTa.git
cd TanawTa
# Install dependencies
npm install
# Start the development server
npm run devThe app will open at http://localhost:3000.
npm run build
npm run preview- Listings:
/movies/latest/page-{N}.json— Paginated movie/TV catalogs - Player:
vaplayer.ru/embed/movie/{id}— Embedded video player via iframe - No API key required for listing endpoints
- Endpoint:
v3-cinemeta.strem.io/meta/movie/{imdb_id}.json - Provides: Synopsis, runtime, cast, director, genres, trailers
- No API key required — completely free and open
| Page | Route | Description |
|---|---|---|
| Home | #/ |
Hero carousel, trending rows, new releases |
| Movies | #/movies |
Browse all movies with genre chips + grid |
| TV Shows | #/tv |
Browse all TV shows with genre chips + grid |
| Watch | #/watch/movie/:id |
Movie player with details |
| Watch TV | #/watch/tv/:id |
TV player with episode selector |
The dev server runs on port 3000 by default. Edit vite.config.js to change:
server: {
port: 3000, // Change this
open: true, // Auto-open browser
}- Colors: Edit CSS variables in
src/styles/index.cssunder:root - Brand Name: Search for "TanawTa" across components to rename
- Content: Adjust page sizes and API endpoints in
src/api.js
This project is open source and available under the MIT License.
TanawTa is a frontend project for educational and portfolio purposes. It does not host, store, or distribute any copyrighted content. All video playback is handled through third-party embed services. Users are responsible for ensuring compliance with applicable laws in their jurisdiction.