From Zero to Live: How A Full-Stack EdTech Platform Was Built Entirely with AI Partner

Introduction

Part 1 of the series: "Building a Production EdTech Platform on Lovable"

Progression School needed more than a marketing website. The team needed a revenue-generating platform, 20+ pages, integrated payments, CRM automation, an AI-powered sales assistant, a workshop CMS, and an SEO infrastructure that works for both Google and AI search engines.

The traditional approach? A frontend developer, a backend developer, a DevOps engineer, payment integration specialists, CRM consultants, and weeks of sprint cycles.

Instead, the entire thing, frontend, backend, payments, CRM automation, and AI chatbot, was built on Lovable. Every line of code was written by AI inside the platform. No external IDE, no terminal, no deployment pipeline. Just conversations with an AI that writes production React + TypeScript, backed by a full cloud infrastructure.

This isn't a prototype. This is a production system that processes real payments, manages real leads, and serves real students, built entirely through AI-assisted development.

This blog is a high-level tour of the entire system. Future posts in the series will deep-dive into each layer.

The Full Architecture At A Glance

Before walking through each layer, here's what the complete system looks like:

The platform has three layers: a React frontend with 20+ lazy-loaded pages, a Lovable Cloud backend with 10+ edge functions and a production database, and integrations with a payment gateway, a CRM, a voice AI engine, a course platform, and a WhatsApp automation tool. Every arrow in this diagram was built within Lovable.

Why Lovable?

Several no-code and AI-code platforms were evaluated. Lovable was selected because it's the only one that provides all four layers in a single environment:

1. Real Code Output: React + TypeScript + Tailwind. No proprietary runtime. The entire codebase is owned and exportable anytime.
2. Lovable Cloud: A full backend out of the box: database, authentication, serverless edge functions, file storage, and secrets management. No external accounts needed.
3. Instant Preview: Every change renders in real-time. What users see is visible immediately.
4. One-click Publish: Frontend deploys in seconds. Backend functions deploy automatically.

The mental model is simple: describe what you want, Lovable writes the code, and see it live. Repeat.

What was most surprising was how far this model stretches. This isn't a brochure site; it's a production system with payment processing, CRM webhooks, AI agents, and admin dashboards. All built through AI conversations.

From Zero to Live: How A Full-Stack EdTech Platform Was Built Entirely with AI Partner

After hundreds of prompts, a clear workflow pattern emerged for building production systems through AI:

The Conversation Loop

1. Describe The Intent: Instead of "write a React component," use "The program page needs a pricing section with two tiers, full payment and 3-month EMI. The EMI option should show per-month cost. Both should trigger a payment flow on click."
2. Review The Output: Lovable shows the result in real-time. Catch layout issues, missing states, or wrong assumptions immediately.
3. Iterate With Specifics: "The EMI card should be highlighted as 'Most Popular.' Add a small disclaimer below about processing fees."
4. Move To The Next Piece: Once a section works, move on. Don't over-polish in one pass.

What Works Best

After lots of prompts and iterations, these are the patterns that consistently produced better results and fewer headaches.

• One feature per conversation turn. Trying to build three things at once leads to tangled output. "Add the hero section" → review → "Now add the pricing cards" → review. Sequential focus, rapid iteration.
• Share the architecture vision early. Telling Lovable "this form submits to a Zoho iframe, and on completion we detect the reload and trigger a payment flow" gives it context to write better code than "add a form."
• Let Lovable write the SQL. Describing data models in natural language and letting Lovable generate migrations with RLS policies consistently produced better, more secure database schemas than writing SQL manually.
• Keep files small. Components with fewer than 200 lines get better AI updates. Large monolithic files lead to more errors and harder iterations.

The Surprising Part

The hardest parts of traditional development, database migrations, webhook handlers, payment integration, and authentication flows, turned out to be the parts where AI assistance was most valuable. These are areas with well-known patterns but high implementation complexity. Lovable handled them consistently, while the human focused on business logic and user experience decisions.

The Foundation: Design System & Architecture

