Picture by Creator
I used to hate vibe coding. I believed I may write higher code, design cleaner methods, and make extra considerate architectural choices by myself. For a very long time, that was most likely true. Over time, issues modified. AI brokers improved considerably. MCP servers, Claude expertise, agent workflows, planning-first execution, and long-horizon coding instruments turned vibe coding from a gimmick right into a sensible technique to construct actual methods.
In some unspecified time in the future, I gave in. Since then, I’ve been utilizing Claude Code and OpenCode to construct methods that I’d usually think about too complicated for fast iteration. These embrace cost platforms, stablecoin wallets, e book studying functions, and full-stack production-ready net methods. What shocked me was not simply the pace, however the consistency of outcomes as soon as the proper construction and instruments had been in place.
The actual downside most individuals face with vibe coding isn’t writing code.
It’s selecting the best tech stack.
Frontend, backend, authentication, databases, storage, electronic mail, funds, and deployment all include numerous choices. With out a clear stack, even robust AI coding brokers battle to make good choices. When an agent is given a well-defined and opinionated tech stack, it may well reliably construct an end-to-end software with far much less friction.
That’s what this text focuses on.
I’ll stroll by means of my go-to tech stack for vibe coding fashionable functions. That is the stack I reuse as a result of it really works. We’ll cowl how the items match collectively, what every instrument is accountable for, and find out how to go from zero to a production-ready system. I will even share a Claude Code pattern immediate and optionally available instruments that assist flip a working prototype right into a system prepared for manufacturing.
# My Tech Stack and Why This Stack Works
On this part, I’ll break down the precise tech stack I exploit for vibe coding and clarify why these instruments work so effectively collectively when constructing actual functions.
The Stack
- Subsequent.js (App Router) -> Frontend and layouts
- shadcn/ui -> UI parts
- Server Actions + Routes -> Backend logic and webhooks
- Supabase -> Database, auth, storage
- Resend -> Transactional emails
- Stripe -> Funds and subscriptions
- Vercel -> Deployment and previews
This stack is deliberately easy. You should utilize the free tier of each platform listed right here, which makes it ideally suited in case you are beginning out. You’ll be able to deploy a full software to Vercel at no cost and join managed providers with out upfront value.
Why This Stack Scales With out Getting Messy
Two Subsequent.js primitives do many of the heavy lifting because the app grows:
- Server Actions deal with type submissions and server-side mutations. They preserve information writes near the UI and take away a number of boilerplate that usually seems early.
- Route Handlers deal with webhooks, well being checks, and customized endpoints. This provides you a clear place for exterior methods to speak to your app with out polluting your UI logic.
Supabase provides you database, authentication, and storage with a safety mannequin that lives near the info. In case you allow Row Stage Safety early, authorization stays constant because the system grows and also you keep away from painful migrations later.
Resend retains transactional electronic mail easy and environment-driven.
Stripe Checkout paired with webhooks provides you a dependable technique to convert funds into actual entitlements as a substitute of scattered characteristic flags.
Vercel retains preview and manufacturing deployments aligned, so you might be testing in actual environments from day one.
This stack works effectively for vibe coding as a result of it’s opinionated, predictable, and simple for an AI coding agent to purpose about. As soon as the boundaries are clear, the system nearly builds itself.
# Construct Plan from Zero to a Paid MVP
This construct plan is designed for vibe coding with actual instruments. The aim is to get a production-ready skeleton first, then add functionality in small phases with out breaking earlier choices. Every section maps on to the stack you might be utilizing, so an AI coding agent can observe it finish to finish.
Section 1: MVP Basis
Construct the complete product loop with minimal scope.
- Arrange Subsequent.js (App Router) undertaking with Vercel deployment
- Dashboard shell and navigation utilizing shadcn/ui
- Authentication flows utilizing Supabase Auth (signup, login, reset)
- One core user-owned desk in Supabase Postgres
- CRUD screens powered by Subsequent.js Server Actions
- Preview deployments on each change by way of Vercel
On the finish of this section, you have already got a usable app operating in manufacturing, even when the characteristic set is small.
Section 2: Knowledge Security and Entry Management
Lock down consumer information earlier than including extra options.
- Allow Row Stage Safety on user-owned tables in Supabase
- Outline learn and write insurance policies primarily based on possession
- Use constant patterns like owner_id, created_at, updated_at
- Validate entry guidelines by means of actual UI flows, not simply SQL
This section prevents future rewrites and retains safety aligned with how the app really works.
Section 3: Electronic mail and Storage
Add belief and file dealing with.
- Transactional emails by way of Resend (welcome, verification, resets)
- Non-public storage buckets utilizing Supabase Storage
- Add flows that respect the identical possession guidelines as your database
- Signed URLs or managed entry primarily based on consumer id
That is the place the product begins to really feel full as a substitute of experimental.
Section 4: Billing and Entitlements
Flip utilization into income.
- Create Stripe Checkout classes and redirect customers
- Deal with Stripe webhooks with Subsequent.js Route Handlers
- Retailer subscription or buy state in Supabase
- Gate premium options primarily based on saved entitlements
- Make webhook dealing with idempotent utilizing processed occasion IDs
By the tip of this section, you might have a paid MVP that may scale with out altering core structure.
# Claude Code Starter Immediate
You’ll be able to change “Guide Store + Reader MVP” with your personal concept utilizing the identical Claude Code immediate.
Construct a **Guide Store + Reader MVP** utilizing this stack:
- Subsequent.js App Router
- shadcn/ui
- Supabase (Postgres, Auth, Storage)
- Resend
- Stripe (Checkout + webhooks)
- Vercel
## Aim
Ship a production-ready Guide Store and Reader with paid entry.
## Construct
- Public pages: touchdown, pricing, e book record
- Auth: enroll, check in, reset password
- Protected app: reader dashboard
## Knowledge
- `books`, `chapters`
- Row Stage Safety so customers entry solely their very own information
## Options
- CRUD by way of Server Actions
- Reader view with progress monitoring
- Non-public storage for e book belongings
- Welcome electronic mail
- Stripe Checkout + webhook-based entitlements
## Output
- Clear app construction
- Minimal dependencies
- README with setup, env vars, migrations, Stripe, and Vercel steps
- Handbook verification guidelines per characteristic
All it’s essential do is swap Claude Code to Plan Mode, paste the immediate, and alter the thought or regulate the scope primarily based in your wants.
When you begin, Claude will plan the system first after which start constructing step-by-step with out friction. It’ll additionally information you thru organising required providers, creating accounts on third-party platforms, and producing API keys the place wanted.
This makes it straightforward to go from an concept to a working software with out getting caught on setup or choices.
# Elective Instruments
These instruments should not required to ship the primary model, however they aid you check, monitor, and harden the appliance because it grows in actual utilization.
| Class | Software choices | What it helps with | When so as to add it |
|---|---|---|---|
| Unit exams | Vitest | Quick exams for utilities and server logic | As soon as core CRUD works |
| Part exams | React Testing Library | Catch UI regressions in kinds and states | After the dashboard stabilizes |
| Finish-to-end exams | Playwright | Full consumer flows: signup → create → pay | Earlier than including extra options |
| Error monitoring | Sentry | Stack traces, launch well being, alerting | As quickly as actual customers arrive |
| Logs | Axiom or Logtail | Searchable request logs, webhook debugging | When webhooks and billing go dwell |
| Efficiency checks | Lighthouse (CI) | Catch sluggish pages and outsized bundles | Earlier than advertising and marketing launches |
| Schema and migrations | Drizzle Equipment or SQL migrations | Repeatable schema adjustments | The second you might have 2+ tables |
| Background jobs | Inngest or Set off.dev | Async work: emails, exports, cleanup | When workflows develop past requests |
| Charge limiting | Upstash Redis (or comparable) | Defend auth endpoints and webhooks | When site visitors turns into actual |
| Product analytics | PostHog (or comparable) | Funnels, activation, characteristic utilization | After you recognize what you measure |
# Closing Ideas
Fashionable growth and engineering instruments are evolving quick. Most of them are actually designed with AI integration in thoughts, providing good documentation, APIs, and MCP-style entry so AI brokers can work with them straight and construct software program quicker than ever.
In case you are a knowledge scientist who has by no means touched net growth, or an entire newbie who desires to construct one thing actual or launch a startup, I strongly advocate beginning with this tech stack. It requires minimal setup and allows you to deploy a working software nearly instantly.
It took me almost three months to check and evaluate instruments earlier than deciding on this stack. Beginning right here will prevent that point.
In order for you extra flexibility later, you possibly can break up issues out. For instance, use Neon for the database, Clerk for authentication, and preserve the whole lot else the identical. Spreading duties throughout instruments makes it simpler to exchange one half with out breaking the remainder as your system grows.
Begin easy, ship early, and evolve solely when it’s essential.
Abid Ali Awan (@1abidaliawan) is a licensed information scientist skilled who loves constructing machine studying fashions. Presently, he’s specializing in content material creation and writing technical blogs on machine studying and information science applied sciences. Abid holds a Grasp’s diploma in expertise administration and a bachelor’s diploma in telecommunication engineering. His imaginative and prescient is to construct an AI product utilizing a graph neural community for college kids battling psychological sickness.
Picture by Creator
I used to hate vibe coding. I believed I may write higher code, design cleaner methods, and make extra considerate architectural choices by myself. For a very long time, that was most likely true. Over time, issues modified. AI brokers improved considerably. MCP servers, Claude expertise, agent workflows, planning-first execution, and long-horizon coding instruments turned vibe coding from a gimmick right into a sensible technique to construct actual methods.
In some unspecified time in the future, I gave in. Since then, I’ve been utilizing Claude Code and OpenCode to construct methods that I’d usually think about too complicated for fast iteration. These embrace cost platforms, stablecoin wallets, e book studying functions, and full-stack production-ready net methods. What shocked me was not simply the pace, however the consistency of outcomes as soon as the proper construction and instruments had been in place.
The actual downside most individuals face with vibe coding isn’t writing code.
It’s selecting the best tech stack.
Frontend, backend, authentication, databases, storage, electronic mail, funds, and deployment all include numerous choices. With out a clear stack, even robust AI coding brokers battle to make good choices. When an agent is given a well-defined and opinionated tech stack, it may well reliably construct an end-to-end software with far much less friction.
That’s what this text focuses on.
I’ll stroll by means of my go-to tech stack for vibe coding fashionable functions. That is the stack I reuse as a result of it really works. We’ll cowl how the items match collectively, what every instrument is accountable for, and find out how to go from zero to a production-ready system. I will even share a Claude Code pattern immediate and optionally available instruments that assist flip a working prototype right into a system prepared for manufacturing.
# My Tech Stack and Why This Stack Works
On this part, I’ll break down the precise tech stack I exploit for vibe coding and clarify why these instruments work so effectively collectively when constructing actual functions.
The Stack
- Subsequent.js (App Router) -> Frontend and layouts
- shadcn/ui -> UI parts
- Server Actions + Routes -> Backend logic and webhooks
- Supabase -> Database, auth, storage
- Resend -> Transactional emails
- Stripe -> Funds and subscriptions
- Vercel -> Deployment and previews
This stack is deliberately easy. You should utilize the free tier of each platform listed right here, which makes it ideally suited in case you are beginning out. You’ll be able to deploy a full software to Vercel at no cost and join managed providers with out upfront value.
Why This Stack Scales With out Getting Messy
Two Subsequent.js primitives do many of the heavy lifting because the app grows:
- Server Actions deal with type submissions and server-side mutations. They preserve information writes near the UI and take away a number of boilerplate that usually seems early.
- Route Handlers deal with webhooks, well being checks, and customized endpoints. This provides you a clear place for exterior methods to speak to your app with out polluting your UI logic.
Supabase provides you database, authentication, and storage with a safety mannequin that lives near the info. In case you allow Row Stage Safety early, authorization stays constant because the system grows and also you keep away from painful migrations later.
Resend retains transactional electronic mail easy and environment-driven.
Stripe Checkout paired with webhooks provides you a dependable technique to convert funds into actual entitlements as a substitute of scattered characteristic flags.
Vercel retains preview and manufacturing deployments aligned, so you might be testing in actual environments from day one.
This stack works effectively for vibe coding as a result of it’s opinionated, predictable, and simple for an AI coding agent to purpose about. As soon as the boundaries are clear, the system nearly builds itself.
# Construct Plan from Zero to a Paid MVP
This construct plan is designed for vibe coding with actual instruments. The aim is to get a production-ready skeleton first, then add functionality in small phases with out breaking earlier choices. Every section maps on to the stack you might be utilizing, so an AI coding agent can observe it finish to finish.
Section 1: MVP Basis
Construct the complete product loop with minimal scope.
- Arrange Subsequent.js (App Router) undertaking with Vercel deployment
- Dashboard shell and navigation utilizing shadcn/ui
- Authentication flows utilizing Supabase Auth (signup, login, reset)
- One core user-owned desk in Supabase Postgres
- CRUD screens powered by Subsequent.js Server Actions
- Preview deployments on each change by way of Vercel
On the finish of this section, you have already got a usable app operating in manufacturing, even when the characteristic set is small.
Section 2: Knowledge Security and Entry Management
Lock down consumer information earlier than including extra options.
- Allow Row Stage Safety on user-owned tables in Supabase
- Outline learn and write insurance policies primarily based on possession
- Use constant patterns like owner_id, created_at, updated_at
- Validate entry guidelines by means of actual UI flows, not simply SQL
This section prevents future rewrites and retains safety aligned with how the app really works.
Section 3: Electronic mail and Storage
Add belief and file dealing with.
- Transactional emails by way of Resend (welcome, verification, resets)
- Non-public storage buckets utilizing Supabase Storage
- Add flows that respect the identical possession guidelines as your database
- Signed URLs or managed entry primarily based on consumer id
That is the place the product begins to really feel full as a substitute of experimental.
Section 4: Billing and Entitlements
Flip utilization into income.
- Create Stripe Checkout classes and redirect customers
- Deal with Stripe webhooks with Subsequent.js Route Handlers
- Retailer subscription or buy state in Supabase
- Gate premium options primarily based on saved entitlements
- Make webhook dealing with idempotent utilizing processed occasion IDs
By the tip of this section, you might have a paid MVP that may scale with out altering core structure.
# Claude Code Starter Immediate
You’ll be able to change “Guide Store + Reader MVP” with your personal concept utilizing the identical Claude Code immediate.
Construct a **Guide Store + Reader MVP** utilizing this stack:
- Subsequent.js App Router
- shadcn/ui
- Supabase (Postgres, Auth, Storage)
- Resend
- Stripe (Checkout + webhooks)
- Vercel
## Aim
Ship a production-ready Guide Store and Reader with paid entry.
## Construct
- Public pages: touchdown, pricing, e book record
- Auth: enroll, check in, reset password
- Protected app: reader dashboard
## Knowledge
- `books`, `chapters`
- Row Stage Safety so customers entry solely their very own information
## Options
- CRUD by way of Server Actions
- Reader view with progress monitoring
- Non-public storage for e book belongings
- Welcome electronic mail
- Stripe Checkout + webhook-based entitlements
## Output
- Clear app construction
- Minimal dependencies
- README with setup, env vars, migrations, Stripe, and Vercel steps
- Handbook verification guidelines per characteristic
All it’s essential do is swap Claude Code to Plan Mode, paste the immediate, and alter the thought or regulate the scope primarily based in your wants.
When you begin, Claude will plan the system first after which start constructing step-by-step with out friction. It’ll additionally information you thru organising required providers, creating accounts on third-party platforms, and producing API keys the place wanted.
This makes it straightforward to go from an concept to a working software with out getting caught on setup or choices.
# Elective Instruments
These instruments should not required to ship the primary model, however they aid you check, monitor, and harden the appliance because it grows in actual utilization.
| Class | Software choices | What it helps with | When so as to add it |
|---|---|---|---|
| Unit exams | Vitest | Quick exams for utilities and server logic | As soon as core CRUD works |
| Part exams | React Testing Library | Catch UI regressions in kinds and states | After the dashboard stabilizes |
| Finish-to-end exams | Playwright | Full consumer flows: signup → create → pay | Earlier than including extra options |
| Error monitoring | Sentry | Stack traces, launch well being, alerting | As quickly as actual customers arrive |
| Logs | Axiom or Logtail | Searchable request logs, webhook debugging | When webhooks and billing go dwell |
| Efficiency checks | Lighthouse (CI) | Catch sluggish pages and outsized bundles | Earlier than advertising and marketing launches |
| Schema and migrations | Drizzle Equipment or SQL migrations | Repeatable schema adjustments | The second you might have 2+ tables |
| Background jobs | Inngest or Set off.dev | Async work: emails, exports, cleanup | When workflows develop past requests |
| Charge limiting | Upstash Redis (or comparable) | Defend auth endpoints and webhooks | When site visitors turns into actual |
| Product analytics | PostHog (or comparable) | Funnels, activation, characteristic utilization | After you recognize what you measure |
# Closing Ideas
Fashionable growth and engineering instruments are evolving quick. Most of them are actually designed with AI integration in thoughts, providing good documentation, APIs, and MCP-style entry so AI brokers can work with them straight and construct software program quicker than ever.
In case you are a knowledge scientist who has by no means touched net growth, or an entire newbie who desires to construct one thing actual or launch a startup, I strongly advocate beginning with this tech stack. It requires minimal setup and allows you to deploy a working software nearly instantly.
It took me almost three months to check and evaluate instruments earlier than deciding on this stack. Beginning right here will prevent that point.
In order for you extra flexibility later, you possibly can break up issues out. For instance, use Neon for the database, Clerk for authentication, and preserve the whole lot else the identical. Spreading duties throughout instruments makes it simpler to exchange one half with out breaking the remainder as your system grows.
Begin easy, ship early, and evolve solely when it’s essential.
Abid Ali Awan (@1abidaliawan) is a licensed information scientist skilled who loves constructing machine studying fashions. Presently, he’s specializing in content material creation and writing technical blogs on machine studying and information science applied sciences. Abid holds a Grasp’s diploma in expertise administration and a bachelor’s diploma in telecommunication engineering. His imaginative and prescient is to construct an AI product utilizing a graph neural community for college kids battling psychological sickness.
