+
AITraining2U
Vibe Coding Workshop · Day 2
AI Vibe
Coding Training
Full Stack · Antigravity · Supabase · Ship It
12 APRIL 2026
9:00AM – 6:00PM
aitraining2u.com
+
+
AITraining2U
Day 2 · Vibe Coding Workshop

Full Stack &
Antigravity

Go deeper — Supabase, MCP, local vibe coding, and deploy your own project.

Marcus · AI Product Builder AITraining2U 12 April 2026 9:00am – 6:00pm
Day 2 of 2
AITraining2U · Vibe Coding Workshop AITraining2U 2 / 9
+
The Stack

From Static to
Full Stack

Four layers, one goal — get your idea live on the internet.

Layer 01
🎨
Frontend
What users see and interact with — HTML, CSS, JavaScript.
Layer 02
⚙️
Backend
The logic layer — processes requests, runs your code.
Layer 03
🗃
Database
The memory — stores users, content, and state.
Layer 04
🚀
Deploy
Making it live — Vercel, Netlify, or your own server.
Day 2 · The Stack AITraining2U 3 / 9
+
New Tool

Meet Antigravity

Antigravity is your local vibe coding environment. Instead of building in a browser sandbox, you work on your own machine with full control.

You get real terminal access, real file systems, and real Git — the same tools professional developers use every day, powered by AI.

This is where prototyping becomes production-grade building.

"Browser tools are training wheels. Antigravity is the bike."

💻
Local Development
Code runs on your machine, not a remote server.
📁
Full File Access
Read, write, and organize your entire project.
⌨️
Real Terminal
Run npm, git, and any CLI tool directly.
🔌
Git Integration
Version control built in — commit, branch, push.
Day 2 · Antigravity AITraining2U 4 / 9
+
Database

Supabase — Your Backend
in Minutes

An open-source Firebase alternative. Auth, database, storage, and edge functions — all from one dashboard.

🔐
Authentication
Email, Google, GitHub login — set up in minutes with built-in row-level security. No more rolling your own auth.
⚡
Real-Time Database
PostgreSQL with real-time subscriptions. Data updates flow instantly to connected clients.
📦
Storage
Upload and serve images, files, and media with CDN delivery and access policies.
⚙️
Edge Functions
Run serverless TypeScript functions at the edge. Perfect for webhooks, cron jobs, and API integrations.
Day 2 · Supabase AITraining2U 5 / 9
+
Superpowers

Skills & MCP —
Wire Up Real Integrations

MCP (Model Context Protocol) is a standard way for AI tools to connect to external services. Think of it as USB ports for your AI — plug in any capability.

Skills are pre-built MCP connections that give your AI superpowers: browse the web, talk to APIs, read databases, and more.

Instead of writing integration code yourself, you describe what you want and the AI uses the right tool automatically.

"MCP turns your AI from a text generator into an action machine."

🌐
Browser Automation
Navigate websites, fill forms, scrape data — AI controls a real browser.
🔗
API Connections
Connect to Stripe, Slack, Notion, or any REST/GraphQL API on the fly.
📊
Data Scraping
Extract structured data from any webpage and pipe it into your app.
Day 2 · Skills & MCP AITraining2U 6 / 9
+
Polish

Design & UX
That Feels Good

Good UX is invisible. When something feels right, users do not think about it — they just use it.

Focus on these fundamentals:

  • ◆ Clear visual hierarchy
  • ◆ Consistent spacing and alignment
  • ◆ Mobile-first responsive layout
  • ◆ Meaningful color and typography
  • ◆ Feedback on every interaction
Before
  • Text walls with no hierarchy
  • Inconsistent button styles
  • Broken on mobile screens
  • No loading states or feedback
  • Raw error messages shown to user
After
  • Clear headings and scannable layout
  • Unified design system components
  • Fluid responsive at every breakpoint
  • Skeleton loaders and toast notifications
  • Friendly error handling with recovery
Day 2 · UX Polish AITraining2U 7 / 9
+
Hands-On

What You'll
Build Today

Morning
Assignment 4
Web App + Supabase + MCP
Build a full-stack web app with authentication, a real database, and MCP integrations. Deploy live on Vercel.
Afternoon
Assignment 5
UX Improvement + UI Polish
Take your app from working to polished. Improve layout, add responsive design, micro-interactions, and redeploy.
Late PM
Assignment 6
Build Your Own Project
Pick your own idea and build it with guided support. Use everything you have learned — this is your portfolio piece.
Day 2 · Assignments AITraining2U 8 / 9
+
+
Finale

Show What
You Built

Present your build. Get group feedback. Leave with a personal 30-day AI roadmap.

Live Demo Group Feedback 30-Day AI Roadmap
Ship It

"You walked in curious. You walk out dangerous."

AITraining2U · Day 2 Complete AITraining2U 9 / 9