American Home Blueprint — online course platform with payments, student area and admin

Project overview

American Home Blueprint with Alla is an online school by Alla Rizaeva, a Keller Williams real estate agent licensed in North and South Carolina, with more than 14 years in the business. Its course teaches Russian-speaking immigrants how to buy their first home in the United States — from credit score and mortgage pre-approval to inspection and closing — in plain Russian.

The brief was more than a sales page. The school needed a platform of its own: a landing that sells the course, payments, student accounts whose access opens after purchase, a course player that remembers progress, and an admin where the owner runs courses, students, orders, promo codes and analytics without a developer. It was built multi-course from day one — the landing shows one featured course, while the database and the admin are ready for the next ones.

My role in the project

I personally led the project from the approved design to launch. The areas I owned and delivered directly:

• Design of all three zones — landing, student area and admin — on one brand core (cream, green and gold; Playfair Display with Manrope and Inter), then a 1:1 build in Next.js
• The data model in Supabase: 11 tables for courses, sections, enrollments, orders, progress, promo codes, analytics events, testimonials, FAQ and site settings, protected by row-level security and triggers
• Accounts: registration with e-mail confirmation by a one-time code, login, password reset and role-based routing for admins
• Payments: Stripe Checkout with fulfillment that grants access exactly once — from the webhook or from the success page, whichever arrives first — plus refunds, promo codes and price sync with Stripe
• Transactional e-mail through Resend: purchase confirmation, a new-sale alert for the owner and manual-access notices
• Analytics and legal: GA4, Meta Pixel and an in-house event tracker behind Consent Mode v2, a cookie banner and policies edited from the admin, and a pre-launch audit of accounts, payments, consent, SEO and security

What I built: the landing

• A Russian-language sales page in 14 sections: hero with Alla’s credentials, a trust strip, the reader’s pain points, “from anxiety to confidence”, the curriculum, the author block with experience figures, testimonials, a “course vs YouTube” comparison, a live mortgage calculator, the offer card, FAQ and a closing call to action
• A sticky purchase bar that follows the visitor down the page
• Structured data for the course, its offer, the author, the organization and the FAQ
• Images compressed and cached for PageSpeed

What I built: the student area

• A dashboard that doubles as a purchase hub: bought courses open, the rest can be bought from the same screen
• A course viewer with access tied to the enrollment and progress saved as the student moves through the course
• Profile and account settings

What I built: the admin

• Dashboard with period comparison, revenue split, a sales funnel and a list of what needs attention
• Courses: drag-and-drop ordering, course pages with tabs, settings synced to Stripe
• Course editor: sections and content blocks — headings, rich text, callouts, video, files and buttons — arranged by drag and drop, with inline titles, publish states and a live preview
• Students: filters, sorting and bulk actions; each student’s profile, access, progress, orders and event history; manual access, password reset and progress reset
• Orders with statistics, filters, a detail panel and refunds
• Analytics in five views — overview, traffic, conversion, content and cohorts — with a multi-line chart, an hour-by-day heatmap and top pages by views and unique visitors
• Promo codes, testimonials and FAQ (drag-and-drop order with a live preview), and settings in nine sections, including legal documents in a visual editor
• A command palette (Ctrl/Cmd+K), breadcrumbs and notifications driven by the database; every change in the admin shows on the site at once

Stack and SEO

Next.js 14 (App Router) with TypeScript and Tailwind, hosted on Vercel; Supabase for the database, authentication and file storage; Stripe for payments; Resend with React Email for mail; TipTap for rich text, dnd-kit for drag and drop and Recharts for the admin charts. The landing carries Course, Offer, Person, Organization and FAQ markup, tracking waits for the visitor’s consent, and Lighthouse on desktop gives 97 for performance and 100 for SEO and best practices.