Over the past few months, Vibe coding has been gaining serious tractionβand I couldnβt resist diving in myself. Iβve been using AI coding assistants for a while, but I wanted to go deeper and really test what these tools can do in a realistic, end-to-end software development project.
So, I spent the last month building a full-featured ecommerce web and mobile app using some of the most talked-about Vibe coding platforms: Cursor, Windsurf, Lovable, Bolt, and Replit. It was a fun and empowering journeyβthereβs a real sense of accomplishment in being able to build software applications on your own. I also learned that working with the current generation of tools definitely requires a good deal of patience.
In this blog, Iβll walk you through:
- My experience building and deploying the applications
- What worked, what didnβt, and what broke halfway π
- How each tool stacks up in terms of usability, flexibility, and reliability
- Whether tools like these mean we still need software engineers (spoiler: yesβbut itβs complicated)
- Where I think this whole Vibe coding trend is heading next
π Coding Assistant Landscape: Then vs Now
AI coding assistants have come a long way. Here’s a quick look at how things evolved:
β° The Old School
- Classic autocomplete tools like IntelliSense or TabNine helped speed up typing but werenβt context-aware.
- Low-code/no-code platforms (e.g., Bubble, Wix, Zapier) let users drag and drop components, but required scripting for anything complex.
π§ The New Era: Vibe Coding
- Powered by LLMs (Large Language Models)
- Can write, refactor, debug, and deploy apps using natural language queries
- Opens the door for non-developers to build apps
- Empowers developers to skip boilerplate and focus on design, logic, and systems thinking
π‘ What is Vibe Coding?
Vibe coding refers to using AI-powered tools to build software via natural language prompts, mixed with lightweight manual coding. It’s all about staying in the flow and letting the assistant do the heavy lifting.
π‘ The Experiment
Although I started my career as a developer, I haven’t been actively coding in the last decade. Instead, I’ve focused on architecture, reviews, testing, and product design. That said, I wanted to push these Vibe tools beyond simple demos or prototypes.
So, I picked a moderately complex use case: an Ecommerce application with a web frontend and mobile app, complete with backend, auth, payment, and roles.
β¨ Features Implemented
- User authentication (sign-up, login, password reset, Google login)
- Roles: Admin, Seller, Customer
- Admin: manage users, view orders, seller capabilities
- Seller: add products
- Customer: browse catalog, filter/sort, add to cart, checkout
- Order history
- Payment integration with Razorpay
π Tech Stack Used
Frontend: React
Backend: Node.js + Express
Database: MongoDB
Deployment: Vercel / Render / Netlify depending on tool
ποΈ Environments
- Web app
- Mobile app (via Expo)
- Both local and production deployments
π§ Tool-by-Tool Breakdown
Each tool was tested with the same requirements and judged based on ease of use, flexibility, ability to debug, and ability to deploy real features.
π§ͺ Cursor
π οΈ Plan: Paid ($20)
π» Used With: MongoDB Atlas, Render/Vercel for deployment, Claude 3.7 model
β Highlights:
- Full tech stack flexibility
- Supports both web and mobile
- Git & database migration support
- Wrote unit tests and debugged APIs
- Workflow suits developers
β οΈ Challenges:
- Terminal tracking is weak
- Frequent application crashes
- Manual debugging needed
π¦ Artifacts:
- Web application (First access needs 30 seconds as free version of vercel needs warm up)
- seller (seller@example.com / seller123)
- customer (customer@example.com / customer123)
- Mobile app (Needs expo installed to run)
- Code for web application
- Code for mobile application
Windsurf
π οΈ Plan: Free and Paid version
π» Used With: Claude 3.7 & Gemini, Vercel/Render for cloud, Cloudinary for images
β Highlights:
- Better terminal/session management
- Console log debugging is stronger
β οΈ Challenges:
- Hard to course-correct from incorrect assumptions
- Hit credit limits fast (Ran out of credits with paid version in 3 days)
π¦ Artifacts:
- Web application (Partial app, first access needs 30 seconds as free version of vercel needs warmup)
- Code for web application
β‘ Bolt
π οΈ Plan: Free
π» Used With: React + Vite, Supabase, Netlify
β Highlights:
- Blazing fast startup because it runs as web container
- Fully in-browser
β οΈ Challenges:
- Can’t run backend services (e.g., Express, MongoDB) because of running as web container
- Not suitable for full-stack use cases
π¦ Artifacts:
- Incomplete app prototype (Ran out of free credits)
π Lovable
π οΈ Plan: Free and then Paid ($20)
π» Used With: React + Supabase, auto-deploy on Lovable Cloud
β Highlights:
- Very easy to use
- Seamless production deployment
β οΈ Challenges:
- Slower code generation speed
π¦ Artifacts:
- Web application
- user(customer1@example.com, 123456), seller(seller@example.com, 123456)
- Code
π οΈ Replit
π οΈ Plan: Free
π» Used With: Ghostwriter AI, browser IDE, MongoDB Atlas
β Highlights:
- Easy to set up
- Great for fast testing
β οΈ Challenges:
- Cloud-only with less system-level flexibility
- Not ideal for large production apps
π¦ Artifacts:
- Did not complete(ran out of free credits)
π Tool Comparison Snapshot
| Feature | Cursor | Windsurf | Replit | Lovable | Bolt |
|---|---|---|---|---|---|
| Ease of Use | Medium | Medium | Easy | Easy | Easy |
| Dev Environment | Local | Local | Cloud | Cloud | Cloud |
| Deployment Options | Manual | Manual | Built-in | Built-in | Manual |
| Tech Stack Flexibility | High | High | Medium | Limited | Limited |
| Target Users | Devs | Devs | All | Non-devs | Non-devs |
π§ My Take: Cursor gives you the most power; Lovable gives you the most convenience.
β What Needs Work
π οΈ Debugging:
Most tools still rely on you reading console logs and piecing things together manually. (My pick: Use Operator framework to understand what’s happening in browser and fix issues automatically)
π Speed:
Long wait times and retries can break the flow.
π§© Fragility:
Small changes can break other parts of the app. There’s no real “awareness” of architectural dependencies.
π Lack of modularity:
Encouraging reusable design and clean code still needs a human architect.
π Pro Tips: Making Vibe Coding Work
π Define clear requirements
Roles, pages, workflows, error states β lay it all out before prompting.
π§ Use guardrails (rules/constraints)
Many tools let you enforce language, style, and folder structure.
π― Stick to common stacks
React, Node, Python, SQL β that's where LLMs shine.
π‘ Use models wisely
Claude 3.7 was the most consistent for me, especially on multi-step flows. Experiment with models and find the best one for your use case.
π§ͺ Debug like a dev
Logs > terminal > DB traces. Be ready to dive in.
π When stuck, reboot
Sometimes starting fresh saves more time than untangling broken AI logic. Keep regular checkpoints to go back to stable point.
π§ Is Software Engineering Dead?
Nope. But it’s definitely shifting.
π§ What Vibe Coding Does Well:
- Speeds up boilerplate
- Empowers solo builders
- Makes prototyping fast
π§ What It Still Needs Help With:
- Scaling apps
- Clean architectures
- Advanced debugging
- Enhancing existing production apps
π§βπ» Developers wonβt disappear. Theyβll evolve. The future engineer:
- Uses AI to generate & validate code fast
- Designs smart systems
- Oversees quality, reusability, and security
π¬ “Itβs not about coding less. Itβs about coding smarter.”
I built a website dedicated to learning Vibecoding: https://vibecoding.video. Check it out if you’re interested!