This guide will help you set up Let's Stream V2.0 for development.

Before you begin, ensure you have:

• Node.js (LTS version 18.x or higher)
• npm or yarn
• Git
• A code editor (VS Code recommended)
• Firebase account
• Supabase account

git clone https://github.com/chintan992/letsstream2.git
cd lets-stream-v2.0

npm install

1. Copy .example.env to .env:

cp .example.env .env

2. Fill in the environment variables:

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=

npm run dev

Access the app at http://localhost:8080

src/
├── components/     # Reusable React components
├── contexts/       # React context providers
├── hooks/         # Custom React hooks
├── lib/           # Utility libraries
├── pages/         # Application routes
└── utils/         # Helper functions

• Email/Password login
• Google Authentication
• Protected routes
• User profiles

• Movies and TV shows
• Sports streaming
• Search functionality
• Media playback

• Watch history
• Favorites list
• User preferences
• Custom themes

• Offline functionality
• Install Prompt
• Push notifications
• Background sync

• npm run dev - Start the development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

The project uses:

• TypeScript
• ESLint
• Prettier
• Conventional Commits

1. File Structure

// ComponentName.tsx
import { useState, useEffect } from 'react';
import { useAuth } from '@/hooks';

interface Props {
  // Props definition
}

const ComponentName: React.FC<Props> = ({ prop1, prop2 }) => {
  // Component logic
};

export default ComponentName;

2. Styling

• TailwindCSS for styling
• CSS modules for component-specific styles
• shadcn/ui components for UI elements

1. Create Project

   • Go to Firebase Console
   • Create a new project
   • Enable required services

2. Authentication

   • Enable Email/Password
   • Configure Google Sign-in
   • Set authorized domains

3. Firestore

   • Create database
   • Set up security rules
   • Configure indexes

npm run test

npm run test:e2e

1. Test authentication flows
2. Verify media playback
3. Check PWA features
4. Test offline functionality

• Clear node_modules and reinstall
• Check the TypeScript version
• Verify environment variables

• Confirm Firebase configuration
• Check authorized domains
• Verify security rules

• Clear service worker
• Update manifest.json
• Check cache storage

1. Explore the Codebase

   • Review components
   • Understand contexts
   • Study utilities

2. Make Your First Change

   • Pick an issue
   • Create a branch
   • Submit a PR

3. Join the Community

   • Star the repository
   • Report issues
   • Contribute code

• Project Wiki
• API Reference
• Contributing Guide

• React Documentation
• Firebase Docs
• Vite Guide
• TailwindCSS

• GitHub Issues
• Discord Server
• Stack Overflow

• Keep components small and focused
• Use TypeScript strictly
• Follow project conventions
• Write meaningful comments

• Implement lazy loading
• Optimize images
• Use proper caching
• Monitor bundle size

• Validate user input
• Implement rate-limiting
• Use security headers
• Keep dependencies updated

• Check existing issues
• Create new if needed
• Assign to yourself
• Add labels

• Create a feature branch
• Follow the style guide
• Write tests
• Update documentation

• Submit PR
• Request reviews
• Address feedback
• Maintain quality

• Merge to main
• Verify deployment
• Monitor analytics
• Check performance