C
Codex
Codex is the builder. It writes code, fixes bugs, runs commands, commits files, and helps push to GitHub.
Simple meaning: Codex is like your AI developer.
The platforms we used
Think of each platform like a worker on the team. Each worker has one main job.
G
GitHub
GitHub is the online folder where your project code lives. Vercel reads from GitHub to deploy the app.
Simple meaning: GitHub stores the code safely.
V
Vercel
Vercel takes the code from GitHub and turns it into a real website people can visit.
Simple meaning: Vercel puts your app on the internet.
S
Supabase
Supabase is the database. It stores businesses, customers, bookings, prices, and booking status.
Simple meaning: Supabase remembers the data.
$
Stripe
Stripe collects money safely. Later, it will collect the 50% cleaning deposit and update the booking.
Simple meaning: Stripe handles payment.
H
GoHighLevel
GHL sends follow-up messages, creates contacts, and runs automations after important events.
Simple meaning: GHL handles communication.
The big-picture flow
This is how the system works when a customer books a cleaning.
1
Customer opens a business link
Example: /jocleaning or /modamaid. The slug tells the app which cleaning business to load.
2
Customer chooses service details
The customer selects the cleaning package, bedrooms, bathrooms, add-ons, and frequency.
3
Customer chooses date and time
The schedule step lets them choose when they want the cleaner to arrive.
4
Customer submits the booking
The app sends the booking to Supabase. Supabase saves the customer and booking data.
5
Next phase: collect payment
Stripe will collect the 50% deposit and update the booking from pending_payment to deposit_paid.
6
Later: send webhook to GHL
After the important event happens, GHL can create the contact and send follow-up messages.
Step-by-step build process
Use this exact order next time you build another SaaS.
1
Define the SaaS idea
Write down who uses it, what problem it solves, what data it saves, and how money will be collected.
Example: Cleaning businesses need a booking page. Customers choose service, date, and time. Bookings save to Supabase. Deposits go through Stripe.
2
Create a clean GitHub repo
Do not start from a messy old project. A clean repo prevents confusion.
Repo name example: bookmyclean
3
Open the repo with Codex locally
Local Codex uses your Mac and internet connection, so it can install packages, build, commit, and push.
Goal: Codex creates real files in the local project folder.
4
Build the app foundation first
Ask Codex for the Next.js app, TypeScript, Tailwind, routes, components, and basic project structure.
Must exist: package.json, app/, components/, lib/, tsconfig.json
5
Push to GitHub
GitHub must show the real files before Vercel can deploy.
Check GitHub for package.json before deploying.
6
Deploy with Vercel
Import the GitHub repo into Vercel. Vercel builds the app and gives you a live link.
Live example: https://bookmyclean-red.vercel.app/jocleaning
7
Create the Supabase project
Supabase gives the app a real database so bookings can be saved.
Project URL example: https://oswilxolwlayduvjrrfv.supabase.co
8
Add environment variables
Environment variables are special settings that let Vercel and the app connect to Supabase safely.
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
9
Test real booking save
Submit a booking and check Supabase. If the row appears, your backend is real.
Check tables: customers, bookings
10
Add payment next
After booking save works, add Stripe deposit payment. Do not add too many features before money works.
Booking saved → Stripe deposit paid → booking marked deposit_paid
Supabase explained simply
Supabase is the memory of the app. Without it, bookings disappear.
DB
What Supabase stores
Supabase stores tenants, customers, bookings, services, prices, payment status, and webhook logs.
Think of it like a smart spreadsheet with security.
🔐
Why security matters
Customers enter names, phone numbers, emails, addresses, and schedules. That data must be protected.
One cleaning business should never see another business’s customers.
Supabase keys
These are the three main settings your app needs.
NEXT_PUBLIC_SUPABASE_URL = Where your Supabase project lives
NEXT_PUBLIC_SUPABASE_ANON_KEY = Public key used by frontend/server
SUPABASE_SERVICE_ROLE_KEY = Powerful secret key, server only
Important warning
Never expose the service role key in frontend code. Never commit .env.local to GitHub.
Vercel explained simply
Vercel is how people visit your app online.
Live
What Vercel does
Vercel takes your GitHub code, builds it, and gives you a live website link.
GitHub stores the code. Vercel publishes the code.
Common Vercel mistakes we learned
No Next.js version detectedThis happened because GitHub did not have package.json yet.
Blocked deploymentThis happened because the Git commit email did not match the Vercel/GitHub account.
Supabase not configuredThis happened because Vercel did not have the Supabase environment variables yet.
Stripe explained simply
Stripe is the money part. It should come after the booking saves correctly.
Basic Stripe flow
The customer books, then Stripe collects the 50% deposit. After payment, the booking status changes.
pending_payment → deposit_paid
Stripe Connect later
If each cleaning business needs its own Stripe account, use Stripe Connect. That lets each business receive its own payments.
tenant.stripe_account_id = business Stripe account
Do not rush this
Payment affects trust and money. First make sure booking data saves correctly. Then add Stripe.
GoHighLevel webhook explained simply
GHL should help with follow-up, but it should not run on every small click.
What GHL does
GHL can create contacts, send SMS/email, update pipelines, and notify the business.
Use GHL for communication, not as your main database.
Webhook rule
Because webhook executions can cost money, only send webhooks on important events.
Good: booking_created, deposit_paid
Bad: bedroom changed, time clicked, price updated
ModaMaid webhook test
For ModaMaid, the webhook URL is the destination. The location ID is included inside the payload.
ghl_location_id = WCcmSDqm4ysyChA6AvwX
webhook_url = services.leadconnectorhq.com/.../webhook-trigger/...
Mistakes to avoid next time
These are the problems that slowed us down. Avoid them in the next SaaS build.
Do not trust “done” without checking files.Always verify files exist locally and on GitHub.
Do not deploy an empty repo.Vercel needs package.json and the app files.
Do not over-polish before payments.A pretty app without payment is still only a demo.
Do not trigger GHL on every action.Webhook costs can add up quickly.
Do not expose secret keys.Service role and API secrets must stay server-side.
Reusable SaaS checklist
Check these items whenever you build another system.
Goal
Move in the right order: idea → repo → app files → deploy → database → payment → automation → dashboard.
The perfect order next time
This is the sequence to follow so you do not get stuck.
1. Define the SaaS idea
2. Create clean GitHub repo
3. Open repo in local Codex
4. Generate Next.js app files
5. Verify files exist
6. Push to GitHub
7. Deploy on Vercel
8. Create Supabase project
9. Add env vars locally and in Vercel
10. Test real database save
11. Add Stripe payment
12. Add GHL webhook only for important events
13. Build admin dashboard after real usage