DEV Community

Cover image for How I vibe-coded a full SaaS product using Claude
Jampar31
Jampar31

Posted on

How I vibe-coded a full SaaS product using Claude

I'm a frontend developer — comfortable with React, HTML, CSS, JS. But I'd never built a full product from scratch. No backend experience, no payment integration, no deployment knowledge. Just frontend.
So I decided to build something real. Not a tutorial. Not a clone. A live, deployed SaaS product with auth, payments, PDF generation, a custom domain, and real users.
The result: Invoya — a GST invoice generator for Indian freelancers. Live at invoya.in.
Here's exactly how I did it, solo, using Claude as my co-developer.

The stack I chose:

  • React + Vite + Tailwind CSS — comfortable territory
  • Firebase Auth + Firestore — no backend needed
  • jsPDF — client-side PDF generation
  • Razorpay — payments
  • Vercel — deployment
  • EmailJS — contact form emails without a backend

No TypeScript. No backend server. Everything client-side + Firebase.

How I actually worked with Claude:
I didn't just ask Claude to write code. I used it like a senior developer sitting next to me. I'd describe what I wanted to build, we'd think through edge cases together, and I'd review everything before implementing.
I wore every hat on this project — business analyst, UI/UX designer, developer, project manager, tester, QA, investor, and end user. Claude helped me think through all of them.

Things I'm proud of:
I obsessed over every detail across the entire product — UI, UX, edge cases, features, and cost.

  • UI/UX across every page — every screen was designed from scratch with real users in mind. Clean layouts, mobile-first, consistent brand colors, hover states, transitions, empty states, and loading states. Nothing was left half-done.

  • Edge cases thought through thoroughly — due dates can't be set before invoice dates. Negative amounts are blocked. Invoice limits are rolling 30 days, not calendar months. Expired Pro plans revert gracefully. Every scenario a real user might hit was considered before they could hit it.

  • Features that actually solve freelancer problems — the dashboard isn't just a list. It has KPI cards, overdue detection, search, sort, grid, and list views, and pagination. Things you'd expect from a paid product.

  • Payment reminders — solving an awkward freelancer problem — chasing clients for payment is uncomfortable. Most freelancers avoid it. So I built a reminder system with 5 reminder types and 3 tones — friendly, professional, or firm — with auto-filled invoice details, ready to send on WhatsApp or email in one click. The feature exists because the awkwardness is real.

  • When something wasn't possible, I found an alternative — OAuth redirect caused blank screens on mobile, so I switched to a pop-up. No backend meant no server emails, so EmailJS handled it for free. Every constraint had a workaround.

  • Professional product at minimal cost — Firebase free tier, Vercel free hosting, EmailJS free tier, jsPDF open source. The only real costs were the domain and Razorpay fees. A fully live SaaS product for nearly nothing.

Small details that most people wouldn't notice. But they add up to a product that feels polished.

The moment I almost quit:
Halfway through, I searched "invoice generator India" and found dozens of existing tools. Zoho, Vyapar, a hundred free generators. I sat with that for a few days.
Then I realised — the goal was never to win a market. It was to ship something real and learn every step of doing it. So I kept going.

What I learned that no tutorial teaches:

  • jsPDF doesn't support the ₹ symbol — had to use "Rs." everywhere
  • Google OAuth redirect causes blank screens on mobile — always use a pop-up
  • Firebase auth state is async — if you need UID at component mount, you need to wait for it explicitly
  • GoDaddy + Vercel custom domain setup is surprisingly painful
  • Deploying is easy. Getting indexed on Google is a different skill entirely.
  • Marketing and gaining real users is harder than building

Where I am now:
Live, launched, doing organic marketing only. No paid ads. Building in public.
If you're a frontend developer thinking about building your first full product — do it. Pick a simple problem, choose a stack you're mostly comfortable with, and fill the gaps with AI. The goal isn't a perfect product. It's finishing something real.

Invoya is live at invoya.in — free GST invoice generator for Indian freelancers and small businesses.

Top comments (0)