🚀Vibe Coding
Home

Resources & Tools

Everything you need to keep building after the workshop

From AI coding assistants to deployment platforms, these are the tools that make modern development fast and fun. Start with the essentials, then explore based on your interests.

Quick Start Essentials

If you're starting from scratch, these are the only tools you need to build and deploy your first app today.

AI Code Editor

Cursor - The AI-first code editor we used today. Free to start, includes GPT-4 access.

Alternative: VS Code with GitHub Copilot

Deploy Your App

Netlify Drop - Literally just drag your folder into the browser. No account needed. Perfect for beginners.

Alternative: Vercel - More features, requires GitHub account

AI Development Tools

These tools let you code by describing what you want to build, not memorizing syntax.

AI Coding Assistants

  • Cursor - Full IDE with AI built-in. Chat with your codebase, generate entire features.
  • v0 by Vercel - Generate UI components from text descriptions. Great for React/Next.js.
  • Claude - Anthropic's AI assistant. Excellent for planning and debugging complex logic.
  • ChatGPT - OpenAI's assistant. Good for quick questions and code snippets.

AI APIs (Add AI to Your Apps)

  • OpenAI API - GPT-4o-mini is super cheap (~$0.15 per million input tokens). Great for most use cases.
  • Groq - Blazing fast inference. Free tier available. Perfect for real-time features.
  • Anthropic API - Claude Haiku is fast and cheap. Great for content analysis.
  • Replicate - Run open-source AI models. Image generation, speech, and more.

Web Frameworks

Modern frameworks that make building web apps fast. Pick one based on your preferences.

React Ecosystem

  • Next.js - Most popular React framework. Great docs, huge community.
  • Remix - Modern React framework focused on web standards.
  • Vite - Lightning fast build tool for React SPAs.

Vue Ecosystem

  • Nuxt - Vue framework (what this site uses). Intuitive and powerful.
  • Nuxt UI - Beautiful component library for Nuxt apps.
  • Vue 3 - Progressive JavaScript framework. Easier to learn than React.

Simpler Options

  • Astro - Build fast content sites. Mix frameworks or use none.
  • Alpine.js - Minimal framework for HTML enhancement.
  • Tailwind CSS - Utility-first CSS. Makes styling fast.

Full-Stack Solutions

  • Prisma - Type-safe database ORM. Works with any SQL database.
  • tRPC - End-to-end typesafe APIs. No more API documentation.
  • T3 Stack - Next.js + TypeScript + Prisma + tRPC starter.

Backend Services

Don't build authentication and databases from scratch. Use these services to ship faster.

Database & Auth

  • Supabase - Open source Firebase alternative. Postgres database, auth, storage, and real-time subscriptions. Generous free tier.
  • Firebase - Google's backend platform. NoSQL database, auth, hosting. Great for mobile apps.
  • PlanetScale - Serverless MySQL. Scales automatically, branching for databases.
  • Neon - Serverless Postgres. Branches like Git, scales to zero.

Authentication

  • Clerk - Beautiful auth components that work out of the box. Social logins, MFA, user management.
  • Auth0 - Enterprise-grade auth. More complex but very powerful.
  • NextAuth.js - Open source auth for Next.js. Free and flexible.

Payments

  • Stripe - The standard for payments. Great docs, works everywhere.
  • Lemon Squeezy - Merchant of record. They handle taxes for you.

Deployment & Hosting

Get your app online in minutes. Most offer generous free tiers perfect for side projects.

Static & JAMstack Hosting

  • Netlify Drop - The easiest deployment ever. Just drag your project folder into the browser. No account, no setup, just works.
  • Vercel - Best for Next.js but works with anything. Automatic deploys from GitHub. Includes analytics and edge functions.
  • Netlify - Full platform with build plugins and forms handling. Sign up for more features.
  • GitHub Pages - Free static hosting directly from your repo. Perfect for simple sites.
  • Cloudflare Pages - Fast global CDN. Unlimited bandwidth on free tier.

Full-Stack Hosting

  • Railway - Deploy anything with a Dockerfile. Simple and powerful.
  • Render - Alternative to Heroku. Auto-deploy from GitHub.
  • Fly.io - Deploy close to your users. Great for real-time apps.

Domain Names

  • GoDaddy - Popular domain registrar. Often has deals on .com domains.
  • Namecheap - Affordable domains with free privacy protection.
  • Porkbun - Developer favorite. Clean interface, good prices.

Learning Resources

The best way to learn is by building, but these resources can help when you get stuck.

Quick Tutorials

Documentation

Your Next Steps

Tonight

  • • Go to Netlify Drop and drag your project folder in
  • • Deploy the SpiderBytes demo (or your own variation)
  • • Share your live URL with a friend

This Week

  • • Get an API key from OpenAI or Groq
  • • Add real AI recommendations to your app
  • • Customize the UI to make it your own

This Month

  • • Build something you actually want to use
  • • Add authentication with Supabase or Clerk
  • • Get a custom domain from Porkbun
  • • Share what you built!

Use AI as Your Personal Mentor

Don't just use AI as a code generator. Use it as a teacher. You can learn pretty much anything with AI as your mentor, not just a worker.

Ask AI to "explain this like I'm 5" or "walk me through how this works step by step". Have it break down concepts you don't understand.

I personally went from data analytics to full-stack developer in a few months this way. AI explained everything I didn't know, patiently, as many times as I needed.

You don't need to memorize syntax or framework APIs. Just know these tools exist, and let AI help you implement them while teaching you along the way.

Try the Demo Get the Code