I just shipped CourseOS, my entry for the Replit × Contra Buildathon.

CourseOS is a studio‑grade course dashboard template built on Replit. The goal was to create something that feels like a designer’s learning space, not a generic LMS – a place where one flagship course can really shine.

What it includes: – Premium, responsive course dashboard with a three‑column layout on desktop – Mobile navigation and a stacked lesson experience – Seeded “How to design a website” course with six chapters and thoughtful microcopy – Clickable chapter navigation that updates the active lesson and lesson summary in real time – Course and lesson progress tracking with mark‑as‑complete controls + updated progress bars – Lesson‑focused routes: /dashboard and /learn/:courseId/:lessonId, with friendly slugs for course and lesson URLs – AI Mentor chat with delayed demo replies to simulate a helpful assistant without needing a full backend – Light/dark mode toggle, responsive hover states, transitions, and a clean TypeScript data model

Under the hood, everything is wired through a simple course.ts data file and a course-shell.tsx layout component, so anyone can: – Swap in their own course and lessons by editing a single config file. – Apply their brand system by tweaking theme tokens and studio copy. – Extend the AI Mentor with a real API or LLM integration.

I built this on the free Replit Starter plan using Replit Agent for scaffolding, then layered in my own design system, copy, and interactions.

If you’re a creator or educator who wants a course dashboard that looks and feels like a product studio, I’d love your feedback – and feel free to remix it into your own CourseOS: [visual-asset-manager--designzainab.replit.app]

Thanks to @Replit and @Contra for the Buildathon – this was a great excuse to push a visually opinionated, AI‑flavored course experience end‑to‑end.