A modern streaming platform built with React, TypeScript, and Firebase, featuring movies, TV shows, and sports content with PWA support.
- 🎬 Stream movies and TV shows
- ⚽ Live sports streaming
- 🎯 Personalized watch history and recommendations
- 🔍 Advanced search functionality
- 📱 Progressive Web App (PWA) support
- 🌙 User preferences with customizable accent colours
- 🔐 Firebase authentication and real-time data
- 📺 Multi-source streaming support
- 📱 Responsive design for all devices
-
Frontend:
- React 18.x
- TypeScript
- Vite
- TailwindCSS
- Radix UI Components
- Framer Motion
- React Query
-
Backend & Services:
- Firebase (Authentication, Firestore)
- Supabase
-
Development & Build Tools:
- ESLint
- PostCSS
- TypeScript
- Vite PWA Plugin
- Node.js (Latest LTS version recommended)
- npm or yarn
- Firebase account and project
- Supabase account and project
- Clone the repository
- Install dependencies:
npm install
- Create a
.env
file based on.example.env
and fill in your Firebase credentials:
VITE_FIREBASE_API_KEY=
VITE_FIREBASE_AUTH_DOMAIN=
VITE_FIREBASE_PROJECT_ID=
VITE_FIREBASE_STORAGE_BUCKET=
VITE_FIREBASE_MESSAGING_SENDER_ID=
VITE_FIREBASE_APP_ID=
VITE_FIREBASE_MEASUREMENT_ID=
Run the development server:
npm run dev
Build for production:
npm run build
Preview production build:
npm run preview
- Click the "Deploy to Netlify" button above
- Connect your GitHub repository
- Configure your environment variables in Netlify's dashboard
- Your site will be automatically deployed
- Click the "Deploy to Cloudflare Pages" button above
- Connect your GitHub repository
- Configure the build settings:
- Build command:
npm run build
- Build output directory:
dist
- Node.js version:
18.x
- Build command:
- Add your environment variables in the Pages settings
- Your site will be automatically deployed
/src
- Main application source code/components
- Reusable React components/contexts
- React context providers/hooks
- Custom React hooks/lib
- Utility libraries and configurations/pages
- Application pages/routes/utils
- Helper functions and type definitions
- User signup/login with Firebase
- Protected routes for authenticated users
- User profile management
- Multiple streaming sources support
- HD quality indicators
- Continuous playback
- Watch history tracking
- Live sports events
- Multiple stream qualities
- Real-time updates
- Sports categories and filtering
- Offline support
- Install prompt
- Service worker caching
- Push notifications (planned)
- Custom accent colors
- Watch history
- Favorites list
- Watch later list
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature
) - Commit your changes (
git commit -m 'Add some AmazingFeature'
) - Push to the branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
This project is for educational demonstration purposes.
See Privacy Policy for details about data collection and usage.