The Tech Stack Behind This Platform
Next.js 16, Clerk, Tailwind CSS v4, MDX, Gmail SMTP, UPI payments — every layer explained.
The Tech Stack Behind This Platform
Here's a full breakdown of every technology powering this platform — and why I chose each one. For the story behind the decisions, check out how I built this.
Framework & Language
Pages load fast because most rendering happens on the server. Dynamic routes handle courses, modules, lessons, and blog posts — all from the same codebase.
Type safety across the entire project — from course definitions to API routes to MDX component props. Catches bugs before they reach production.
Styling
Utility-first CSS with CSS custom properties for theming. Dark mode, responsive layouts, and component styles — all in one system.
The prose classes handle all MDX content styling — headings, paragraphs, code blocks, lists — without writing custom CSS for each element.
Authentication & Access Control
Sign-in, sign-up, session management, and middleware protection — all out of the box. The free tier handles everything I need.
Roles, course enrollments, pending payments, and pending access requests — all stored in Clerk's user metadata. No database required.
Every user's publicMetadata contains an enrollments array of course IDs. The isEnrolled() utility checks this before granting access. Middleware protects all /learning/* routes — you must be signed in.
Content System
Markdown with embedded React components. Lessons use custom components like Callout, Exercise, InfoGrid, and Takeaway for interactive content.
No CMS, no database. Content lives as .mdx files in the repo under content/. Version-controlled, diff-friendly, and portable.
The learning portal uses custom components for engagement — Callout (info/warning/tip/fun-fact), Exercise, Comparison, ComparisonTable, Takeaway, Reflection, InfoGrid, and InfoCard. These are registered in a single component map and available in every lesson and blog post.
Payments
A dynamically generated QR code using the standard upi://pay deep link format. Amount pre-filled, no npm packages, no payment gateway.
Student enters their UPI transaction ID after paying. I verify it in my UPI app and approve with one click from an email notification.
I originally built the entire Stripe checkout flow — sessions, webhooks, success pages. Then I discovered Stripe requires a registered business in India. Deleted all of it and replaced it with a single QR code. Sometimes simpler is better.
Email Notifications
Sends admin notification emails when students request access or submit payments. Uses a Google App Password — no domain verification, no SPF/DKIM setup needed.
Every notification email has a one-click approve button. The link contains a cryptographic token signed with the Clerk secret key — can't be forged or tampered with.
I started with Resend for email delivery. The emails were technically delivered to Gmail, but they wouldn't render — you'd click and see a blank screen. Switched to Gmail SMTP in 10 minutes and never looked back.
Meeting Scheduling
Embedded inline on the /meet page. Visitors pick a 15-minute slot, Cal.com checks my Google Calendar for conflicts, and generates a Google Meet link automatically.
Every booking gets a unique Google Meet link — no manual setup. Calendar invites go to both parties with the link included.
The @calcom/embed-react package provides a Cal component that renders the scheduling widget inline. A getCalApi() call configures the UI — dark theme, month-view layout. No API keys needed.
Curated Programs
Each program is a simple JSON file — title, description, and a list of lesson paths. No TypeScript needed. The filename becomes the program ID.
A program can pull 2 DevOps lessons + 5 AI lessons + 2 MLOps lessons into one curated curriculum. Enrollment, progress, and access control all work per-program.
Programs appear as a single card on the catalog — clicking it opens /programs with all available programs listed, just like how courses use a folder pattern.
Browse all lessons in a tree, check the ones you want, fill in details, and download a ready-to-use JSON file. No code editing required.
Hosting & Deployment
Push to main → build → deploy. Preview deployments for pull requests. Edge middleware for auth checks. All on the free tier.
Single repo for code and content. Version history for every lesson, every component, every config change.
The Architecture
src/
├── app/
│ ├── learning/ ← Course catalog + lesson pages
│ ├── blog/ ← Public blog
│ ├── projects/ ← Projects page
│ ├── meet/ ← Cal.com scheduling embed
│ └── api/ ← Payment, access, admin APIs
├── components/
│ ├── learning/ ← Progress, enrollment, payment UI
│ └── mdx/ ← Custom MDX components
├── lib/
│ ├── courses.ts ← Course registry
│ ├── mdx.ts ← MDX reader + utilities
│ ├── mail.ts ← Gmail SMTP sender
│ └── approve-token.ts ← HMAC token generator
└── middleware.ts ← Clerk auth guard
content/
├── blog/ ← Blog posts (.mdx)
└── learning/ ← Course content (.mdx)
├── devops/
├── ai-bootcamp/ ← 5 modules, 18 lessons
├── mlops/
└── interview-prep/
What It Costs
₹0 — Vercel free tier
₹0 — Clerk free tier
₹0 — Gmail SMTP
₹0 — no gateway fees
₹0 — Cal.com free tier
₹0 — GitHub repo
Every layer of this platform runs on free tiers or open-source tools. No subscriptions, no usage-based billing, no surprises.