Every tech stack article makes the same mistake: they compare features on paper without building anything. "React has a larger ecosystem." "Vue is easier to learn." "Vercel has great DX." These claims mean nothing until you hit production.
We've built eight production demos with this stack. Not prototypes—fully deployed sites with real users, 90-100/100 PageSpeed scores, and $0/month hosting costs. Every choice we make comes from shipping code, not reading documentation.
This article documents our complete MVP stack: Vue over React, Nuxt over Next, Cloudflare over Vercel, and when to use Supabase versus Firebase. We'll explain the reasoning, share the war stories, and tell you when to ignore our advice.
What you'll learn:
- Why we choose Vue and independent teams over corporate frameworks
- The real Vercel restrictions we hit (and why we switched to Cloudflare)
- Backend choices: Supabase, Firebase, and Cloudflare Workers
- Why 90%+ test coverage is non-negotiable
- When to break these rules
Our proof:
- 8 production demos at codecrank.ai
- 90-100/100 PageSpeed scores across all sites
- $0/month hosting for everything
- 2-4 week delivery timelines
Let's start with the most controversial choice.
Frontend: Vue Over React
The Corporate Framework Problem
React is a Facebook framework built for Facebook's priorities. Angular is a Google framework built for Google's priorities. When Meta needs to optimize for their billion-user social network, React's roadmap reflects that—not your 2-week MVP.
Vue is different. Evan You and a small team built it independently, on their own time, because they saw what was wrong with corporate frameworks and decided to do better. That independence signals care. No shareholder demands. No corporate roadmap. Just developers building the best tool they can.
This isn't anti-corporation ideology. It's practical: independent teams optimize for developer experience because that's their only competitive advantage. Corporate frameworks optimize for internal priorities that may never align with yours.
Code Quality: Templates vs JSX
React's JSX mixes markup and logic in one file. Some developers love this. We find it harder to read and reason about—especially when debugging at 2am.
Vue's single-file components separate concerns clearly:
<template>
<!-- HTML structure, easy to scan -->
<div class="card">
<h2>{{ title }}</h2>
<p>{{ description }}</p>
</div>
</template>
<script setup>
// Logic, isolated and testable
const props = defineProps(['title', 'description'])
</script>
<style scoped>
/* Styles, scoped to this component */
.card { padding: 1rem; }
</style>
Template, script, style. Three sections, three concerns, zero mixing. When something breaks, you know where to look.
Composition API: Hooks Done Right
Vue's Composition API learned from React Hooks' mistakes. No stale closure bugs. No dependency array footguns. No useEffect cleanup confusion.
<script setup>
import { ref, computed } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)
function increment() {
count.value++
}
</script>
Clean, predictable, debuggable. The reactivity system handles dependencies automatically—you don't manually specify what to watch.
The Market Share Argument
"But React has 40% market share and more jobs."
For MVPs, this argument fails. You're not hiring a 10-person React team. You're building fast with 1-3 developers. Vue has everything you need for 95% of MVPs. Choosing React for "future hiring" optimizes for a future that may never happen—42% of startups fail due to no market need, not framework choice.
When React wins: You need React Native for mobile, your team is already expert in React, or you need a very specific niche library that only exists in the React ecosystem.
When Vue wins: Small teams, MVPs, clean maintainable code matters, and you value independent teams over corporate frameworks.
The Vue Ecosystem: Quasar
Speaking of independent teams—Quasar deserves mention. It's a Vue component framework with 80+ production-ready components, excellent documentation, and a small team that genuinely cares about developer experience.
When we need data tables, form validation, dialogs, or complex UI patterns, Quasar has them built-in. No hunting through npm for compatible libraries. No version conflicts. One framework, everything works together.
For SaaS dashboards and data-heavy applications, we pair Quasar with Vue. For marketing sites and content-focused MVPs, we use Nuxt.
Meta-Framework: Nuxt
Nuxt 4: Batteries Included
Nuxt gives you everything without configuration:
- File-based routing: Create a file, get a route. No React Router setup.
-
Auto-imports: Use
ref()without importing it. Components auto-register. -
Image optimization:
<NuxtPicture>handles AVIF/WebP conversion automatically. -
SEO:
useHead()for meta tags, built-in sitemap generation. - Deployment: One-line adapters for Cloudflare, Vercel, Netlify, Node.
<!-- pages/about.vue -->
<template>
<div>
<NuxtPicture src="/team.jpg" sizes="sm:100vw md:50vw" />
<h1>About Us</h1>
</div>
</template>
<script setup>
useHead({
title: 'About Us',
meta: [{ name: 'description', content: 'Our team and mission' }]
})
</script>
That's a complete, SEO-optimized page with responsive images. No configuration files. No import statements for framework features.
SSG for MVPs
Most MVPs don't need server-side rendering on every request. Static Site Generation (SSG) pre-renders pages at build time:
- Zero server costs (static files on CDN)
- Instant page loads (no server round-trip)
- Perfect for marketing sites, blogs, documentation
- Still dynamic where needed (client-side hydration)
All eight of our demos use Nuxt SSG deployed to Cloudflare Pages. Zero hosting costs, sub-second load times.
Hosting: Cloudflare Over Vercel
The Story
We evaluated Vercel for a serverless API project. The developer experience looked great. Then we hit reality.
Restriction #1: Git Author Email
Vercel's Hobby plan requires your git commit author email to match your Vercel account email. We use privacy-focused email aliases for git commits. Vercel rejected every deploy.
The error message was cryptic. We spent an hour debugging before finding a buried forum post explaining the restriction. Workaround: change our git config globally, breaking our privacy setup, or upgrade to Pro.
Restriction #2: Zero Team Collaboration
Adding a second developer to a Hobby project? Upgrade to Pro: $20/user/month. For a two-person team, that's $480/year to collaborate on a side project.
We tried the Deploy Hook workaround—give your teammate a webhook URL to trigger deploys without account access. It worked, but felt fragile. No PR previews for them. No deploy logs. No real collaboration.
Three Hours Later
We'd spent three hours fighting restrictions on a "free" platform. That's not free—that's a trap.
The Switch to Cloudflare
Cloudflare Pages has none of these restrictions. No git author email requirements. Unlimited bandwidth (Vercel caps at 100GB/month on Hobby). Same features—preview deployments, custom domains, git integration.
The migration took 20 minutes. Connect GitHub repo, set build command (npm run generate), deploy. Every feature we needed, zero friction.
When Vercel Makes Sense
Vercel isn't bad—it's optimized for a different use case:
- Next.js SSR: Vercel's edge functions are tightly integrated with Next.js server components
- Already on Pro: If you're paying, the restrictions don't apply
- Enterprise features: Advanced analytics, password protection, team management
For static sites, Nuxt SSG, or small teams on a budget? Cloudflare wins.
What About Netlify?
Netlify is solid. We haven't used it extensively, but the comparison favors Cloudflare for our use case: unlimited bandwidth vs 100GB, 500 builds/month vs 300 minutes, and Cloudflare's 200+ edge locations deliver better performance globally—especially in Asia, Africa, and the Middle East.
Netlify's advantage is built-in form handling without code. If you need contact forms on a static site and don't want to wire up a serverless function, Netlify makes that trivial. For everything else, Cloudflare's ecosystem (Workers, D1, R2) gives you more room to grow.
The Broader Lesson
Free tiers exist to convert you to paid tiers. Every platform makes "free" painful enough that upgrading feels worth it. Cloudflare's free tier is genuinely generous because their business model is different—they want you on their network for DNS, CDN, and eventually Workers.
Know the business model. It predicts the restrictions.
Backend: Choosing the Right Tool
Supabase: PostgreSQL + Auth + Storage + Vector Search
When to use: Relational data, user authentication, file storage, or AI-powered search.
Supabase gives you a full PostgreSQL database with:
- Row-level security (authorization at the database level)
- Built-in auth (email, OAuth, magic links)
- Real-time subscriptions
- pgvector for semantic search (critical for AI applications)
- Generous free tier (500MB database, 1GB storage)
// Client-side query with auth
const { data, error } = await supabase
.from('projects')
.select('*')
.eq('user_id', user.id)
The pgvector extension is a game-changer. We're currently building something with it—a recommendation engine powered by an in-house fine-tuned model. Vector similarity search against 10,000+ items, sub-second responses, all running on Supabase's free tier. More on that soon.
Best for: SaaS apps, user-generated content, complex data relationships, AI-powered recommendations.
Firebase: NoSQL + Real-time
When to use: Rapid prototyping, real-time features, mobile apps.
Firebase's Firestore excels at:
- Real-time sync across devices
- Offline support (critical for mobile)
- Simple document/collection model
- Serverless Cloud Functions (still genuinely good)
What Firebase lacks: vector search and predictable pricing. If you're building anything with embeddings or AI-powered recommendations, Firebase can't help. And Firestore's per-read/per-write billing model means you're constantly optimizing—batching operations, denormalizing data, caching aggressively—just to avoid surprise bills. PostgreSQL charges for storage and compute, not every query. For cost-conscious MVPs, that predictability matters.
// Real-time listener
onSnapshot(doc(db, 'rooms', roomId), (doc) => {
console.log('Room updated:', doc.data())
})
Best for: Chat apps, collaborative tools, mobile-first products.
Cloudflare Workers + D1: Edge Everything
When to use: Simple APIs, global latency matters, cost-sensitive.
Workers run at the edge—200+ data centers worldwide. D1 is SQLite at the edge.
// Worker handling API request
export default {
async fetch(request, env) {
const data = await env.DB.prepare('SELECT * FROM items').all()
return Response.json(data)
}
}
Best for: URL shorteners, simple CRUD APIs, serverless functions.
Our Philosophy
Start with the simplest backend that works:
- Can you avoid a backend entirely? (Static site + third-party APIs)
- Can Supabase client-side handle it? (Auth + database, no custom server)
- Do you need custom logic? (Add Workers or Supabase Edge Functions)
Avoid premature backend complexity. Many MVPs ship with just Supabase client-side calls.
Testing: 90%+ Coverage Non-Negotiable
Why We Don't Skip Tests
SeatGenius has a seating algorithm for concert venues—filling rows optimally based on party sizes and RSVP order, ensuring companions sit together, handling edge cases when parties don't fit neatly. Multiple seating strategies, each with different prioritization logic.
We wrote the tests first—over a million iterations to prove the algorithm handled every edge case before shipping. Result: worked on the first deploy. No production bugs. No rewrites. When we add features, the test suite catches regressions instantly.
The alternative is familiar to every developer: ship fast, then spend weeks chasing bugs that only appear in production. Fix one thing, break another. The codebase becomes something you're afraid to touch.
The Math
- Without tests: Ship fast initially, then slow down as bugs compound
- With tests: +20% time upfront, -40% debugging later
For a 4-week MVP:
- No tests: 4 weeks to ship, 2 weeks fixing bugs = 6 weeks
- With tests: 5 weeks to ship, minimal bug fixes = 5 weeks
Tests are faster. They just feel slower because the investment is upfront.
What We Test
- Unit tests (Vitest): Pure functions, utilities, data transformations
- Component tests: Vue components render correctly with different props
- Integration tests: API calls, Pinia stores, data flows
- E2E tests (Playwright): Critical user journeys, checkout flows, auth
Public Coverage Reports
Every demo has a public coverage report at coverage.[demo].codecrank.ai. We're not hiding anything. Check the numbers yourself.
The Honest Take
Every choice has trade-offs. Here's when to ignore our advice:
Use React if:
- Your team is already expert in React
- You need React Native for mobile
- You're joining a React-heavy company
Use Vercel if:
- You're building with Next.js SSR
- You're already on their Pro plan
- You need their enterprise features
Skip tests if:
- It's a throwaway prototype (truly throwaway, not "we'll add tests later")
- You're validating an idea in a weekend
We're not dogmatic. We're optimized for small teams shipping MVPs in 2-4 weeks. If that's not you, adapt accordingly.
Conclusion
Our stack isn't revolutionary. Vue, Nuxt, Cloudflare, Supabase—these are established tools. What matters is the combination and the discipline:
- Vue over React: Independent teams, cleaner code, faster development
- Nuxt over Next: Batteries included, SSG for free hosting
- Cloudflare over Vercel: No restrictions, unlimited team, $0/month
- Supabase/Firebase/Workers: Right tool for the job, not one-size-fits-all
- 90%+ test coverage: Slower start, faster finish
Eight demos. All 90-100/100 PageSpeed. All $0/month hosting. All delivered in 2-4 weeks.
The stack works. We've proved it. Now you know why.
Next in series: The Complete Lighthouse Guide covers SEO, accessibility, and best practices for perfect scores.
Top comments (0)