How to Start a Project

Optional, but recommended:

  • Dump all ideas, notes, and features into your AI chat interface of choice.

  • Ask questions like:

    • Should this be a web app or a mobile app?
    • What features make sense for a first version?
    • What does the user flow look like?
    • How could this work technically?

Iterate until you have:

  • A clear outline
  • A feature list
  • A short description you can paste into your builder

How to Choose What to Build and Which Tool to Use

Most projects start with an idea. The exception is sponsored hackathons or competitions, where the tool is sometimes chosen first and the idea follows.

Start by asking:

  • Who is the target audience?
  • What is the core functionality?

Those answers determine whether the project should be a website/web app, or mobile app.

Examples:

  • If the target audience is teenagers, a mobile app might make sense.
  • If the idea does not translate well to mobile, a web app is usually better.

This decision is not permanent. Vibe coding moves fast enough that switching platforms later is not a major time cost.

Once the platform is chosen:

  • Review your tool list
  • Weigh options based on the project

Typical first choices:

  • Simple websites: Lovable
  • Mobile apps: Vibecode or Anything
  • More complex projects: Cursor

Before committing, do a quick feasibility check:

  • Can the entire idea be built with this tool?

Planning may happen in ChatGPT or Gemini.

Working Effectively With AI Tools

  • Treat the AI as a collaborator

Debugging and Problem Solving

Errors are unavoidable. Take an active role when they happen.

A reliable process:

  1. Check logs (console logs, edge function logs, error messages)
  2. Use the tool’s built-in chat or discussion features
  3. Read the documentation for any API or integration you’re using
  4. If you’re still stuck, paste the error logs into an AI tool and debug conversationally

The goal isn’t just to fix it. It’s to understand what broke and why.

Basic Security Practices

If your app has users:

  • Enable Row Level Security (RLS)
  • This prevents users from accessing data that isn’t theirs
  • If needed, ask your tool to guide you through enabling it

Backing Up Your Work

  • Always sync projects to GitHub
  • This gives you backups, version history, and an easier path to deployment

Design Matters

Design is the first thing users see. If your app looks like default AI output, many users will dismiss it immediately.

You don’t need to become a designer, but you do need to change defaults.

Practical Design Adjustments:

Fonts

  • The default is often Inter
  • Don’t keep Inter
  • Pick something else from Google Fonts
  • Prompt your tool to use it, or upload a .ttf directly

Gradients

  • Very common default
  • Best practice is to remove them entirely

Colors

  • Blue and purple show up everywhere
  • Avoid relying on them
  • Use Coolors to generate a palette instead of guessing

Rounded Edges

  • Overused in default outputs
  • You don’t need to remove them entirely
  • Try squared edges occasionally to change the feel

Emojis

  • Remove them
  • They rarely fit product interfaces
  • They’re a clear signal that something is AI-generated

If you’re unsure how something should look:

  • Browse Dribbble or Mobbin
  • Screenshot designs you like
  • Paste them into an AI tool and ask how to describe those elements in developer terms

Open Graph Tags

Open Graph tags control how your site appears when shared.

  • Customize the title, description, and preview image
  • Don’t leave defaults untouched

Domains and Hosting

You don’t have to use a custom domain, but you should change the default domain that the tool gives you to something that fits your project better. Sometimes the default doesn’t reflect what your project has become, and updating it helps with presentation and clarity.

If you want to self-host, here’s a simple path:

  1. Sync your project to GitHub.
  2. Connect it to Netlify (their free plan usually works fine).
  3. Deploy automatically from your main branch.
  4. If you decide to use a custom domain, you can buy one from any registrar and follow the tool’s setup guide.

All of these platforms provide specific instructions for linking your domain.

Hackathons as Practice

Hackathons are one of the fastest ways to improve at vibe coding and ship quickly.

How to Find Hackathons

Twitter

  • Most hackathons are posted directly on Twitter
  • At least once a week:
    Do targeted searches
    Visit the profiles of major vibe coding tools
  • Search across Twitter using:
    “vibe coding”
    “vibe coders”
    “hackathon”
    “vibe coding competition”
    “vibe coding contest”
    “ai coding”

Contra

  • Ongoing challenges with strong sponsors
  • Cash prizes are common

Reddit

  • Smaller competitions are often advertised via posts
  • Relevant subreddits:
    /r/vibecoding
    /r/vibecodersnest
    /r/hackathon
    /r/vibecodedevs

Web Search

  • Google searches using:
    “vibe coding hackathon”
    “vibe coding competition”
    “vibe coding contest”
  • Boolean operators help narrow results

Community

  • Friends and other builders often tag each other in hackathons
  • Being active increases visibility into opportunities

Vibe Coding Tech Stack

Lovable for websites or web apps. Makes it really easy to spin them up quickly with their own AI gateway and backend (rebranded Supabase).

Google AI Studio for fun prototypes. Really easy to incorporate Gemini APIs, but harder to actually publish (for now. I’ve been reassured that they’re working on this.)

Bolt for slightly more complicated websites/web apps/apps. For when you need access to the terminal.

YouWare for websites and web apps. Lets you choose your model, and has an integrated backend product in YouBase.

Replit for kind of in-between projects.

Anything for websites/web apps/mobile apps. Backend included, and makes publishing to the App Store easy.

Cursor for anything you can think of.

Anthropic Claude Code. Useful even when you aren’t working with code. Ask it to organize your files.

Rork Vibecode and Natively for mobile apps.

Wabi for mini apps

GitHub for obvious reasons (Very useful for everything. If you’re starting out, I recommend thinking of it like a gateway between your code and your deployment/hosting provider.)

Netlify for deploying and hosting. Here’s an example: you’re building in Cursor, you commit and push to GitHub, you start a new project in Netlify and adjust your settings so your project auto deploys every time you commit a change to GitHub. Easy!

ChatGPT for brainstorming, collecting my thoughts, occasionally PRDs.

Nano Banana Pro assets for your projects. Images, icons, etc.

Canva pro for their magic erase tool, and background removal tool. Use magic erase to remove image model watermarks, use the background removal tool to remove backgrounds and create transparent pngs. Also great for making favicons and open graph images.

Convex for databases

Supabase also for databases

Namecheap for domains

Google Fonts for fonts (yes, you need to change the default font on your site)

Coolors for coming up with color palettes.

Mobbin and Dribbble for ideas.

Constraints to Understand

  • You don’t need expert-level technical knowledge to start
  • You do need to test what you build

Have fun!