Before a single page was built, two decisions were made that shaped everything that followed:

• A branded design system

• A scalable routing architecture

Getting these right early meant every subsequent feature inherited consistency for free.

A Branded Design System, Not Generic AI Aesthetics

Before building any pages, the team invested in a proper design system. This is the single highest-leverage decision in any Lovable project.

A branded HSL palette was defined with semantic names tied to brand meaning:

These map to semantic roles (--primary, --background, --foreground, --highlight) so components never reference raw colors. A button uses bg-primary, not bg-blue-700. When the brand evolves, one variable changes, not 200 components.

Typography pairs BDO Grotesk (geometric, confident headings) with Open Sans (readable body text). Gradient and shadow tokens are pre-defined as CSS variables. Motion uses Framer Motion, but with restraint.

Building the design system with AI was a conversation about brand values, not CSS syntax. The prompt was: "We need a design system that feels academic but forward-thinking. Think university prestige meets tech startup energy." Lovable translated that into HSL tokens, typography pairings, and component variants. The human made taste decisions; the AI handled implementation.

Key Lesson: Spend 20% of project time on the design system. It pays back 10x in consistency and speed for every subsequent page.

20+ Routes With Lazy Loading

The site has audience-specific landing pages, multiple program pages, workshops, a session library, an admin dashboard, and legal pages.

The homepage is eagerly loaded for the best LCP. Every other page is lazy-loaded using React's lazy() + Suspense, keeping the initial bundle small and Time to Interactive low.

Each program page has its own component folder, small, focused files that Lovable can iterate on without touching unrelated code. When a pricing section needs modification, only one file changes, not a 2000-line monolith.

The Backend: Lovable Cloud Does The Heavy Lifting

This is where Lovable was most surprising. It's not just a frontend builder, it's a full-stack platform.

Database

Lovable Cloud provided a production database without any setup. Tables were created for:

• Workshops: A full CMS with fields for title, instructors, curriculum, pricing, form URLs, and publish status
• Chat Sessions: Storing AI chatbot conversations with visitor info and lead capture status
• Voice Call Logs: Transcripts from the voice AI agent
• User Roles: Admin access control for the dashboard
• Website Knowledge: Scraped content powering the AI chatbot's context

Created through Lovable's migration tools, the data model was described in natural language, Lovable wrote the SQL, and it was approved. Row-level security policies were generated automatically to protect user data.

Edge Functions (Serverless Backend Logic)

This is the backbone of the system. 10+ edge functions run server-side logic , all written inside Lovable, all deployed automatically:

• Payment Order Creation: Generates secure orders with server-side pricing
• Subscription Management: Handles EMI/installment plans with recurring charges
• Payment Webhook: Processes payment confirmations, triggers CRM updates and course enrollment
• Form Webhook: Receives form submissions, creates/updates CRM leads
• Free Interaction Handler: Manages free workshop registrations and consultation requests
• Lead Status Sync: Updates lifecycle stages in the CRM
• AI Chatbot: Context-aware assistant with full program knowledge
• Voice Call Logger: Persists voice agent transcripts
• Knowledge Refresher: Auto-scrapes the website to keep chatbot context current
• Manual Sync Tool: Admin utility to force-sync stuck payments

Every one of these was written by describing the business logic to Lovable. No local development environment, no npm install, no Docker. The prompt for the payment webhook was: "When Razorpay sends a payment, capture event, verify the signature, find the lead in Zoho CRM, convert it to a Contact, create a Deal, and enroll them in Thinkific." Lovable wrote the entire function, HMAC verification, API calls, error handling, and everything else.

Payments: Full Payment Gateway Integration

A payment gateway was integrated, supporting both one-time payments and EMI subscriptions. Here's how it works end-to-end:

The Flow

1. User fills out a form embedded on the program page (name, email, phone, etc.)
2. On form submission, the frontend detects the iframe reload and triggers the payment flow
3. An edge function creates a secure order with server-side pricing , the amount is never set client-side
4. Payment checkout opens in a modal with the order details
5. On successful payment, a webhook fires to the backend edge function
6. The webhook verifies the payment, converts the CRM lead to a contact, creates a deal, and enrolls the user in the course platform

