A real-time collaborative classroom platform built for teachers and students. ClassNotes Live combines shared notes, interactive learning tools, and role-based controls into one seamless web app.
- Multiple brush sizes and colors
- Real-time drawing with other users
- Perfect for diagrams, math problems, quick sketches, and visual explanations
- Works inside each room so students and teachers collaborate live
- Shared text editor for each room
- Instant updates across all connected users
- Teachers can lock the notes, preventing students from editing
- Great for lectures, guided exercises, and controlled writing sessions
- Built-in quiz system for quick assessments
- Flashcards for memorization and study
- Students can practice directly inside the app
- Text chat sidebar in each room
- See who's online and send messages instantly
- Auto-scrolls to new messages
- Collapsible sidebar for more screen space
- Teachers and students can chat together
- LaTeX support for mathematical equations
- Click the "fx" button in notes view to open the equation editor
- Real-time preview of equations
- Equations are inserted with
$$...$$delimiters for rendering
- Full theme toggle
- Clean UI optimized for both bright and low-light environments
- Saves user preference
| Student Account | Teacher Account |
|---|---|
| Join rooms | Create rooms |
| Write notes (unless locked) | Lock/unlock notes |
| Draw on the canvas | Control collaboration |
| Take quizzes | Manage quizzes & flashcards |
| Use flashcards | Lead real-time sessions |
- Sign Up / Sign In system
- Choose Teacher or Student during registration
- Secure session handling
- Role-based permissions
https://class-notes-live.vercel.app/
- React 19 - UI library
- TanStack Start - Full-stack React framework
- TanStack Router - Type-safe routing
- Tailwind CSS - Styling
- Radix UI - Unstyled UI components
- Firebase - Authentication & Firestore
- Fastify - Fast Node.js web framework
- Firebase Admin - Server-side Firebase SDK
- WebSocket - Real-time communication
- Node.js >= 20
- npm or bun (recommended)
- Firebase project with Firestore and Authentication enabled
git clone https://github.com/AnastKara/ClassNotes_Live.git
cd ClassNotes_Livecp .env.example .envEdit .env with your Firebase configuration:
VITE_FIREBASE_API_KEY=your-api-key
VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your-sender-id
VITE_FIREBASE_APP_ID=your-app-id
VITE_API_BASE_URL=http://localhost:3001cp backend/.env.example backend/.envEdit backend/.env with your Firebase Admin credentials:
FIREBASE_PROJECT_ID=your-project-id
FIREBASE_CLIENT_EMAIL=firebase-adminsdk-xxxxx@your-project.iam.gserviceaccount.com
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n"
PORT=3001
CORS_ORIGIN=http://localhost:5174# Install frontend dependencies
npm install
# Install backend dependencies
cd backend
npm install
cd ..# Terminal 1: Start frontend
npm run dev
# Terminal 2: Start backend
cd backend
npm run devThe application will be available at http://localhost:5174
ClassNotes_Live/
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── drawing-canvas.tsx
│ │ ├── draw-app.tsx
│ │ └── ui/ # Radix UI components
│ ├── routes/ # TanStack Router routes
│ │ ├── index.tsx # Main application
│ │ ├── login.tsx # Authentication page
│ │ └── signup.tsx # Registration page
│ ├── integrations/ # Third-party integrations
│ │ └── firebase/ # Firebase client configuration
│ ├── lib/ # Utility functions
│ └── styles.css # Global styles
├── backend/
│ ├── src/
│ │ ├── routes/ # API routes
│ │ │ ├── rooms.ts # Room management
│ │ │ ├── flashcards.ts
│ │ │ ├── users.ts
│ │ │ └── health.ts
│ │ ├── services/ # Business logic
│ │ ├── security/ # Authentication middleware
│ │ └── server/ # Server configuration
│ └── package.json
├── vite.config.ts
└── package.json
npm run dev # Start development server
npm run build # Build for production
npm run preview # Preview production build
npm run lint # Run ESLint
npm run format # Format code with Prettiernpm run dev # Start development server with hot reload
npm run build # Compile TypeScript
npm run start # Start production server
npm run lint # Run ESLintrooms- Subject room documents with content and lock statusflashcards- Flashcard documents linked to roomsusers- User profiles with role information
ClassNotes Live aims to be a lightweight, fast, and accessible classroom collaboration tool that supports:
- Live teaching - Real-time note sharing during lectures
- Group study - Collaborative learning environments
- Visual learning - Drawing and diagramming capabilities
- Quick assessments - Built-in quiz system for instant feedback
- Organized note-taking - Subject-based room organization
Planned future upgrades:
- Offline mode with local storage sync
- Real time rooms
- CRDT-based syncing for conflict-free collaboration
- Document history and version control
- Teacher dashboards for analytics
- Multi-room management interface
Contributions are welcome! If you want to add features, improve UI, or help with backend logic, feel free to open an issue or submit a pull request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Anast Kara
- GitHub: @AnastKara
Built with TanStack Start, Fastify, and Firebase.