🎥 LessonSync

A modern video-based learning platform that enables interactive Q&A on educational videos. Built with React, Node.js, and Mux for seamless video streaming and engagement.

✨ Features

🎬 Video Management

• Upload & Stream: Upload videos with automatic processing via Mux
• Interactive Timeline: Visual timeline with question markers for easy navigation
• Video Recording: Built-in video recorder for questions and answers
• Auto-optimization: Videos are automatically optimized for streaming

💬 Interactive Q&A

• Timestamped Questions: Ask questions at specific video moments
• Video Responses: Record video answers to questions
• Real-time Engagement: Upvote questions and answers
• Smart Timeline: Click timeline markers to jump to questions

👥 User Experience

• User Authentication: Secure JWT-based authentication
• Public Discovery: Discover and watch videos from other users
• Personal Library: Manage your own video collection
• Analytics Dashboard: Track video views, likes, and engagement

🎨 Modern UI

• Responsive Design: Works perfectly on desktop and mobile
• Real-time Updates: Live progress tracking and notifications
• User Avatars: Colorful user avatars with consistent colors
• Smart Timestamps: Human-friendly time displays (e.g., "5m ago")

🚀 Tech Stack

Frontend

• React 19 - Modern UI framework
• Vite - Fast build tool and dev server
• React Router - Client-side routing
• Tailwind CSS - Utility-first CSS framework
• Mux Player - Professional video player
• Axios - HTTP client

Backend

• Node.js - JavaScript runtime
• Express.js - Web framework
• SQLite - Lightweight database
• JWT - Authentication tokens
• Mux API - Video processing and streaming
• bcrypt - Password hashing

Infrastructure

• Mux - Video hosting and streaming
• Railway/Vercel - Deployment platforms
• GitHub - Version control

📦 Installation

Prerequisites

• Node.js 18+
• npm or yarn
• Mux account (for video processing)

1. Clone Repository

git clone https://github.com/Sujan-Koirala021/lessonsync.git
cd lessonsync

2. Install Dependencies

# Install backend dependencies
cd backend
npm install

# Install frontend dependencies
cd ../frontend
npm install

3. Environment Setup

Backend (.env)

cd backend
cp .env.example .env

Edit backend/.env:

# Mux Configuration (Get from https://dashboard.mux.com/)
MUX_TOKEN_ID=your_mux_token_id
MUX_TOKEN_SECRET=your_mux_token_secret

# JWT Secret (Generate a secure 32+ character string)
JWT_SECRET=your_secure_jwt_secret_here

# Database
DATABASE_PATH=lessonsync.db

# Server
PORT=4000
NODE_ENV=development

# CORS
FRONTEND_URL=http://localhost:5173

Frontend (.env)

cd frontend
cp .env.example .env

Edit frontend/.env:

VITE_API_URL=http://localhost:4000
VITE_APP_NAME=LessonSync

4. Initialize Database

cd backend
npm run init-db

5. Start Development Servers

Backend (Terminal 1)

cd backend
npm run dev

Frontend (Terminal 2)

cd frontend
npm run dev

Visit http://localhost:5173 to see the app! 🎉

📖 Usage

For Students

1. Discover Videos: Browse public educational videos
2. Ask Questions: Click anywhere on the timeline to ask timestamped questions
3. Video Responses: Record video answers to engage with content
4. Interactive Learning: Use timeline markers to navigate to specific topics

For Educators

1. Upload Content: Upload educational videos with titles and descriptions
2. Monitor Engagement: View analytics on video performance
3. Answer Questions: Respond to student questions with text or video
4. Track Progress: See which parts of videos generate most questions

🛠️ API Endpoints

Authentication

• POST /api/auth/register - User registration
• POST /api/auth/login - User login
• GET /api/auth/me - Get current user

Videos

• GET /videos - Get user’s videos
• POST /upload - Upload new video
• GET /videos/:id - Get specific video
• PUT /videos/:id - Update video
• DELETE /videos/:id - Delete video

Discovery

• GET /api/discover/videos - Get public videos
• GET /api/discover/videos/:id - Get public video details
• GET /api/discover/search - Search public videos

Questions & Answers

• GET /videos/:id/questions - Get video questions
• POST /videos/:id/questions - Add question
• GET /questions/:id/answers - Get question answers
• POST /questions/:id/answers - Add answer
• POST /questions/:id/upvote - Upvote question
• POST /answers/:id/upvote - Upvote answer

🎯 Key Features Explained

Interactive Timeline

• Visual Progress: Blue bar shows current playback position
• Question Markers: Red dots indicate where questions were asked
• Click to Seek: Click anywhere on timeline to jump to that moment
• Hover Tooltips: Preview question content on hover

Video Recording

• Built-in Recorder: Record questions and answers directly in the app
• Camera Ready Check: Ensures camera is active before recording starts
• Multiple Formats: Supports various video codecs for browser compatibility
• Real-time Preview: See yourself while recording

User System

• Smart Avatars: Colorful avatars with user initials
• Consistent Colors: Each user gets a unique, consistent color
• Relative Timestamps: Shows "5m ago" instead of full dates for recent activity
• Auto-fill Names: Uses logged-in user’s information automatically

🔧 Development

Project Structure

lessonsync/
├── frontend/                 # React frontend
│   ├── src/
│   │   ├── components/      # Reusable components
│   │   ├── pages/          # Page components
│   │   ├── contexts/       # React contexts
│   │   └── utils/          # Utility functions
│   └── public/             # Static assets
├── backend/                 # Node.js backend
│   ├── models/             # Database models
│   ├── routes/             # API routes
│   ├── middleware/         # Express middleware
│   ├── database/           # Database connection
│   └── scripts/            # Utility scripts
└── docs/                   # Documentation

Available Scripts

Backend

npm run dev          # Start development server
npm start           # Start production server
npm run init-db     # Initialize database

Frontend

npm run dev         # Start development server
npm run build       # Build for production
npm run preview     # Preview production build

Database Scripts

# Clear all data (keeps schema)
node backend/scripts/clear-database.js

# Reset database completely
node backend/scripts/reset-database.js

# Make all videos public
node backend/scripts/make-all-videos-public.js

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Mux - For excellent video infrastructure
• React Team - For the amazing framework
• Tailwind CSS - For beautiful, utility-first styling

---

Made with ❤️ for interactive learning