The Problem: Every student knows the frustration. Moodle shows assignments scattered across multiple pages. No clear overview of deadlines. Progress tracking is non-existent. You click through 10 pages just to see what's due this week.
The Question: What if your semester data was actually... organized?
This project started from personal pain. As a student at JCT, I spent more time navigating Moodle than actually studying. So I built the tool I wished existed: a clean dashboard that shows everything at a glance.
"Build a system that talks to a university platform you don't control, syncs data reliably, and presents it beautifully."
This required solving real engineering problems:
- Browser Extension Development – Manifest v3, content scripts, service workers
- Authentication Complexity – Google OAuth for the webapp + JWT tokens for the extension
- Data Synchronization – Reliable sync between Moodle → Extension → Backend → Dashboard
- Real-time Updates – Keep data fresh without overwhelming the server
|
See all your assignments in one place. Switch between Kanban and List views. Drag-and-drop to update status. |
Day, week, and month views of your deadlines. Never miss a submission again. |
|
Visual progress bars for each course. See exactly how much you've completed. |
Browser extension syncs data automatically whenever you visit Moodle. |
|
Google OAuth + JWT tokens. Your data stays yours. |
Full right-to-left support. Built for Israeli students. |
┌─────────────────────────────────────────────────────────────────┐
│ Student's Browser │
│ │
│ ┌─────────────────┐ ┌─────────────────────────┐ │
│ │ Moodle Tab │ │ SemesterHub Dashboard │ │
│ │ (ac.il) │ │ (semester-dash.vercel) │ │
│ └────────┬────────┘ └────────────┬────────────┘ │
│ │ │ │
│ │ ┌──────────────────┐ │ │
│ └────────►│ Extension │◄──────┘ │
│ │ ┌────────────┐ │ │
│ │ │ Content │ │ │
│ │ │ Scripts │ │ │
│ │ └────────────┘ │ │
│ │ ┌────────────┐ │ │
│ │ │ Service │ │ │
│ │ │ Worker │ │ │
│ │ └────────────┘ │ │
│ └────────┬─────────┘ │
└──────────────────────────────┼───────────────────────────────────┘
│
│ HTTPS + JWT
▼
┌──────────────────────────────┐
│ Next.js API (Vercel) │
│ ┌────────────────────────┐ │
│ │ /api/extension/* │ │ Token generation
│ │ /api/sync/moodle │ │ Data sync endpoint
│ │ /api/courses/* │ │ CRUD operations
│ │ /api/assignments/* │ │ CRUD operations
│ └────────────────────────┘ │
│ ┌────────────────────────┐ │
│ │ NextAuth.js v5 │ │ Google OAuth
│ │ Rate Limiter │ │ 10 req/min
│ │ CORS Whitelist │ │ Security
│ └────────────────────────┘ │
└──────────────┬───────────────┘
│
│ Prisma ORM
▼
┌──────────────────────────────┐
│ PostgreSQL (Neon Cloud) │
│ ┌────────────────────────┐ │
│ │ Users │ │
│ │ Semesters │ │
│ │ Courses │ │
│ │ Assignments │ │
│ │ UserPreferences │ │
│ └────────────────────────┘ │
└──────────────────────────────┘
1. Student visits Moodle
│
▼
2. Extension detects Moodle page
│
▼
3. Content script scrapes course/assignment data
│
▼
4. Extension checks for valid JWT token
│
┌─────┴─────┐
│ │
Valid Invalid
│ │
│ ▼
│ 5a. Request new token
│ (using session cookie)
│ │
│ ▼
│ 5b. Store token in
│ chrome.storage.local
│ │
└─────┬─────┘
│
▼
6. POST /api/sync/moodle with Bearer token
│
▼
7. Server validates JWT + rate limit
│
▼
8. Upsert courses/assignments (by moodleId)
│
▼
9. Dashboard shows updated data
| Layer | Technology | Why |
|---|---|---|
| Framework | Next.js 16 (App Router) | Server components, API routes, great DX |
| Language | TypeScript (strict) | Type safety across the entire stack |
| Database | PostgreSQL (Neon) | Reliable, scalable, serverless |
| ORM | Prisma 7 | Type-safe queries, migrations, studio |
| Auth | NextAuth.js v5 | Google OAuth, session management |
| Styling | Tailwind CSS 4 | Utility-first, RTL support |
| UI Components | Radix UI | Accessible, unstyled primitives |
| Icons | Lucide | Clean, consistent iconography |
| Drag & Drop | DnD Kit | Accessible drag-and-drop |
| Layer | Technology | Why |
|---|---|---|
| Manifest | V3 | Latest Chrome extension standard |
| Build | Vite 6 | Fast builds, HMR for development |
| Language | TypeScript | Same type safety as webapp |
| Auth | JWT Bearer Tokens | Secure, stateless authentication |
| Storage | chrome.storage.local | Persistent token storage |
| Layer | Technology | Why |
|---|---|---|
| Hosting | Vercel | Zero-config Next.js deployment |
| Database | Neon | Serverless PostgreSQL |
| CI/CD | GitHub Actions | Automated lint + build |
| Security | CORS + Rate Limiting | Protection against abuse |
model User {
id String @id @default(cuid())
name String?
email String @unique
image String?
semesters Semester[]
preferences UserPreferences?
}
model Semester {
id String @id @default(cuid())
name String // "A", "B", "Summer"
year Int
startDate DateTime
endDate DateTime
courses Course[]
user User @relation(...)
}
model Course {
id String @id @default(cuid())
name String
courseCode String?
moodleId String? @unique
moodleUrl String?
color String?
lastSyncedAt DateTime?
assignments Assignment[]
semester Semester @relation(...)
}
model Assignment {
id String @id @default(cuid())
title String
description String?
dueDate DateTime?
type AssignmentType // ASSIGNMENT, QUIZ, FORUM
status AssignmentStatus // NOT_STARTED, IN_PROGRESS, COMPLETED
moodleId String? @unique
moodleSubmissionStatus String?
course Course @relation(...)
}| Component | Method | Details |
|---|---|---|
| Web App | Google OAuth | NextAuth.js handles the entire flow |
| Extension | JWT Tokens | 30-day expiry, stored in chrome.storage |
| API | Bearer Token | Validated on every request |
// Extension requests token using existing session
const response = await fetch('/api/extension/token', {
credentials: 'include' // Sends session cookie
});
const { token, expiresAt } = await response.json();
// Token payload
{
userId: "cuid_xxx",
email: "student@mail.com",
name: "Student Name",
aud: "extension",
iss: "semesterhub",
exp: 1234567890 // 30 days
}// Rate limiting: 10 requests per minute per user
const rateLimiter = new RateLimiter({
interval: 60 * 1000,
uniqueTokenPerInterval: 500
});
// CORS whitelist
const allowedOrigins = [
'chrome-extension://*',
'moz-extension://*',
'https://semester-dash.vercel.app'
];semester-dash/
│
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── api/
│ │ │ ├── extension/ # Token endpoints
│ │ │ │ ├── token/ # GET - Generate JWT
│ │ │ │ └── verify/ # GET - Validate JWT
│ │ │ ├── sync/
│ │ │ │ └── moodle/ # POST - Sync data
│ │ │ ├── courses/ # CRUD
│ │ │ ├── assignments/ # CRUD
│ │ │ └── semesters/ # CRUD
│ │ │
│ │ ├── dashboard/ # Protected pages
│ │ │ ├── page.tsx # Main dashboard
│ │ │ ├── assignments/ # Assignment views
│ │ │ ├── calendar/ # Calendar view
│ │ │ ├── courses/ # Course management
│ │ │ └── semesters/ # Semester management
│ │ │
│ │ ├── login/ # Auth pages
│ │ └── onboarding/ # New user flow
│ │
│ ├── components/
│ │ ├── ui/ # Base components
│ │ ├── assignments/ # Assignment components
│ │ ├── courses/ # Course components
│ │ └── layout/ # Navigation, sidebar
│ │
│ ├── lib/
│ │ ├── auth.ts # NextAuth config
│ │ ├── prisma.ts # Prisma client
│ │ └── rate-limit.ts # Rate limiter
│ │
│ └── types/ # TypeScript types
│
├── extension/ # Browser Extension
│ ├── src/
│ │ ├── background/ # Service worker
│ │ │ └── index.ts
│ │ ├── content/ # Content scripts
│ │ │ ├── moodle.ts # Moodle scraper
│ │ │ └── webapp.ts # Dashboard integration
│ │ ├── popup/ # Extension popup
│ │ └── shared/ # Shared utilities
│ │ ├── api-client.ts # API wrapper
│ │ └── token-manager.ts # JWT handling
│ │
│ ├── manifest.json # Extension manifest
│ └── vite.config.ts # Build config
│
├── prisma/
│ └── schema.prisma # Database schema
│
└── package.json
- Node.js 18+
- PostgreSQL database (or Neon account)
- Google Cloud Console project (for OAuth)
git clone https://github.com/Noammandelbaum/semester-dash.git
cd semester-dash
npm installcp .env.example .env.local# Database
DATABASE_URL="postgresql://user:pass@host:5432/db"
# NextAuth
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-here"
# Google OAuth
GOOGLE_CLIENT_ID="xxx.apps.googleusercontent.com"
GOOGLE_CLIENT_SECRET="xxx"
# JWT
JWT_SECRET="your-jwt-secret"npx prisma generate
npx prisma db pushnpm run dev
# Open http://localhost:3000cd extension
npm install
npm run buildThen load extension/dist/ as unpacked extension in Chrome.
This entire project was developed using Claude Code - an AI-assisted development workflow.
From database schema design to browser extension architecture, every component was built collaboratively with AI agents. This approach enabled:
- Rapid prototyping – Ideas to working code in hours, not days
- Consistent code quality – AI maintains patterns across the codebase
- Complex problem solving – JWT auth, content scripts, real-time sync
- Learning acceleration – Understanding new technologies faster
The future of development isn't AI replacing developers – it's developers and AI building together.
- Browser Extension Development – Manifest v3, content scripts, service workers, chrome.storage API
- Authentication Complexity – OAuth flows, JWT tokens, secure token storage
- Full-Stack TypeScript – End-to-end type safety from database to UI
- Real-time Sync – Designing reliable data synchronization between systems
- API Design – RESTful endpoints with proper error handling and rate limiting
- Security First – CORS, token validation, input sanitization
- Database Design – Normalized schemas, efficient queries, proper indexing
- Developer Experience – Clear project structure, comprehensive types
I built SemesterHub because I needed it. That personal investment drove every feature decision and kept the scope focused on what actually matters to students.
Built with precision, synced with reliability, designed for students.
Turning Moodle chaos into academic clarity