SnapCast is a modern video sharing and recording platform built with cutting-edge web technologies. Create, share and manage video content directly from your browser with features like screen recording, instant sharing, and comprehensive video management.
- Screen Recording - Record your screen with audio support
- Video Upload - Upload and share video content
- Google Authentication - Secure sign-in with Google
- Video Management - Organize your video library
- Public/Private Videos - Control video visibility
- User Profiles - Personalized user spaces
- Responsive Design - Works on all modern devices
- Video Analytics - Track video views and engagement
- Next.js 15 with App Router
- React 19
- TypeScript 5.8
- TailwindCSS 4.1
- Better Auth Client
- Drizzle ORM
- PostgreSQL
- Better Auth
- Xata Client
- Biome for linting/formatting
- Turbopack for fast builds
- Environment variables management
├── app/ # Next.js app directory
│ ├── (auth)/ # Authentication routes
│ │ ├── sign-in/ # Sign in page
│ │ └── sign-up/ # Sign up page
│ ├── (root)/ # Main app routes
│ │ ├── profile/ # User profiles
│ │ ├── upload/ # Video upload
│ │ └── video/ # Video pages
│ └── api/ # API routes
├── components/ # React components
│ ├── FileInput.tsx # File upload component
│ ├── FormField.tsx # Form input component
│ ├── Header.tsx # Page header
│ ├── Navbar.tsx # Navigation bar
│ └── VideoCard.tsx # Video preview card
├── lib/ # Utility functions
│ ├── auth.ts # Auth configuration
│ ├── auth.client.ts # Client-side auth
│ └── hooks/ # Custom React hooks
├── drizzle/ # Database setup
│ ├── db.ts # Database client
│ └── schema.ts # Database schema
└── constants/ # App constants
- Clone and Install
git clone https://github.com/your-username/snapcast.git
cd snapcast
pnpm install- Environment Setup
Create .env file based on .env.example:
# Auth Configuration
BETTER_AUTH_SECRET=""
BETTER_AUTH_URL=""
GOOGLE_CLIENT_ID=""
GOOGLE_CLIENT_SECRET=""
# Database
XATA_API_KEY=""
DATABASE_URL_POSTGRES=""- Start Development Server
pnpm dev/- Home page with video grid/sign-in- Authentication page/upload- Video upload form/profile/[id]- User profiles/video/[videoId]- Video details
- Google OAuth integration
- Protected routes with middleware
- Session management
- Video upload with preview
- Thumbnail generation
- Public/private visibility
- Video metadata editing
- Responsive navbar
- Grid layout for videos
- Form components
- File upload handling
pnpm dev # Start development server
pnpm build # Build for production
pnpm start # Start production server
pnpm lint # Run Biome linting// Main tables
user # User information
session # Auth sessions
account # Connected accounts
video # Video content
verification # Email verification- Mobile: 320px+
- Tablet: 768px+
- Laptop: 1024px+
- Desktop: 1280px+
- Large: 1536px+
- Fork the repository
- Create feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open a Pull Request
MIT License - see LICENSE
Built with ❤️ using Next.js 15 and React 19