How to Build
FROM IDEA
TO LIVE DEMO.
A practical path for first-time builders. The most important rule: a product that genuinely works matters more than a flashy mockup.
EIGHT STEPS.
01
Pick a problem or idea
Something you or people you know actually run into. Small and specific beats big and vague.
02
Name your user and one core feature
Who is it for, and what is the one thing it must do well? Write that down in a sentence.
03
Ask an AI coding agent to plan a small first version
Describe the user, the core feature and your constraints. Ask for a short plan before any code, and push back on anything too big.
04
Build the minimum working product
Get the core feature working end to end. Commit to Git often so you can undo mistakes.
05
Test every interaction and fix errors
Click every button, submit every form with good and bad input, try it on your phone. Ask the AI to explain and fix what breaks.
06
Deploy a usable demo
Put it on a public URL and open it in a private window to make sure anyone can use it without your login.
07
Prepare a short pitch
Up to two minutes, recorded from your screen — please don't show your face. Explain the architecture, show the code if you can, demonstrate the main features, and say how AI helped.
08
Submit
Fill in your project details, add the demo and pitch, review, and submit before your deadline.
AI coding assistants and builders
Any of these can take you from a description to working code. Not every tool is free — check current plans and limits before relying on one.
Claude Code (official site, opens in a new tab)
Anthropic's agentic coding tool. It reads your project, plans changes, edits files and runs commands from your terminal, IDE or the Claude apps.
Requires a paid Claude plan or API usage. Check current plans before you start. Current plans and limits
OpenAI Codex (official site, opens in a new tab)
OpenAI's coding agent for writing, reviewing and running code, available in the terminal, IDE and ChatGPT.
Included with some ChatGPT plans; availability and limits vary by plan. Current plans and limits
Google Antigravity (official site, opens in a new tab)
Google's agent-first development environment, where AI agents plan, write and test code across the editor, terminal and browser.
Check the official site for current availability, usage limits and supported models.
Base44
Hosting your demo
We recommend Vercel first. Push your code to a GitHub repository, import it into the host, and each push deploys automatically to a public URL like your-app.vercel.app.
Free plans have usage limits and may restrict commercial use — no host offers unlimited free hosting. Static sites can also be hosted on Netlify or Cloudflare Pages.
Vercel (official site, opens in a new tab)
Recommended first choice. Connect a GitHub repository and every push deploys to a public URL, with preview links for each change.
The Hobby plan is free for personal, non-commercial projects, with usage limits. Current plans and limits
Netlify (official site, opens in a new tab)
Git-connected hosting for static sites and web apps, with serverless functions and form handling.
Has a free plan with monthly usage credits. Check current limits. Current plans and limits
Cloudflare Pages (official site, opens in a new tab)
Deploys static sites and full-stack apps to Cloudflare's global network from a Git repository.
Free tier with build and file limits. Current plans and limits
Databases and authentication
You may not need a database at all. Static sites, calculators, games and tools that keep data in the browser work fine without one. Add one when you need sign-in, data that persists between visits, or shared data between users.
Keep secrets secret. API keys and passwords go in environment variables on your host (for example Vercel → Settings → Environment Variables), never in client-side code or a public repository. Anything shipped to the browser is public. Turn on Row Level Security (Supabase) or security rules (Firebase) before sharing your demo.
Supabase (official site, opens in a new tab)
Postgres database with authentication, file storage and auto-generated APIs. Turn on Row Level Security for every table that holds user data.
Free plan with project and usage limits; free projects may pause when inactive. Current plans and limits
Firebase (official site, opens in a new tab)
Google's app platform with Firestore, authentication, hosting and cloud functions. Write security rules before you launch.
Spark (free) plan with quotas; Blaze is pay-as-you-go. Current plans and limits
Adding AI features (optional)
AI features are optional — you don't need an AI API in your finished product to enter. If you add one, call it from your server so your key stays private. Gemini free-tier availability and quotas change over time; local models through Ollama depend on your computer's hardware and the model you choose.
Gemini Developer API (official site, opens in a new tab)
Add text, image and multimodal AI features to your app with Google's Gemini models.
A free tier exists for some models, but quotas and availability change. Check current pricing and rate limits. Current plans and limits
Ollama (official site, opens in a new tab)
Run open models locally on your own computer, with no API key. Performance depends on your hardware and the model you choose.
Free to run locally; you supply the hardware.
Learning and reference
MDN Web Docs (official site, opens in a new tab)
Trusted reference for HTML, CSS, JavaScript and web APIs — useful for checking what your AI assistant wrote.
web.dev: Accessibility (official site, opens in a new tab)
A free course on building accessible websites: labels, contrast, keyboard navigation and more.
Before you submit
- Your demo opens for someone who isn't signed in to anything.
- Every button, form and link on the main journey works.
- No API keys or passwords are visible in your code or repository.
- Your pitch is two minutes or less, shows your screen (not your face), and covers the architecture, the code and the main features.
- You can explain how you used AI and what you decided yourself.
Tool descriptions are summaries; features, prices and limits change. Always check the official links. Listing a tool does not mean its provider sponsors or endorses Vibe Forge.