EMI Subscriptions

For higher-priced programs, multi-month EMI plans use the gateway's subscription API. Each successful installment triggers a webhook event. The backend tracks cumulative payment data in the CRM, installments paid, amount collected, pending balance, with the payment status progressing from Partial to Completed on the final installment.

Why Server-Side Pricing Matters

Pricing lives in a server-side configuration file. The client never knows the real price; it only receives an order ID from the server. This prevents client-side tampering. A user can't open DevTools and change the amount to ₹1.

Built Entirely Through AI Conversations

The payment SDK loads via a script tag. The edge functions handle all server-side logic. The webhook processes payments asynchronously. All of this was built through conversations with Lovable, describing the payment flow, iterating on error handling, and adding edge cases like subscription failures and duplicate payment detection.

The payment integration is a good example of where AI-assisted development truly shines. Payment webhooks involve cryptographic signature verification, idempotency handling, and multi-step API orchestration. These are well-documented patterns, but implementing them correctly is tedious and error-prone. Lovable got the HMAC verification right on the first try, something that typically takes a developer several Stack Overflow visits and debugging cycles.

CRM Automation: Full Lifecycle Management

Every interaction on the website feeds into the CRM automatically. This isn't a simple form-to-spreadsheet setup; it's a full lifecycle management system.

Lead Capture

Every form on the site (applications, brochure downloads, workshop registrations, consultation requests) submits to an embedded form. On submission, the webhook edge function:

1. Classifies the interaction type (application, brochure, workshop, consultation)
2. Creates or finds the existing lead/contact in the CRM
3. Appends the interaction to a lifecycle trail field
4. Sets the appropriate lifecycle stage
5. Logs a timestamped note with the full interaction context

Identity Management

A single Contact record per person exists in the CRM, linked to multiple Deals. When a returning user fills out a new form, the system:

• Recognizes them by email
• "Seeds" the new lead with existing profile data (college, role, LinkedIn)
• Creates a new Deal for the new interaction
• Maintains the full historical trail

Payment-To-CRM Sync

When a payment succeeds:

1. The payment webhook fires
2. The edge function converts the Lead to a Contact in the CRM
3. A Deal is created with the payment amount and program details
4. The lifecycle stage updates to reflect successful payment
5. A consolidated welcome email is sent via the CRM's mail API
6. The user is enrolled in the course platform

Duplicate data errors are handled gracefully. If a lead conversion fails because the account already exists, the system searches for the Contact by email and proceeds with Deal creation.

Nurturing Automation

The lifecycle trail field powers downstream automation:

• Email sequences via marketing automation (triggered by trail content like "Downloaded Brochure")
• WhatsApp messages via a messaging platform (triggered by CRM workflow rules on trail updates)
• Follow-up tasks assigned to the sales team based on lifecycle stage

All of this CRM logic runs in edge functions , written and deployed entirely within Lovable.

We will dive deep into this in Blog 3 of this series.

AI Sales Assistant

An AI-powered chatbot and a voice agent were built that know everything about every program. The chatbot uses a self-refreshing knowledge base, and an edge function periodically scrapes the website and stores the content in the database, so the AI always has current information.

The voice agent uses ElevenLabs for natural-sounding conversations, with transcripts automatically saved to the database and synced to the CRM.

There's a certain irony in using an AI development platform to build an AI sales assistant. But it worked remarkably well; Lovable understood the streaming SSE pattern, the lead detection regex, and the CRM sync logic on the first attempt. Building AI features with AI turns out to be the sweet spot.

We will dive deep into this in Blog 2 of this series.

SEO & Generative Engine Optimization

Most AI-built websites ignore SEO. This project made it a first-class concern:

