What you'll build
By the end of this tutorial you'll have a live SaaS landing page with:
- A hero section with headline, subheadline, and CTA button
- A pricing table with three tiers
- A login/signup flow powered by Supabase Auth
- A custom subdomain published at yourapp.aicodesit.app
No prior coding knowledge required.
Step 1 — Create a new project
Log in to AICODESIT and click New Project from your dashboard. Give it a name like "my-saas" and hit Create.
The IDE opens with a blank React + Vite project already wired to Supabase.
Step 2 — Describe your landing page to the AI
Open the AI Chat panel on the right side and type:
Create a SaaS landing page for a task management app called "TaskFlow".
Include: hero with headline and CTA, a 3-tier pricing table (Free, Pro $19/mo, Team $49/mo),
and a sticky navbar with a login button.The AI will generate the full component tree, styles, and routing in one shot. Review the preview on the left — it updates in real time.
Step 3 — Customize the copy
Click on any element in the Visual Editor to change text, colors, or layout without touching code. For deeper changes, open the file in the Monaco editor and adjust manually.
Step 4 — Add Supabase Auth
In the AI Chat, type:
Add a login and signup modal using Supabase Auth (email + Google OAuth).
Show a "Go to dashboard" button when logged in.AICODESIT auto-injects your project's Supabase credentials — no .env setup needed.
Step 5 — Publish
Hit the Publish button in the top bar. Your page goes live at yourapp.aicodesit.app in about 15 seconds. You can also connect a custom domain from Settings → Domain.
Result
You shipped a production-ready SaaS landing page in one session. From here you can keep building — add a dashboard, database tables, API routes, or a blog — all from the same IDE.
Try it now → Start building for free