Skip to content

README.md

Latest commit

 

History

History
212 lines (169 loc) · 4.86 KB

README.md

File metadata and controls

212 lines (169 loc) · 4.86 KB

Live Session App 🎥

A complete MERN stack application that allows an admin to start a live video session and students to join via a unique URL.

📋 Features

  • Admin Dashboard: Start a session with one click
  • Unique Session URLs: Each session gets a unique ID and shareable link
  • Video Player: Full-featured video player with controls (Play/Pause, Volume, Fullscreen, Settings)
  • Student Access: Students can join using the unique session link
  • Responsive Design: Beautiful UI built with Tailwind CSS

🛠️ Tech Stack

Backend

  • Node.js + Express.js
  • MongoDB + Mongoose
  • UUID for unique ID generation
  • CORS for cross-origin requests

Frontend

  • React.js + Vite
  • React Router for navigation
  • React Player for video playback
  • Tailwind CSS for styling
  • Axios for API calls

📦 Project Structure

live-session-app/
│
├── backend/
│   ├── server.js
│   ├── routes/sessionRoutes.js
│   ├── models/Session.js
│   ├── controllers/sessionController.js
│   ├── package.json
│   └── .env
│
├── frontend/
│   ├── src/
│   │   ├── pages/
│   │   │   ├── AdminPage.jsx
│   │   │   └── StudentPage.jsx
│   │   ├── components/
│   │   │   └── VideoPlayer.jsx
│   │   ├── App.jsx
│   │   ├── main.jsx
│   │   └── index.css
│   ├── index.html
│   ├── package.json
│   ├── vite.config.js
│   ├── tailwind.config.js
│   └── postcss.config.js
│
└── README.md

🚀 Getting Started

Prerequisites

  • Node.js (v16 or higher)
  • MongoDB (installed and running locally)
  • npm or yarn

Installation

1. Clone the repository

git clone <your-repo-url>
cd live-session-app

2. Setup Backend

cd backend
npm install

Create a .env file in the backend folder:

MONGODB_URI=mongodb://localhost:27017/live-session-app
PORT=5000

Start MongoDB (if not running):

# On Windows (if installed as service)
net start MongoDB

# Or using mongod directly
mongod

Start the backend server:

npm run dev

The backend will run on http://localhost:5000

3. Setup Frontend

Open a new terminal:

cd frontend
npm install

Start the frontend development server:

npm run dev

The frontend will run on http://localhost:5173

🎯 Usage

For Admin:

  1. Open http://localhost:5173 in your browser
  2. Click the "Start Session" button
  3. A new session will be created with:
    • Unique Session ID
    • Student Access Link
  4. Copy the student link and share it with students
  5. The video player will appear with full controls

For Students:

  1. Open the shared URL (e.g., http://localhost:5173/session/abc-123-xyz)
  2. The session will load automatically
  3. Watch the video with full playback controls

🔌 API Endpoints

POST /api/start-session

Creates a new session

Response:

{
  "success": true,
  "data": {
    "type": "admin",
    "unique_id": "550e8400-e29b-41d4-a716-446655440000",
    "userurl": "http://localhost:5173/session/550e8400-e29b-41d4-a716-446655440000",
    "createdAt": "2025-10-30T10:30:00.000Z",
    "updatedAt": "2025-10-30T10:30:00.000Z"
  }
}

GET /api/session/:unique_id

Retrieves session details by unique ID

Response:

{
  "success": true,
  "data": {
    "type": "admin",
    "unique_id": "550e8400-e29b-41d4-a716-446655440000",
    "userurl": "http://localhost:5173/session/550e8400-e29b-41d4-a716-446655440000",
    "createdAt": "2025-10-30T10:30:00.000Z",
    "updatedAt": "2025-10-30T10:30:00.000Z"
  }
}

🎨 Customization

Change Video URL

In both AdminPage.jsx and StudentPage.jsx, update the sampleVideoUrl variable:

const sampleVideoUrl = 'YOUR_VIDEO_URL_HERE';

Supported video formats:

  • YouTube videos
  • Vimeo videos
  • Direct video files (mp4, webm, etc.)
  • Live streams (HLS, DASH)

Styling

The app uses Tailwind CSS. Modify the styles in the component files or update tailwind.config.js for theme customization.

📝 Notes

  • This is a basic implementation without real-time streaming
  • No authentication is implemented
  • The video URL is hardcoded (can be made dynamic)
  • MongoDB should be running before starting the backend

🔧 Troubleshooting

MongoDB Connection Error:

  • Ensure MongoDB is running: mongod
  • Check the connection string in .env

Port Already in Use:

  • Change the port in .env (backend) or vite.config.js (frontend)

CORS Error:

  • Ensure backend CORS is properly configured
  • Check that frontend is calling the correct backend URL

📄 License

MIT License - feel free to use this project for learning and development!

👨‍💻 Author

Built with ❤️ using the MERN stack