• Static HTML in index.html, hidden from users but visible to crawlers, giving Google full content before React hydrates
• JSON-LD structured data on every page (Organization, Course, FAQ, Breadcrumb)
• Per-page meta tags via react-helmet (title, description, canonical, Open Graph)
• Technical SEO files, robots.txt, sitemap.xml, and llms.txt for AI discoverability

The llms.txt file is a newer standard, a machine-readable summary of the entire site, so that AI search engines (Perplexity, ChatGPT Search, Google AI Overviews) can accurately represent Progression School in their responses.

The Admin Dashboard

A full admin interface was built that includes:

• Workshop CMS: Create, edit, and publish workshops with a form-based UI (no SQL needed)
• Chat Logs Viewer: Browse AI chatbot conversations, filter by lead status
• Manual Payment Sync: Force-sync stuck payments to the CRM

Admin access is controlled by role-based authentication, all implemented within Lovable.

The Deploy

With everything in place, "Publish" was clicked in Lovable. One click.

• Frontend: Deployed in seconds
• Edge Functions: Deployed automatically on every change
• Database: Always live, always accessible
• No CI/CD pipeline, no Docker, no server configuration

The entire platform, design system, 20+ pages, payment processing, CRM automation, AI chatbot, admin dashboard, and SEO infrastructure was built by one person in conversations with an AI.

What Was Never Needed

• ❌ No local development environment
• ❌ No terminal or command line
• ❌ No CI/CD pipeline
• ❌ No Docker or Kubernetes
• ❌ No separate hosting provider
• ❌ No backend framework (Express, Django, etc.)
• ❌ No separate database hosting
• ❌ No DevOps engineer
• ❌ No frontend-backend API contracts
• ❌ No deployment scripts

Everything runs on Lovable Cloud. The only external services are a payment gateway, a CRM, a voice AI engine, and a course delivery platform, and even those integrations were built entirely within Lovable.

The Meta-Reflection: Building Production Software Through AI

This project challenges a fundamental assumption: production-grade software requires professional developers with years of engineering experience.

The person who built this platform is a marketer. Not a developer. The entire codebase, React components, TypeScript edge functions, SQL migrations, and webhook handlers were written through natural language conversations with Lovable's AI.

That doesn't mean it was effortless. Building with AI is a skill in itself:

• Knowing what to ask for matters more than knowing how to code it
• Architectural Thinking: Deciding what should be client-side vs. server-side, what needs a database vs. local state , still requires human judgment
• Quality Taste: Recognizing when a generated component looks wrong, feels slow, or has a security gap , is the builder's job
• Sequential Discipline: Building one layer at a time, testing it, then moving to the next , prevents the complexity spirals that derail AI-assisted projects

The AI writes the code. The human provides the vision, the architecture decisions, and the quality bar. That's the new division of labor, and it works.

Key Lessons

1. Design system first. Invest early in semantic tokens. Every page inherits consistency for free.
2. Structure files for AI. Small, focused components in organized folders. Lovable works best with files under 200 lines.
3. Edge functions are the backend. Don't try to do server logic client-side. Use edge functions for payments, webhooks, API calls, and anything that needs secrets.
4. Let AI write the SQL. Describe the data model in natural language. Lovable generates migrations with RLS policies. Approve and move on.
5. SEO from day one. Static HTML fallbacks, JSON-LD, and sitemaps are all easy to add early but painful to retrofit later.
6. One integration at a time. Get the form working, then add payment, and then add CRM sync. Don't try to wire everything into a single prompt.
7. Trust the AI with patterns, own the architecture. AI excels at implementing known patterns (auth flows, webhook handlers, CRUD operations). Humans should focus on deciding which patterns to use and how they connect.

What's Next

In the next post, the deep-dive continues with Blog 2: Building an AI-Powered Sales Assistant, how a context-aware chatbot and voice agent were built, powered by a self-refreshing knowledge base that scrapes the website automatically. And yes, the AI assistant was built using AI.

In the meantime, if this approach to building resonates with how your team thinks about digital products, we'd love to talk. Axelerant works with organizations at the intersection of experience design, engineering, and emerging technology, helping teams move from vision to production without the traditional overhead.