Farial — Dance Class Booking Platform
Faryal — Dance Class Booking Platform
A bilingual class-booking site built for my sister's own dance studio, where she teaches Ariale. Built in three days with AI-assisted development, then reviewed, fixed, connected to Supabase, and deployed to a live custom domain.
Project Overview
// section.overview
A class-booking platform built for my sister's own studio
Faryal is a bilingual, two-sided booking platform I built for my sister's dance studio, where she teaches Ariale. On the public side, students can browse classes, see which sessions still have open spots, view studio address and class details, and register directly. On the admin side, she manages instructors, classes, and schedules herself — adding, editing, and removing sessions without any developer involvement. I built the entire project in 3 days by directing an AI through the architecture and scenario, then reviewing, fixing, and hardening its output myself before connecting it to Supabase, applying a custom theme, and deploying it to production on a custom domain.
Key Screens
// section.key.screens
Project Problem
// section.problem
Three days, one AI-assisted build, one real studio to serve
Stakeholder Needs
// section.stakeholder.needs
A Simple Way for Students to See Open Sessions
Students needed to instantly see which class sessions still had open spots, along with the studio address and class details, without calling or messaging to ask.
Self-Service Registration
Students needed to register for a session directly on the site, removing the manual back-and-forth of booking a spot by phone or social media.
Full Admin Control Over Classes
As the instructor and owner, she needed an admin panel where she could add, edit, and remove classes and schedules herself, with no developer involvement.
Bilingual Support
The site needed to serve both Persian- and English-speaking students, with a smooth language switch across every page.
A Fast, Real Launch
This was a real business, not a demo — the site needed to go from idea to a live, working product on a custom domain as quickly as possible.
Customer Needs
// section.customer.needs
Design Process
// section.design.process
SCENARIO & STRUCTURE
Defined the scenario, project structure, and color theme for the AI to build from
AI-Assisted First Build
AI scaffolded pages, components, and the admin panel in a single day
Code Review & Fixes
Fixed unnecessary client components and replaced anchor tags with next/link
Supabase Integration
Connected classes, schedules, and registrations to Supabase
Admin Panel Build-Out
Class and schedule management for the studio owner
Customization & Testing
Applied theme, tested booking and admin flows end to end
Launch
Deployed on Vercel with environment variables, live on a custom domain
The Solution
// section.solution
AI-Guided Scaffolding, Human-Directed Architecture
[01]I handed the AI the exact scenario and project structure I wanted, including how pages, components, and the admin panel should be organized, rather than letting it decide the architecture on its own.
Correcting the AI's Blind Spots
[02]The first pass turned every section into a client component and skipped Next.js's built-in Link component in favor of plain anchor tags. I went through the codebase and fixed both, restoring proper server rendering and client-side navigation.
Supabase-Backed Data and Admin Panel
[03]I connected the project to Supabase for classes, schedules, and registrations, and built out the admin panel so the instructor can add, edit, and remove classes and sessions herself.
Custom Theme, Testing, and Real Deployment
[04]I applied a custom color theme, tested every flow end to end, deployed to Vercel with the proper environment variables, and launched the site on a custom domain I set up for the studio.
Learning & Reflections
// section.learning.reflections
AI Speeds Up Scaffolding, Not Judgment
Giving the AI a clear scenario and project structure upfront meant the first draft was usable almost immediately — but every architectural and rendering decision still needed a human review pass.
Client Components Aren't the Default
The AI-generated draft made every section a client component. Going back through and converting what didn't need interactivity back to server components was a meaningful performance fix.
Small Details Like next/link Matter
Plain anchor tags instead of Next.js's Link component is an easy thing for AI-generated code to miss, and an easy thing to overlook if you don't already know what to look for.
A Real Backend Turns a Prototype Into a Product
Connecting Supabase and building out real admin functionality was what took the project from an AI-generated demo to something my sister could actually run her studio on.
Shipping Fast Doesn't Mean Skipping Deployment Basics
Even with a one-day build, proper environment variable management on Vercel and a real custom domain made the difference between a toy project and a live product.
Building for Someone You Know Raises the Bar
Knowing my sister would actually use this site to run her studio made every shortcut feel unacceptable — it pushed me to fix things I might otherwise have left for later.
Front-End Developer
Let's Talk
Ready to build something great together?
I'm currently available for new opportunities and exciting projects.
Feel free to reach out — I usually reply within 24 hours.
