This content originally appeared on DEV Community and was authored by jacky
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.
P.S. Oh, wait. I did drop $10 to snag the domain name… C’est la vie! 😂
This content originally appeared on DEV Community and was authored by jacky
jacky | Sciencx (2025-11-03T10:08:00+00:00) Build a Website Application for Free in 2 Hours with Vibe Coding. Retrieved from https://www.scien.cx/2025/11/03/build-a-website-application-for-free-in-2-hours-with-vibe-coding/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.