ClassChat

A lightweight, real-time classroom discussion platform

Live App • Features • Tech Stack • Getting Started • Architecture

---

Overview

ClassChat is a web-based discussion platform built for classroom communities. It takes familiar social-media mechanics — posts, likes, and threaded replies — and adapts them for education, letting teachers moderate interactions and students participate in structured discussions.

URL: https://classchat.cc
Support: support@classchat.cc

Features

🏫 Classroom Management

• Create Classrooms — Teachers can create classrooms with custom names
• Join Codes — Each class has a unique 6-character join code and shareable invite link with QR code
• Rotate Join Codes — Regenerate codes to invalidate old invites
• Manage Users — View participants, assign/remove admin roles, kick users
• Soft Delete — Archive classrooms without losing data

📝 Posting System

• Text Posts — Free-text messages with optional topic tags
• Polls — Multi-option voting posts with real-time results
• Likes — Toggle likes on posts with live count updates
• Threaded Replies — Nested discussions under each post
• Real-time Updates — Posts sync instantly across all users via Firestore

🗂️ Topics & Organization

• Topic Tags — Categorize posts for easy filtering
• Topic Filtering — Filter classroom view by selected topics
• Chronological Feed — Posts ordered newest-first with pagination

👥 Roles & Permissions

Feature	Admin	Member
Create Classroom	✔	✘
Invite Users	✔	✘
Manage Users	✔	✘
Rename Classroom	✔	✘
Change Join Code	✔	✘
Delete Classroom	✔	✘
Delete Any Post	✔	✘
Create Post/Poll	✔	✔
Like & Reply	✔	✔
Delete Own Posts	✔	✔
Leave Classroom	✔	✔

🌙 User Experience

• Dark Mode — Toggle between light and dark themes
• Optimistic UI — Posts appear instantly before server confirmation
• Loading States — Spinners and overlays for async operations
• Responsive Design — Works across desktop and mobile

📧 Onboarding Emails

• Welcome Email — Immediate send on signup with first steps
• Day 1 — Nudge to complete setup and invite students
• Day 7 — Tips on polls and topics
• Day 14 — Moderation best practices

Tech Stack

Layer	Technology
Framework	Next.js 15 (Pages Router + App Router API)
Frontend	React 19, TypeScript 5
Styling	Bootstrap 5, SCSS, next-themes
Database	Firebase Firestore
Auth	Firebase Authentication (Email, Google, GitHub)
Backend	Next.js API Routes with Firebase Admin SDK
Email	Resend + React Email templates
Scheduling	Upstash QStash
Runtime	Bun

Getting Started

Prerequisites

• Bun (preferred) or Node.js 18+
• Firebase project with Firestore and Authentication enabled
• Resend account (for emails)
• Upstash account (for scheduled emails)

Installation

# Clone the repository
git clone https://github.com/shivamCode0/classchat.git
cd classchat

# Install dependencies
bun install

# Set up environment variables
cp .env.example .env.local

Environment Variables

# Firebase (Client)
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=

# Super Admin
NEXT_PUBLIC_ADMIN_EMAILS=

# Resend
RESEND_API_KEY=

# Upstash QStash
QSTASH_TOKEN=
QSTASH_CURRENT_SIGNING_KEY=
QSTASH_NEXT_SIGNING_KEY=

Development

# Start development server
bun dev

# Build for production
bun run build

# Start production server
bun start

Architecture

Data Model

users/{uid}
├── email: string
├── limits?: string[]
├── domainAdmin?: boolean
└── superAdmin?: boolean

classrooms/{classroomId}
├── name: string
├── joinId: string (6-char code)
├── uid: string (creator)
├── users: string[] (member UIDs)
├── admins: string[] (admin UIDs)
├── topics: string[]
├── created: Timestamp
├── deleted?: boolean
└── posts/{postId}
    ├── text: string
    ├── uid: string
    ├── topic?: string
    ├── created: Timestamp
    ├── usersLike: string[]
    ├── likesCount: number
    └── replies: Reply[]

API Structure

All mutations flow through a single endpoint /api/func with action-based dispatch:

src/app/api/func/
├── route.ts          # Main multiplexer
├── firebaseAdmin.ts  # Admin SDK, helpers, types
└── actions/
    ├── index.ts      # Action aggregator
    ├── classroom.ts  # Classroom CRUD
    ├── post.ts       # Post operations
    ├── reply.ts      # Reply operations
    ├── admin.ts      # Super admin actions
    └── onboardingEmails.ts

Key Patterns

• Real-time Sync — Firestore onSnapshot for live post updates
• Optimistic Updates — Client shows changes before server confirmation
• Soft Deletes — Classrooms marked deleted: true rather than removed
• Poll Encoding — Polls stored as $_CC_POLL + JSON in post text field
• Token Auth — Firebase ID tokens verified server-side for all actions

Project Structure

classchat/
├── src/
│   ├── app/api/          # API routes (App Router)
│   ├── components/       # React components
│   ├── contexts/         # React contexts (auth, theme, messages)
│   ├── emails/           # React Email templates
│   ├── pages/            # Next.js pages (Pages Router)
│   ├── scss/             # Stylesheets
│   └── util/             # Utility functions
├── public/               # Static assets
└── docs/                 # Documentation

Use Cases

ClassChat is effective for:

• 📢 Teacher Announcements — Broadcast updates to the class
• 💬 Class Discussions — Structured conversations with threading
• 📋 Forum Board — Persistent Q&A and knowledge sharing
• 📊 Quick Polls — Instant feedback from students
• 🔄 Real-time Communication — Sync across all devices
• 🎓 Collaborative Learning — Student-to-student interaction

License

All rights reserved. This code is proprietary and may not be used, copied, modified, or distributed without explicit permission from the owner.

Made with ❤️ for classrooms everywhere