A video conferencing application built for modern classrooms. Host classes, study groups, and 1:1 sessions with simple, secure video powered by Cloudflare RealtimeKit.

• Create Meetings - Start a new video meeting with a custom name
• Join Meetings - Join existing meetings using a meeting ID
• Video Backgrounds - Blur your background or use virtual backgrounds
• Participant Presets - Support for different participant roles (host, participant)

• Frontend: React 19, TypeScript, Tailwind CSS, React Router
• Backend: Cloudflare Workers
• Video: Cloudflare RealtimeKit
• Build: Vite

• Node.js (v18 or later)
• A Cloudflare account with RealtimeKit enabled
• Wrangler CLI

1. Clone the repository:

git clone <repository-url>
cd learnly

2. Install dependencies:

npm install

3. Configure environment variables:

Create a .dev.vars file in the root directory with the following:

CF_API_TOKEN=your_cloudflare_api_token
APP_ID=your_realtimekit_app_id

The ACCOUNT_ID is already configured in wrangler.jsonc.

Start the development server:

npm run dev

This will start the Vite dev server with hot module replacement.

Build the application for production:

npm run build

Deploy to Cloudflare Workers:

npm run deploy

learnly/
├── src/
│   ├── pages/
│   │   ├── Home.tsx       # Landing page with create/join meeting UI
│   │   └── Meeting.tsx    # Video meeting room component
│   ├── App.tsx            # Main app with routing
│   └── main.tsx           # Entry point
├── worker/
│   └── index.ts           # Cloudflare Worker API endpoints
├── public/
│   └── learnly.svg        # App logo
└── wrangler.jsonc         # Cloudflare Workers configuration

The Cloudflare Worker provides three API endpoints:

• POST /api/meetings - Create a new meeting
• POST /api/tokens - Issue an auth token for a participant
• GET /api/presets - List available participant presets

MIT