ClassConnect

ClassConnect is a learning management system for schools. Admins run courses and people, teachers run their classes, and students follow their courses, assignments, and exams in one place.

It's a SvelteKit frontend on a FastAPI and PostgreSQL backend, packaged with Docker Compose. I joined in its first weeks, and over about seven months I was the main frontend developer. I built the component library the whole interface is made from, then connected it to the API as the backend grew.

A component library first

Before there were many pages, I built the pieces: buttons and icon buttons, text, select, and searchable dropdown inputs with inline validation errors, modals with header, body, and footer slots, tabs, steppers, accordions, breadcrumbs that build themselves from the route, toasts, spinners, a side-navigation layout, and a data table with search and pagination. Pages put these together instead of styling things from scratch, which kept a growing interface consistent while several people worked on it. The set was good enough that I later pulled it out into a separate starter kit to reuse on other projects.

Wiring it to the backend

Once the API was ready, I replaced the mock data with real endpoints. Authentication runs in a SvelteKit server hook. It reads the session cookie, checks it against the API, and puts the user and role on every request, so protected routes and role-based navigation are decided on the server before a page renders. A small fetch wrapper adds the token to each call and sends server-side requests to the right backend, inside Docker or out. On that base I built course management, with adding, editing, and deleting courses and assigning teachers and students, along with user management for teachers, students, and admins.

Shipping it

Toward the end I worked on making it deployable: Docker images for both halves, environment handling that works in local development and in containers, and a stream of fixes for routes, sessions, and edge cases that only showed up against real data.