Why VibeCoding?

• Rapidly prototype playful webapps without heavy ceremony
• Use just enough structure—find your creative flow
• Data and logic where you want them (client, server, or both)
• Encourage collaboration and creative learning
• Ship fast, have fun, learn a ton!

Kickoff: Architecture Is a Vibe

• Keep things simple, but intentional
• “Dumb” backend? Sometimes smart!
• Data can live in frontend—spreadsheets, downloads, local files
• Secure by design: less sensitive data = less to protect

VibeCoding Patterns

• Start with sketches: whiteboard, napkin, draw.io, whatever!
• Decide data flow early (arrows over boxes)
• Minimal persistence: export/import files, not always a full database
• When backend is needed, make it lean and focused

Code Example

# "Vibe" function: stream data from frontend
def handle_upload(file_contents):
    process_data(file_contents)
    return "All done!"

Simple, collaborative, easy to audit.

def test_output():
    assert handle_upload("foo") == "All done!"

The Method Matters

• Flow feels great—but test, audit, and repeat!
• Closed cycles: plan → build → test → document
• Regular quick audits (humans and AI!)
• “Buddy review” style—catch issues and learn together

Discipline = Freedom

• Process lets you go wild and stay safe
• Small habits, big payoffs
• Creative vibe is best protected by little rituals

Dual Columns: Choices

Tips & Tricks

• Comment code, even just a line!
• Use “build, test, deploy” scripts
• Let copilots riff, then review carefully

🚦 Beginner Deployment Checklist

• App runs locally without errors
• All secrets/keys are out of your code!
• README explains setup & usage
• Build/export scripts work (build-html.sh, etc.)
• Tested app in a browser/incognito window
• Backups: Save a copy of your project!
• Chose a safe host (mittwald ftw)
• Shared the link with a friend—got feedback
• Celebrated your first deploy! 🎉

Small steps, big progress.

🏁 Get Vibing!

Start building your app—one sketch, test, and deploy at a time.

🚀 Start your session now!