Category: Technology

  • On Vibe Coding: Building Hobby Projects with AI – My Workflow for Fast, Fun Development

    Lately, I’ve been on a roll building side projects at ridiculous speed, and honestly? It’s been a blast. With AI tools like ChatGPT and GitHub Copilot, turning weird ideas into real apps is faster than ever. Here’s the chaotic, nerdy, surprisingly effective workflow I use to go from “what if…” to “it’s live.”

    The best part? You don’t need to be a software engineer to follow along. This workflow is beginner-friendly, perfect for non-coders who just want to build cool stuff with the help of AI. And if you’re already a dev, it’s an awesome way to explore new platforms (like going from web to mobile without crying).


    1. Chatting Up ChatGPT

    Every project starts with some random idea that won’t leave me alone. I open ChatGPT and start vibing:

    • What’s a decent structure for this thing?
    • Which features should I care about first?
    • Can you summarize it so it sounds like I know what I’m doing?
    • Oh, and give me a name. Bonus points if it’s punny.
    • What color should the app feel like?
    • Can you do a short pitch and a longer one for app stores or that one friend who always asks questions?

    Then I get extra: I ask GPT to generate a logo based on the vibe so far. Same for a banner image. If I’m planning to ship it as a mobile app, I also get it to write up some sweet, professional-sounding release notes.

    Basically, by the time I’m done chatting, I’ve got a name, colors, a logo, descriptions, and a solid idea that looks like a real project (even though it’s still in my head).

    This step alone can give non-tech folks a solid sense of direction before even touching code.


    2. Spawning the Project Skeleton

    Next up: Visual Studio Code. I slap that idea summary into GitHub Copilot Chat and say, “Scaffold me, captain.”. Claude Sonnet is usually better for scaffolding.

    Depending on the stack (React, Next.js, Expo, whatever), it spins up:

    • README.md
    • Some folders that look organized
    • theme.js file for vibes
    • Placeholder components that feel like they’re waiting for greatness

    Boom. Skeleton complete. Time to add flesh.

    For non-devs: Copilot Chat literally writes the files for you. You can ask it to explain things along the way, or tweak stuff with plain English prompts.


    3. Coding One File at a Time Like a Chill Wizard

    Now I open each file, one at a time, and ask Copilot to fill it in. The README stays open for context (and to keep me from spiraling).

    Examples:

    • In Navbar.jsx: “Make a responsive navbar with Home, About, and Contact. Tailwind me up.”
    • In utils.js: “Add a function that formats dates like ‘May 18, 2025’ because that’s obviously important.”

    I go file-by-file. No rush. No stress. Just nerding out.

    Even if you’re new to code, you can copy-paste these prompts and get real results. Copilot will hold your hand more than you think.


    4. One Theme to Style Them All

    To keep things looking like they came from the same universe, I make a theme.js or theme.ts. It’s basically my app’s personality in code:

    export const theme = { colors: { primary: '#3B82F6', secondary: '#64748B', background: '#F1F5F9', text: '#111827', }, spacing: { sm: '0.5rem', md: '1rem', lg: '2rem', }, };

    Whether I’m using Tailwind, Chakra, or rolling my own styles like a rebel, this file keeps everything snappy and consistent.

    Not a designer? No worries—just ask ChatGPT what colors work well together. Done.


    5. Deploy and Yeet

    Here’s where things get spicy: I use Expo with React Native, which means I can go from idea to web app to mobile app (Android/iOS) in no time.

    For web, I deploy straight to Netlify. It’s just a Git push away.

    If the project needs a backend, I usually:

    • Use Cloudflare Workers to handle API endpoints. Super fast, no backend server headaches.
    • Reach for Supabase if I need a real database with auth, storage, etc.
    • Or Firebase Firestore for quick setup—plus I’m already using Firebase for quick social auth.

    Even these backend tools are AI-friendly: you can ask ChatGPT for help setting them up and it’ll walk you through the entire process.

    So yeah, deployment feels like cheating now. But I’m not complaining.


    Why This Madness Works

    No meetings. No blockers. No waiting for design approval. Just flow. Just fun. Just shipping.

    And the best part? Every little project teaches me something new. Could be a CSS trick, a new library, or just a better way to talk to AI. Fast feedback loops rule.

    Even non-coders will walk away with real skills and the confidence to keep building.


    Final Words From a Vibe Coder

    This chaotic-but-cozy workflow made me fall back in love with coding. If you’ve been stuck or bored or just need to make something goofy and cool, give this method a try.

    Whether you’re new to this or you’ve been coding for years, AI can help you skip the hard parts and focus on the fun. It’s never been easier to just start.

    If enough people care, I’ll drop screenshots and maybe even a video walkthrough. Until then, keep shipping weird stuff.