All projects
Next.js · TypeScript · PostgreSQL · Prisma · SupabaseAI-assisted

Optics Physics Lab Website & CMS

2026Full-stack · CMS · RBAC · Bilingual (i18n) · AI Integration · Booking System · Solo Project
Optics Physics Lab Website & CMS

This is a production website and admin system built solo (with heavy use of Claude Code) for Prof. Wu's Optics Physics Laboratory. It replaces a static page with a fully self-hosted CMS so lab staff can maintain every piece of content without touching code.

The site is fully bilingual (English / 中文) with a single-language toggle across the whole site. Its "Dark Optics" visual language pairs a light academic base with dramatic near-black hero bands and animated laser-beam geometry, and the accent color is configurable from the admin panel.

Beyond the public site, it includes a complete membership and role-based access system (student / admin / super-admin), an invitation-and-activation flow backed by Supabase Auth, and a full instrument reservation system: hourly-slot booking, auto check-in, QR-code check-out, equipment-condition reporting with instant anomaly alerts, overdue penalties, and per-instrument manager permissions.

Two AI features (Google Gemini) round it out: an admin tool that pre-fills Blog/Publication drafts from uploaded Word files, and a public FAQ chatbot with a maintainer-curated bilingual knowledge base, streaming answers, function-calling for blog lookups, and DB-persisted rate limiting.

Deployed on Vercel + Supabase (Postgres/Auth/Storage) with the function region pinned to the DB region for latency, scheduled jobs via GitHub Actions, and a delivery plan designed around clean ownership hand-off to the lab.

Key features & challenges

  • Self-built bilingual CMS covering 9+ content types with draft/review workflow and soft-delete
  • Three-tier RBAC + invitation/activation flow on Supabase Auth (email + Google login)
  • Instrument booking system: hourly slots, auto check-in, QR check-out, anomaly alerts, overdue penalties
  • Two AI features on Google Gemini: Word-to-draft pre-fill and a public FAQ chatbot with a curated knowledge base
  • Deployed on Vercel + Supabase; function region pinned to DB region, scheduled jobs via GitHub Actions
  • Designed for clean ownership hand-off (GitHub / Vercel / Supabase) to the lab

My contributions

  • Sole developer — architecture, database schema, frontend, backend, and deployment
  • Designed the Prisma/Postgres relational data model (members, instruments, bookings, content)
  • Built the RBAC, invitation, and instrument-permission logic from scratch
  • Integrated Google Gemini for AI drafting and the FAQ chatbot as an isolated, swappable module
  • Solved production issues: Prisma Wasm engine on Vercel, function/DB co-location, Supabase RLS hardening