Build a Website Application for Free in 2 Hours with Vibe Coding

#webdev #ai #productivity

Seriously, AI is a game-changer. It makes the stuff we used to do easy, now automatic. The hard stuff? Way easier. And those impossible-sounding tasks? They’re now just fun challenges we can totally crush.

I’m one of those people who uses Telegram for everything — especially notes. It’s just so quick, easy to access, and light. That habit actually sparked a fun idea: Why not build my own note-taking app? Plus, it was the perfect excuse to play around with the newest tech.

A lazy, rainy weekend rolled around, and my personal Hackathon officially kicked off… 💡

After a few minutes of coffee-fueled brainstorming, here’s the stack I decided to run with:

Cloudflare Pages: Hosting my React Native frontend app. Easy-peasy.
Cloudflare Workers: My backend service, built super-fast with Hono.
Cloudflare D1: A simple, sweet little SQL database.
Cloudflare R2: Object storage for saving user pictures and canvas drawings.
Claude Code (Anthropic): My main AI sidekick for actually building the thing.

This is my design architecture for working on this project

I gotta give props to Cloudflare here. It’s ridiculously convenient for getting started, and they have an awesome FREE tier. Seriously, it’s clutch. Plus, their built-in rules for DDOS and bot protection make it easy to keep your site safe from the start.

My AI Squad Workflow: Building the App in 6 Steps

To make sure my AI buddies didn’t just wander off and do their own thing, I set up a super clear, step-by-step workflow for every task:

Draft Design: I’d ask the frontend AI Agent to whip up a draft design, making sure it follows my basic system-design guidelines.
Review & Full Design: I’d quickly check the draft. If it looked good, I’d tell Claude to make the full design and an API design request (in a neat Markdown file) that matched the look.
Backend Deployment: That API request goes into my Knowledge Base Repository. Then, the Backend AI Agent grabs it, reads the specs, and starts building all the APIs.
Final API Docs: Once the APIs are ready, the AI creates a final, detailed API document (with cURL examples, endpoints, etc.) and saves it in the Knowledge Base Repository.
Frontend Integration: The Frontend AI Agent uses that final API documentation from step 4 to connect everything to the backend.
The Final Check: My job? Just reviewing the finished product after the whole loop is complete.

🎉 And Here’s The Finished App!

Check it out! That’s the final result. I literally went from nothing to a test-ready app in just 2 hours, and the development cost was zero dollars for the entire platform.