Overview
Code Highlights and Mindless AI are two production SaaS applications built from scratch with my friend as senior frontend engineer, living in a shared Turborepo monorepo. Code Highlights is a developer education platform, interactive coding exercises, video lectures, quizzes, and a social code snippet community. Mindless AI is an AI powered SEO blog writing tool for content marketers. Both apps share a common backend, a custom internal UI component library, and deployment infrastructure.
The Problem
Developer education platforms tend to be passive, video libraries with no hands on practice, or they bolt on a code editor as an afterthought. On the content side, SEO writing tools generate generic AI output with no real time quality feedback, leaving writers guessing until after publishing. The goal was to build both correctly from the ground up.
What I Built
Code Highlights delivers a multi type learning experience: video lectures, written article tutorials, interactive coding exercises with Monaco Editor, illustration based lessons, and quizzes. The core interactive code engine lets students write code in a multi file Monaco editor, get real time execution feedback via Socket.io, and progress through per step instructions with hints and pass/fail indicators. Course completion generates a PDF certificate.
The Highlights section is a social snippet community: users create, share, and discover code snippets in a feed with trending and following tabs, each snippet linked to a UUID keyed playground URL.
Mindless AI wraps a multi step AI generation wizard around a rich text SEO editor. A user enters their target keyword, reviews and edits an AI generated heading outline, then generates the full article. A live SEO sidebar scores the content in real time against SERP guidelines and shows a Google search snippet preview.
Both apps share @repo/ui (an Atomic Design component library), @repo/utils, and @repo/fetcher, enabling clean code reuse across two independent deployments.
Tech Stack
- Frontend: Next.js 14 (App Router), React 18, TypeScript, SCSS Modules, MUI v5
- Code editor: Monaco Editor (
@monaco-editor/react), Prism.js, Bright - State management: Zustand (two-tier server/client pattern), React Context
- Real-time: Socket.io client
- Payments: PayPal SDK (
react-paypal-js) - Media:
react-player,@react-pdf/renderer(certificates) - Analytics: Mixpanel, Partytown
- Monorepo: Turborepo, pnpm workspaces
- Infrastructure: PM2, Docker Compose
Key Features
- Interactive code exercises - Monaco Editor with real time Socket.io verification, multi file explorer, live HTML/CSS/JS preview, per step hints, and pass/fail feedback
- Multi-type lecture system - video, article, interactive code, illustration, and quiz lecture types under one unified course player
- PDF course certificates - generated on completion via
@react-pdf/renderer - AI blog creation wizard - three-step flow: settings - outline editing - full article generation, with a live SEO score sidebar and Google SERP snippet preview
- Social snippet community - Highlights feed with trending/following tabs, quick preview modals, and UUID keyed playground URLs per snippet
- Comprehensive SEO infrastructure - per-page
generateMetadata(), JSON-LD schemas (Course, FAQ, Person), dynamic sitemaps, RSS feeds for articles and courses - PayPal checkout - end to end subscription and one time payment flow with hosted fields and auth aware CTA buttons
Results & Impact
Code Highlights targets developers building job ready skills for $100k+ tech careers, with course categories spanning Web Development, AI, Python, JavaScript, Java, C++, and Golang. I also authored and published several tutorials directly on Code Highlights using the same article infrastructure I built.