A professional Netflix-inspired streaming platform for both TV shows and movies, built with modern web technologies and featuring Google Drive video integration.
- Netflix-style video player with Google Drive integration
- Support for both TV shows and movies
- Progress tracking with resume functionality
- Auto-play next episode for shows
- Continue watching section
- Episode selection with season navigation
- Netflix-inspired design
- Dark/Light theme support
- Responsive layout (mobile-first)
- Smooth animations
- Professional components (shadcn/ui)
- Advanced search with filters (genre, year range)
- Live search in header with instant results
- Category/genre filtering
- Separate browse pages for shows and movies
- Trending content sections
- Featured hero carousel with auto-play
- TMDB integration for rich metadata
- Unified watchlist for shows and movies
- Viewing progress tracking per episode
- Share functionality for shows and movies
- Session-based data storage
- Fully mobile responsive
- Touch-friendly interface
- Dark theme optimized
- Frontend: React 18 + TypeScript
- Styling: TailwindCSS + shadcn/ui
- Backend: Express.js + Node.js
- Database: Drizzle ORM (PostgreSQL ready)
- Build: Vite
- State: TanStack Query
- Node.js 18+ installed
- npm or yarn
# Clone the repository
git clone https://github.com/yawarquil/streamvault.git
cd streamvault
# Install dependencies
npm install
# Start development server
npm run devhttp://localhost:5000
That's it! Your StreamVault is running! 🎉
StreamVault/
├── client/ # Frontend React application
│ ├── src/
│ │ ├── pages/ # Page components
│ │ │ ├── home.tsx # Homepage with hero carousel
│ │ │ ├── show-detail.tsx # Show details page
│ │ │ ├── watch.tsx # Video player page
│ │ │ ├── search.tsx # Search results
│ │ │ └── category.tsx # Category browsing
│ │ ├── components/ # Reusable components
│ │ │ ├── hero-carousel.tsx # Auto-playing hero slider
│ │ │ ├── content-row.tsx # Horizontal content rows
│ │ │ ├── show-card.tsx # Show card component
│ │ │ ├── header.tsx # Navigation header
│ │ │ ├── footer.tsx # Footer component
│ │ │ └── ui/ # shadcn/ui components
│ │ ├── hooks/ # Custom React hooks
│ │ ├── lib/ # Utilities
│ │ └── index.css # Global styles
│ └── index.html
├── server/ # Backend Express API
│ ├── index.ts # Server entry point
│ ├── routes.ts # API route handlers
│ ├── storage.ts # Data storage layer
│ └── vite.ts # Vite integration
├── shared/ # Shared TypeScript types
│ └── schema.ts # Database schema (Drizzle)
├── package.json
├── vite.config.ts
├── tailwind.config.ts
└── tsconfig.json
npm run dev # Start dev server (http://localhost:5000)
npm run check # TypeScript type checkingnpm run add-show # Add show from TMDB
npm run add-movie # Add movie from TMDB
npm run add-top-movies # Add top 200 movies
npm run update-shows # Update show metadatanpm run db:push # Push schema to PostgreSQLnpm run build # Build for production
npm start # Start production server- Auto-playing slider (5-second intervals)
- Large backdrop images with gradients
- Featured show information
- Play Now & More Info buttons
- Navigation arrows and dots
- Responsive on all devices
- Trending Now - Popular shows
- Continue Watching - Resume where you left off
- Categories - Action, Drama, Comedy, Horror
- Search - Find shows by title, actor, or genre
- Google Drive video embedding
- Custom controls overlay
- Progress tracking
- Auto-save watch position
- Up Next sidebar
- Keyboard shortcuts
- Add/remove shows
- Session-based storage
- Quick access from header
- Persistent across sessions
Create .env file in root:
# Database (Optional - uses in-memory by default)
DATABASE_URL=postgresql://user:password@host:5432/streamvault
# Server
NODE_ENV=development
PORT=5000Edit client/src/components/header.tsx:
<span className="text-xl font-bold">YourSiteName</span>Edit client/src/index.css:
:root {
--primary: 0 0% 8%; /* Background */
--accent: 0 91% 47%; /* Netflix Red */
}Edit server/storage.ts - add shows to the shows array
GET /api/shows- Get all showsGET /api/shows/search?q=query- Search showsGET /api/shows/:slug- Get show by slug
GET /api/movies- Get all moviesGET /api/movies/:slug- Get movie by slug
GET /api/episodes/:showId- Get episodes for a show
GET /api/watchlist- Get user watchlist (shows + movies)POST /api/watchlist- Add to watchlist (showId or movieId)DELETE /api/watchlist/show/:showId- Remove show from watchlistDELETE /api/watchlist/movie/:movieId- Remove movie from watchlist
GET /api/progress- Get viewing progressPOST /api/progress- Update progress
GET /api/categories- Get all categories
The platform comes pre-loaded with 10 popular shows:
- Stranger Things
- Breaking Bad
- The Crown
- Money Heist
- The Office
- Dark
- Peaky Blinders
- Narcos
- The Witcher
- Friends
Each show includes:
- Multiple seasons
- Episode data
- Cast information
- High-quality images
- Working video playback (placeholder)
npm install -g vercel
vercelnpm run build
# Deploy dist folder- Connect GitHub repository
- Build command:
npm run build - Start command:
npm start
- Quick Setup - Get started in 5 minutes
- Improvements Plan - Feature roadmap
- Architecture - Full system documentation
- Design Guidelines - UI/UX standards
- React 18 - UI library
- TypeScript - Type safety
- Vite - Build tool & dev server
- TailwindCSS - Utility-first CSS
- shadcn/ui - Component library
- Radix UI - Accessible primitives
- TanStack Query - Server state management
- Wouter - Lightweight routing
- Lucide React - Icon library
- Express.js - Web framework
- Node.js - Runtime
- Drizzle ORM - Database toolkit
- TypeScript - Type safety
- PostgreSQL - Production database
- Neon - Serverless Postgres
- In-Memory - Development fallback
✅ Professional UI - Netflix-quality design
✅ Working Videos - Placeholder video integrated
✅ Responsive - Mobile, tablet, desktop
✅ Dark/Light Mode - Theme toggle
✅ Search - Real-time search
✅ Watchlist - Save favorites
✅ Progress Tracking - Resume watching
✅ Categories - Browse by genre
✅ Session Management - User data persistence
✅ Type Safe - Full TypeScript
- Fast Load Times - < 2 seconds
- Optimized Bundle - Code splitting
- Lazy Loading - Images & routes
- Caching - TanStack Query
- Responsive - Mobile-first
- Session-based data isolation
- Input validation with Zod
- Type-safe API contracts
- CORS configuration
- Environment variables
This is a personal project, but feel free to:
- Fork the repository
- Create feature branch
- Make improvements
- Submit pull request
MIT License - feel free to use for personal or commercial projects
- ✅ Full Movie Support - Browse, watch, and manage movies
- ✅ Unified Watchlist - Combined shows and movies with tabs
- ✅ Enhanced Search - Filter by genre, year, with scrollable sidebar
- ✅ Consistent UI - Matching card designs for shows and movies
- ✅ Share Functionality - Share shows and movies with friends
- ✅ TMDB Integration - Rich metadata from The Movie Database
- ✅ 200+ Movies - Pre-loaded with top-rated movies
- ✅ Category Pages - Browse by genre with show/movie filtering
- ✅ Clean Design - Removed genre badges, improved spacing
- ✅ Better Metadata - Shows display seasons, movies display duration
- Run the app -
npm run dev - Explore features - Browse shows, search, add to watchlist
- Customize - Change branding, colors, content
- Deploy - Push to production
- Improve - See
IMPROVEMENTS_PLAN.md
- Documentation: Check the docs folder
- Issues: Review code comments
- Architecture: See
replit.md - Design: See
design_guidelines.md
This is a production-ready streaming platform with:
- Professional Netflix-inspired design
- Modern React + TypeScript architecture
- Beautiful UI with shadcn/ui components
- Working video playback
- Comprehensive feature set
- Full documentation
- Easy to customize and deploy
Built with ❤️ for StreamVault
Your Premium Web Series Destination
Beautiful Netflix-inspired homepage with hero carousel and content rows.
Browse all TV shows with clean card design and hover effects.
Explore movies with featured carousel and genre-based rows.
Comprehensive show information with seasons, episodes, and cast details.
Movie details with watchlist, share, and play functionality.
Netflix-style player with episode navigation and progress tracking.
Clean movie player with Google Drive integration.
Advanced search with genre filters and year range selection.
Browse content by genre with tabs for shows and movies.
Unified watchlist with tabs for all content, shows, and movies.
Fully responsive design optimized for mobile devices.
Ready to stream? Run npm run dev and visit http://localhost:5000 🎬