Technical Architecture

ClassHost is a static-first web application built with React, Vite, and TypeScript. Understanding our technical architecture helps students understand where their data goes and how the web functions.

Architecture Flow

Here is a simple blueprint of how ClassHost interacts with external servers:

┌──────────────┐          GitHub API          ┌──────────────┐
│  ClassHost   ├─────────────────────────────>│  GitHub CDN  │
│  (In-Browser │                              │  (Hosts your │
│  React App)  │                              │  live site)  │
└──────┬───────┘                              └──────────────┘
       │
       │ Syncs Rosters &
       │ Grading Metadata
       v
┌──────────────┐
│   Supabase   │
│   Database   │
└──────────────┘

Step-by-Step Deployment Workflow

When you click Start Deploy, the following actions happen entirely inside your browser:

1. File Reading & In-Memory Extraction

If you upload a ZIP file, the browser uses a JavaScript library (jszip) to unpack the files in-memory. It maps the files into a dictionary representation:

const fileTree = {
  "index.html": "Base64Content...",
  "css/style.css": "Base64Content...",
  "js/app.js": "Base64Content..."
};

typescript

2. Creating the Repository

ClassHost makes a authenticated POST request to GitHub's REST API:

POST /user/repos

Passing configurations like:

{
  "name": "my-first-site",
  "description": "Deployed via ClassHost",
  "private": false
}

json

3. Creating a Multi-File Commit Tree

To push multiple files in a single transaction without a local Git terminal:

Create Blobs: ClassHost uploads each file's Base64 content to GitHub to generate SHA identifiers: POST /repos/{owner}/{repo}/git/blobs
Create Tree: It organizes these SHAs into a folder tree hierarchy structure: POST /repos/{owner}/{repo}/git/trees
Create Commit: It creates a commit referencing the new tree and the parent commit SHA: POST /repos/{owner}/{repo}/git/commits
Update Ref: It updates the default branch pointer to reference the new commit ID: PATCH /repos/{owner}/{repo}/git/refs/heads/main

4. Activating GitHub Pages

Once the files are pushed, ClassHost enables hosting by invoking the Pages API:

POST /repos/{owner}/{repo}/pages

Configuring it to serve assets directly from the main branch root folder.

5. Supabase Sync

ClassHost stores the project URL, repository owner, visibility, and title in our Supabase database. This metadata is what appears in class activity feeds and student portfolios.