Pixro - Advanced Webinar Platform

Pixro is a modern webinar platform built with Next.js, featuring AI-powered assistance, live streaming capabilities, and integrated payment processing. The platform enables users to create, manage, and host interactive webinars with features like real-time chat, AI agents, and automated attendee management.

🚀 Features

Core Functionality

• Live Webinar Hosting: Real-time streaming with Stream.io integration
• AI Assistant Integration: Powered by Vapi.ai for intelligent interaction
• Payment Processing: Stripe integration for monetization
• User Authentication: Secure auth system using Clerk
• Real-time Chat: Interactive communication during webinars
• Automated Attendee Management: Track and manage webinar participants

Additional Features

• 🌓 Dark/Light Mode Support
• 📊 Analytics Dashboard
• 💬 AI-powered Chat Assistance
• 🔐 Role-based Access Control
• 📱 Responsive Design
• 💳 Stripe Connect Integration

🛠 Tech Stack

• Frontend: Next.js 15.2.4 with React 19
• Backend: Next.js API Routes
• Database: PostgreSQL with Prisma ORM
• Authentication: Clerk
• Streaming: Stream.io
• AI Integration: Vapi.ai
• Payment Processing: Stripe
• State Management: Zustand
• UI Components: Radix UI
• Styling: Tailwind CSS

📁 Project Structure

Root Directory

• components.json - UI component configurations
• next.config.ts - Next.js configuration
• prisma/ - Database schema and migrations
• public/ - Static assets
• src/ - Source code

Source Directory (src/)

App Router (src/app/)

• (auth)/ - Authentication routes
  • callback/ - OAuth callback handling
  • sign-in/ - User sign-in
  • sign-up/ - User registration
• (protectedRoutes)/ - Authenticated user routes
  • ai-agents/ - AI assistant management
  • home/ - Dashboard
  • lead/ - Lead management
  • settings/ - User settings
  • webinars/ - Webinar management
• (publicRoutes)/ - Public access routes
  • live-webinar/ - Webinar viewing interface

Components (src/components/)

• ReusableComponent/ - Shared components
  • CreateWebinar/ - Webinar creation interface
  • LayoutComponents/ - Layout elements
  • Stripe/ - Payment components
  • SubscriptionModal/ - Subscription management
• ui/ - UI component library

Core Modules

• action/ - Server actions
• lib/ - Utility functions and configurations
• provider/ - Context providers
• store/ - State management (Zustand stores)

🗄️ Database Schema

Main Entities

• User: Account management and profile
• Webinar: Webinar session details
• Attendee: Participant information
• Attendance: Session participation tracking
• AiAgents: AI assistant configurations

🚀 Getting Started

Prerequisites

• Node.js (LTS version)
• PostgreSQL
• Stripe CLI (for payment testing)

Environment Setup

1. Clone the repository
2. Copy `.env.example` to `.env`
3. Configure environment variables:
   • Database connection
   • Stream.io credentials
   • Stripe keys
   • Clerk authentication
   • Vapi.ai configuration

Installation

```bash

Install dependencies

npm install

Setup database

npx prisma generate npx prisma db push

Run development server

npm run dev ```

Testing Payments

```bash

Start Stripe webhook listener

stripe listen --forward-to localhost:3000/api/stripe-webhook ```

🧪 Testing

Local Testing

• Use multiple browsers or incognito windows for testing webinar functionality
• Access via localhost:3000
• For local network testing, use your machine's IP address

Multiple Participant Testing

1. Start development server
2. Open different browsers/incognito windows
3. Login with different accounts
4. Join the same webinar session

📝 Key Files

Configuration

• next.config.ts - Next.js settings
• prisma/schema.prisma - Database schema
• tsconfig.json - TypeScript configuration

Core Components

• src/provider/StreamProvider.tsx - Video streaming setup
• src/lib/prismaClient.ts - Database client
• src/action/webinar.ts - Webinar management logic

🔒 Security

• JWT-based authentication
• Role-based access control
• Secure payment processing
• Protected API routes
• Input validation and sanitization

🌟 Best Practices

Development

• Use TypeScript for type safety
• Follow Next.js 13+ conventions
• Implement proper error handling
• Maintain consistent code style
• Write meaningful comments

Deployment

• Use environment variables
• Implement proper logging
• Monitor performance metrics
• Regular security updates
• Database backups

📫 Support

For issues and feature requests, please create an issue in the repository.

🔑 License

[License Type] - See LICENSE file for details

---

For detailed documentation on specific features or components, please refer to the corresponding directories and their README files.