Vibe Coding Tech Stack and Architecture
The vibe coding tech stack, layer by layer (with current versions and prices)
Updated
Your vibe coding tech stack is the set of tools your coding agent builds on, and a few of those choices are hard to undo once Bookly has real clients. This page is Step 7 of 12 in the Vibe Coding guide. You leave with one stack for Bookly, its current versions and prices, and the decisions to lock in before the first commit.
Most advice on this topic says to pick a popular stack. The measured data says something narrower: agent results depend on the model and on whether the agent can read current docs, and the framework brand moves results less. The sections below use those measurements to make each choice.
Bookly, the salon booking app, is the running example. Every choice on this page is an illustration of what Bookly would use. None of it is a benchmark result for Bookly.
Related guides: vibe coding security, deployment and hosting, tools and plan prices, planning and the data model.
The Stack, Layer by Layer
Bookly's Stack, Layer by Layer
Each layer with the pick Bookly uses, and the current version or price for that pick.
| Layer | Bookly's pick | Version or price |
|---|---|---|
| Framework | Next.js 16 (App Router) | 16.4.3 (2026-10-23). 16.x is the Active LTS line. 15.x gets security releases through 2027-01-31. Next.js 14 is unsupported. |
| Styling | Tailwind CSS 4 with shadcn/ui | Tailwind 4.3.3 needs Chrome 111+, Safari 16.4+ or Firefox 128+. shadcn CLI 4.23.0. |
| UI library | React 19 | 19.3.1 (npm, 2026-10-14). React Compiler is stable in Next.js 16 but off by default. |
| Language | TypeScript | 7.0.2 (2026-07-08). Next.js 16 needs Node.js 20.9+ and TypeScript 5.1+. |
| Backend layer | Next.js route handlers and server actions | Runs on the server. The browser never writes to the database. |
| Database | Supabase Postgres | Pro from $25/mo (8 GB, then $0.125 per GB). |
| ORM | Drizzle ORM | 0.45.4 is stable. Drizzle 1.0 is a release candidate. |
| Auth | Supabase Auth | Included in Pro, which covers 100,000 MAU. $0.00325 per MAU beyond that. |
| Payments | Stripe Checkout | 2.9% + 30 cents per successful US domestic card transaction. |
| Resend | Free: 3,000 emails per month, 100 per day. Pro: $20/mo for 50,000 emails. | |
| Hosting | Vercel Pro | Hobby is for personal, non-commercial use, so a booking app that takes deposits needs Pro. Plans and spend caps are on the deployment page. |
| Data fetching | TanStack Query | 5.105.0 (2026-10-26). |
Bookly's backend layer is its Next.js server code: route handlers and server actions. The browser never writes to the database. A booking runs on the server. It checks the slot, writes the booking row, and opens a Stripe Checkout session for the deposit. A webhook from Stripe then marks the deposit as paid. Secret keys stay on the server. Secret handling and webhook checks are on the vibe coding security page.
Three Stacks for Bookly
Each stack runs the same booking app. They differ in who runs the database and sign-in, and in how the bill works.
- Next.js 16 on Vercel Pro
- Supabase Pro for Postgres, auth and storage
- Stripe Checkout for deposits
- Resend Pro for confirmation emails
Base cost: $65/mo in base plans, plus Stripe fees and usage
Trade-off: One database and sign-in product, and one bill for the database and auth. The fewest moving parts for a small team.
- Next.js 16 on Vercel Pro
- Neon Launch for Postgres, billed per compute-hour and GB-month
- Clerk Hobby for sign-in, free up to 50K MRU per app
- Stripe Checkout for deposits, and Resend Free to start
Base cost: $20/mo for Vercel Pro, plus Neon usage. Clerk and Resend Free cost nothing up to their limits.
Trade-off: You pay for compute and storage, not a fixed database plan. Auth is a second vendor, so you manage two bills and two dashboards.
- Next.js 16 on Vercel Pro
- Better Auth 1.7.14, self-hosted, with Postgres for sessions
- Drizzle ORM 0.45.4 on your own Postgres
- Stripe Checkout for deposits, and Resend for email
Base cost: $20/mo for Vercel Pro, plus your own Postgres host (price varies by provider)
Trade-off: No auth vendor, and you own the user table. You also own the auth upgrades and security patches, so budget time for them.
Decisions That Are Hard to Undo
Lock these in early. Each one costs a migration, a user move or a rewrite if you change it later.
| Decision | Why it is hard to undo | When to decide |
|---|---|---|
| Database engine and schema | Every table, query and migration depends on the engine. Moving engines later means a full data migration. | Before the first table. Bookly's clients, staff, services, bookings and payments all depend on it. |
| Auth provider | User IDs, sessions and sign-in flows belong to the provider. Moving later means moving every user. | Before the first real user signs up. |
| Payment processor | Stored payments, refunds and payouts live in that processor. Bookly's deposits depend on its eligibility rules. | Before the first deposit. Managed Payments does not cover Bookly, so the choice is plain Stripe. |
| Framework and caching model | Routing, server code and caching follow the framework. Next.js 16 makes caching opt-in with Cache Components. | Before the first deploy. |
| Context file and pinned versions | The agent writes to the versions it reads. A file that names no version lets it mix generations. | At the first commit. |
| Agent access to the database | An agent can only touch what its tools expose. Scope the Supabase MCP server to one project, in read-only mode. | Before the agent first connects. The security page explains the approval settings. |
Version Traps
Agents trained on older code produce these errors. Each line is a change that breaks an older pattern.
- Next.js 16 renames middleware.ts to proxy.ts, which runs on the Node.js runtime.
- params, searchParams, cookies(), headers() and draftMode() must be awaited.
- Next.js 16 needs Node.js 20.9+ and TypeScript 5.1+. Turbopack is the default bundler, and next lint was removed.
- revalidateTag() needs a second argument, a cacheLife profile.
- Next.js 16.4 (2026-10-06) recommends Cache Components ('use cache'), which is opt-in caching. create-next-app turns it on by default, and it becomes the default in Next.js 17.
- Next.js 16.4 adds next upgrade --agent, which gives an agent version-specific upgrade steps and verification steps.
- Security: on 2026-10-14 Next.js shipped fixes for two critical remote code execution issues and a Server Actions denial of service, in 16.4.1 and 15.5.28. Pin 16.4.1 or later. A scheduled security release is planned for 2026-11-03.
- The workaround for the Image Optimization SVG issue on glibc Linux is sharp 0.35.5 or later.
- From 2026-10-30, new public tables need an explicit grant before the Data API can reach them. The security page covers grants and RLS.
- A plain next-auth install still resolves to v4. Auth.js v5 needs the beta tag, currently 5.0.0-beta.32. On 2026-07-21 the Better Auth maintainers closed four Auth.js advisories (2 High, 1 Medium, 1 Low), fixed in next-auth 4.24.15, next-auth 5.0.0-beta.32 and @auth/core 0.41.3.
- Prisma 8 and Drizzle 1.0 are release candidates. Do not switch to one in the middle of a project.
Database & Backend
GitClear's 2025 report studied 211 million changed lines from 2020 to 2024. Its headline finding is 4x more code cloning: copy-pasted lines rose from 8.3% to 12.3%, and moved (refactored) lines fell from 25% of changes to under 10%. The data shows trends, not proof that an AI wrote each block. Google's 2025 DORA report found that AI adoption correlates positively with delivery throughput and product performance, and still negatively with delivery stability. 30% Google's explanation: "Without robust control systems, like strong automated testing, mature version control practices, and fast feedback loops, an increase in change volume leads to instability." The TDD page and the workflow page cover those controls. AI generates code that works in isolation but creates architectural debt that compounds fast.
Database Options
Pick a backend that matches your read/write profile and scaling needs.
Supabase (PostgreSQL)
PostgreSQL with auth, file storage and realtime in one project. Bookly's pick for the bookings database and sign-in.
SQLite (Local)
Good for a single host. Readers and one writer can run together, but writes still go one at a time, every process must share one machine, and a query can return SQLITE_BUSY, so retry.
# Production tuning (set on every connection)
PRAGMA journal_mode=WAL;
PRAGMA busy_timeout=5000;
PRAGMA synchronous=NORMAL; -- can lose recent commits on power loss
-- use FULL when durability matters more than speed
Neon (Serverless Postgres)
Serverless PostgreSQL. Free compute suspends after 5 minutes idle, and you cannot turn that off. Launch has no monthly fee and bills by usage.
Grants, row level security and the new API keys are covered on the vibe coding security page. From 2026-10-30, a new public table needs an explicit grant before the Data API can reach it.
Firebase / Firestore Trade-offs
Good: Real-time sync, a no-cost Spark plan (Firestore Standard: 1 GiB stored, 50K reads, 20K writes and 20K deletes per day, 10 GiB per month egress), and easy auth integration with 50K MAU free.
Bad: NoSQL document model makes complex queries difficult. Every document read is billed. Data modeling mistakes are expensive to fix because there are no migrations.
Bottom Line: Good for real-time features (chat, notifications). Don't use as your primary database if you need relational queries.
N+1 Query Problem
AI often writes code that fetches a list, then queries the database once for each item in a loop. One list request turns into N+1 queries, and the page slows as the list grows. In Bookly, a day view that loads each booking's client would run one extra query per booking.
// Bad: One query per user
const users = await db.user.findMany();
for (const user of users) {
user.posts = await db.post.findMany({
where: { authorId: user.id }
});
}
// Good: One query total
const users = await db.user.findMany({
include: { posts: true }
});
Missing Database Indexes
PostgreSQL creates an index for each primary key and unique constraint. It does not index the referencing column of a foreign key, and the PostgreSQL docs call indexing it "often a good idea". Foreign key columns, timestamps used for sorting, and columns used in WHERE clauses need manual indexes. Bookly's bookings table needs indexes on client_id and staff_id, because the owner's day view filters on staff and time.
// Add to your prompt after schema design:
"Review all tables. Add indexes on:
- Every foreign key column
- Every column used in WHERE clauses
- created_at if used for sorting"
Connection Pooling (Serverless)
Each serverless function opens its own database connection. A burst of requests can use up the connection limit, and the database then refuses new connections. The limit depends on your compute size, so check it before you set a pool size.
| Connection | Port | Use it for |
|---|---|---|
| Direct connection | 5432 | Persistent servers, migrations and pg_dump. IPv6 by default; IPv4 needs an add-on. |
| Session pooler (shared) | 5432, pooler host | Persistent backends on IPv4-only networks. |
| Transaction pooler (shared) | 6543, pooler host | Serverless and edge functions. No prepared statements and no session state. |
Serverless settings: use transaction mode, keep the pool size at 1 per function instance, turn off prepared statements in your driver, and require SSL. Bookly's API routes run as serverless functions, so they use the transaction pooler.
# Transaction pooler for serverless functions (port 6543)
DATABASE_URL="postgresql://[user]:[password]@[pooler-host]:6543/postgres"
# Add ?pgbouncer=true only for Prisma
# Direct connection (port 5432): migrations and pg_dump only
Safe Database Migrations
Schema changes can take your app down. Follow this safe migration pattern to avoid downtime.
// Step 1: Add column WITH default (no downtime)
ALTER TABLE users ADD COLUMN plan TEXT DEFAULT 'free';
// Step 2: Backfill existing rows
UPDATE users SET plan = 'pro' WHERE stripe_id IS NOT NULL;
// Step 3: Only THEN make it non-nullable
ALTER TABLE users ALTER COLUMN plan SET NOT NULL;
// Rollback if something breaks:
ALTER TABLE users DROP COLUMN plan;
Put each new table's grant and RLS policy in the same migration as the table. The security page shows the pattern.
Instead, add a new column, copy data, update code to use the new column, then drop the old one. Renaming breaks all queries instantly.
YAGNI: You Aren't Gonna Need It
Building Now But Shouldn't
- Multi-tenancy before you have a second customer
- Team features while every user is solo
- Advanced permissions beyond admin and user
- Caching layer before a query is measurably slow
- Kubernetes (when serverless works fine)
Build When You Actually Need It
- Wait until the pain is real
- Solve the specific problem you have
- Not the problem you imagine at 100x scale
- Every premature feature is code you must maintain
- Ship the MVP, iterate from real user feedback
Backup Strategies
You will lose data eventually. The question is whether you can recover it.
Free: no backups. Pro: daily backups kept for 7 days. Team: kept for 14 days. Point-in-time recovery is a $100 per month add-on for each 7 days of retention, on Pro, Team and Enterprise.
Litestream streams SQLite changes to object storage. It was redesigned, as described in the Fly.io post "Litestream: Revamped". Storage cost depends on the bucket you choose.
Schedule pg_dump via cron job to cloud storage. Low-tech but reliable.
A backup you haven't tested restoring isn't a backup. Schedule a monthly "restore drill" where you actually restore from backup to a test environment. Many teams discover their backups are corrupted or incomplete only when they need them. For Bookly, the drill restores last week's bookings into a test project, then checks that each booking and its payment still match.
Frontend Traps
The "100 useEffect" Trap
AI overuses useEffect for derived state. This causes "Boolean Soup" and impossible states.
// Bad: useEffect for derived state
useEffect(() => {
setFullName(first + ' ' + last);
}, [first, last]);
// Good: Calculate during render
const fullName = `${first} ${last}`;
// No state, no effect, no re-render
Replace useEffect + useState data fetching with @tanstack/react-query (5.105.0). It handles loading, error and caching states. In Amplifying's July 2026 study of Claude Code, TanStack Query was the top state-management pick, at 53%. React Compiler is stable in Next.js 16 but off by default; enable it with the reactCompiler: true setting.
Missing UI States
AI only generates the "Happy Path".
Skeleton screens, spinners
Retry buttons, error messages
"No items yet" illustrations
Reconnection banners
AI also misses: concurrent editing conflicts, negative quantities in e-commerce, max character limits, and what happens when 2 users edit the same record simultaneously.
Bundle Size Bloat
AI imports entire libraries when you need one function. import _ from "lodash" pulls in the full build, which is 71,267 bytes minified (25,842 bytes gzipped) at lodash 4.18.1, when you only need debounce.
// Bad: full lodash build
import _ from "lodash";
_.debounce(fn, 300);
// Good: import one module
import debounce from "lodash/debounce";
debounce(fn, 300);
Add "Always use named imports. Never import the full library." to your project rules. Or use lodash-es, which is marked side-effect free, so bundlers can drop the functions you do not use.
Accessibility Failures
WebAIM's 2026 analysis of home pages found detected WCAG 2 failures on 95.9% of them, with 56.1 errors per page on average. Three of the most common failures are easy for AI-generated UI to repeat.
AI generates <img> tags without meaningful alt attributes. Screen readers can't describe images.
Check the contrast ratio of every text and background pair the agent picks. It is the most common detected failure.
Inputs with a placeholder but no label fail screen reader users. Give each booking field a visible label.
WebAIM's test is automated. It cannot measure keyboard use or color-only cues, so check those by hand: tab through each booking step, and make sure errors use text as well as color. Home pages that use ARIA averaged 59.1 errors, against 42 for pages without it. The legal page covers accessibility law.
Scaling & Monoliths
Don't use Microservices. Don't use Kubernetes. Keep everything in one Next.js app until real scale forces the issue. Microservices add network latency, distributed bugs, and complexity that an early product does not need. Bookly is one Next.js app with one database.
What Breaks First
There is no measured user-count threshold to plan around. Watch for these three failures instead.
Choose Boring Technology
Dan McKinley (Etsy), in his 2015 essay: "Let's say every company gets about three innovation tokens."
Standard tools have more docs, examples and public issues for an agent to learn from. Even a popular framework trips an agent when its APIs changed after training. In Vercel's test, Next.js 16 APIs missing from training data scored 53% with no docs.
Boring (Good)
- PostgreSQL, SQLite
- Next.js 16, Express 5
- Tailwind CSS 4, shadcn/ui
- Stripe, Resend
Shiny (Risky)
- GraphQL (when REST suffices)
- Edge-first architectures
- Hand-rolled auth (the most common single pick in July 2026)
- ORM release candidates (Drizzle 1.0, Prisma 8)
Project Organization
AI-Friendly Project Structure
A predictable folder layout helps the agent find code and follow the same pattern in every feature.
// Next.js 16 App Router (recommended)
AGENTS.md # Repo root: read by the agent before it writes code
src/
app/
(auth)/ # Sign-in and account pages
(marketing)/ # Public pages
api/ # API routes
layout.tsx # Root layout
proxy.ts # Runs on Node.js (replaces middleware.ts)
components/
ui/ # shadcn/ui components
forms/ # Form components
layout/ # Layout components
lib/
db.ts # Database client
auth.ts # Auth helpers
stripe.ts # Payment helpers
utils.ts # Shared utilities
types/ # TypeScript types
tests/ # Test files
context/ # Project docs for AI
Name the stack, the exact versions and the libraries in your context file. Newer models write more custom code themselves: the share of custom code in Amplifying's picks rose from 11% to 21.4% between the February and July 2026 studies. A library you do not name may be replaced by hand-written code. The workflow page covers context files in full.
README That Saves You Hours
A solid README helps AI tools understand your project instantly, and helps developers (including future you) get started fast.
# Project Name
## Quick Start
git clone ... && npm install && cp .env.example .env.local
npm run dev
## Environment Variables
DATABASE_URL= # Supabase connection string
STRIPE_SECRET_KEY= # From Stripe dashboard
RESEND_API_KEY= # From Resend dashboard
## Tech Stack
Next.js 16 | Supabase | Stripe | Resend | Tailwind CSS 4
## Testing
npm test # Run unit tests
npm run test:e2e # Run Playwright tests
AI Code Quality Anti-Patterns
These six patterns are a practitioner checklist, not a measured survey. Each card says how to spot the problem.
Business logic sits in React components instead of one service layer.
How to spot it: Database calls inside components.
One file that mixes business logic, API calls, state and UI rendering.
How to spot it: A file that one reviewer cannot read in one sitting.
Happy path only: no error state, no retry, no message the user can act on.
How to spot it: A data fetch with no loading state and no error state.
The same problem solved three different ways across the codebase.
How to spot it: Two or more data-fetching methods in one project.
No README, no notes on business rules, no type definitions.
How to spot it: No README with setup steps and the exact stack versions.
The same calculation rewritten in several files.
How to spot it: Copied blocks of 5 or more lines. GitClear tracks this trend.
Open Source Apps to Study
Read how production apps are structured. Check each license before you copy any code. The legal page covers copyright for AI-written code.
The MIT-licensed community edition of Cal.com. Cal.com moved its production code to a private repository in April 2026. Press reports say Cal.diy leaves out Teams, Workflows, Insights, SSO and API v1.
Project management app. Active TypeScript repository. AGPL-3.0 license.
Survey platform. Active TypeScript repository. Custom license, shown on GitHub as Other.
Open-source CRM. Active TypeScript repository. Custom license, shown on GitHub as Other.
Edge Cases Checklist
Ask these 7 questions for every feature you build. AI misses most of these unless you explicitly prompt for them.
Recommended Stacks
Which Stacks Coding Agents Handle Best
Measured results, not popularity. Each figure comes from the source named beside it.
97%
Last run 2026-10-16. Claude Code with Claude Opus 5.5 and with Claude Fable 5.1 are among the top entries. Grok 4.7 on OpenCode scored 94%. Kimi K2.7 Code scored 74%, and 90% with AGENTS.md. Older models scored far lower: Kimi K2.5 scored 16%, and 45% with AGENTS.md. The leaderboard covers Next.js only.
100%
The same test scored 53% with no docs, 53% with a skill the agent used by default, and 79% with a skill plus explicit instructions. The agent never invoked the skill in 56% of cases. The post does not name the agent or model.
58.4%
February 2026: Vercel took 100% of JavaScript frontend picks, custom or DIY auth 48%, and AWS, GCP, Azure and Heroku had zero primary picks. July 2026 (810 responses, Fable 5): PostgreSQL 53%, Tailwind 63%, shadcn/ui 52%, Vitest 59%, Stripe 100% of payment picks, FastAPI 100% of Python API picks, Better Auth 36% of Next.js auth picks, and hand-rolled auth the most common single answer. The authors call these preference signals, not market share.
The best tech stack for vibe coding is the one your agent can read current docs for, so pick a stack with current docs and make the agent read them. Always-present context beat on-demand lookup in Vercel's test. For Bookly, that means Next.js 16 with an AGENTS.md, and a context file that names each library with its version.
Tech Stacks by Use Case
Base plan prices for common project types. Tool plan prices are on the tools page, and host prices are on the deployment page.
| Use Case | Stack | Monthly Cost |
|---|---|---|
| Prototype and learning | Next.js 16 + Supabase Free + Vercel Hobby (personal, non-commercial use only) | $0/mo |
| Production SaaS | Next.js 16 + Supabase Pro + Vercel Pro + Stripe + Resend | From $65/mo in base plans, plus Stripe fees and usage |
| Mobile App | React Native (Expo) + Supabase Pro + EAS Build | About $44/mo floor (Supabase Pro + EAS Starter), before store fees |
| Quick Prototype | AI app builder (Lovable, Bolt) + Supabase Free | Plan prices are on the tools page |
| Chrome Extension | WXT + Chrome APIs + Supabase Free | $0/mo, plus a one-time Chrome Web Store fee |
| Landing Page | Astro 7 or Next.js 16 + Vercel Pro | $20/mo for Vercel Pro (Hobby is non-commercial) |
| E-Commerce | Shopify (Hydrogen or Liquid) | Basic: $39/mo on monthly billing, $29/mo on yearly billing |
Lovable apps started on or after 2026-05-13 use TanStack Start, which renders pages on the server. Older apps use React and Vite. Lovable offers no choice of framework or database, so check which framework your project got before you write the context file.
The $65 per month covers Supabase Pro ($25), Vercel Pro ($20 per developer seat, with a $20 usage credit) and Resend Pro ($20). It leaves out Stripe fees, usage above the credit, extra seats, a domain, and point-in-time recovery, which is a $100 per month add-on.
Database Hosting Comparison
Free tiers and the lowest paid plan for each provider.
| Provider | Free Tier | Paid Starting | Best For | Key Feature |
|---|---|---|---|---|
| Supabase | 500 MB, 50K MAU; pauses after 1 week idle | Pro from $25/mo (8 GB, then $0.125 per GB) | Bookly and most vibe-coded apps | Auth, storage and realtime with Postgres |
| Neon | 1 GB, 100 compute-hours per project | Launch: $0.106 per compute-hour, $0.35 per GB-month | Postgres only, with usage billing | Scale to zero (Free suspends after 5 minutes idle) |
| Turso | 5 GB, 500M rows read and 10M written per month | Developer $4.99/mo; Scaler $24.92/mo | Read-heavy data at the edge | SQLite as a hosted service |
| MongoDB Atlas | 512 MB (M0) | Flex: $0.011/hour, capped at $30/mo | Document data | Flexible schema |
| PlanetScale | No free plan (Hobby retired 2024-04-08) | PS-5 Postgres $5/mo (one node); $15/mo with 3-node HA | MySQL or Postgres apps | Prices for AWS us-east-1 |
For Bookly, start with Supabase Pro. Its Micro compute for one project is covered by a $10 monthly credit, and each extra project is billed in full. Move to Neon if you want Postgres only, with usage billing. Neon's pricing page now reads "from Databricks". Use Turso for read-heavy data at the edge, and read the SQLite limits first.
Payment Processors: When to Choose Each
This is an architectural decision guide, not a full feature comparison. Focus: which processor fits your situation.
| Processor | Fee | Handles Tax? | Best For |
|---|---|---|---|
| Stripe Checkout | 2.9% + 30 cents (US domestic card) | Optional: Stripe Tax, 0.5% per transaction | Bookly: in-person services and deposits |
| Stripe Managed Payments | 6.4% + 30 cents (2.9% + 30 cents, plus 3.5%) | Yes (merchant of record) | Automated digital products only |
| Lemon Squeezy | 5% + 50 cents | Yes (MoR) | Digital products; building on Stripe Managed Payments |
| Paddle | 5% + 50 cents | Yes (MoR) | B2B SaaS, enterprise |
| Polar | Starter: 5% + 50 cents. Pro: $20/mo + 3.8% + 40 cents | Yes (MoR) | Open source, developers |
A merchant of record (MoR) handles sales tax and VAT for you, at a higher fee. On $50,000 of monthly sales, Lemon Squeezy or Paddle at 5% + 50 cents costs $2,500 in fees, while Stripe at 2.9% costs $1,450 before its 30 cents per transaction, a $1,050 gap. Leaving an MoR means you own the tax: Stripe Tax Basic adds 0.5% ($250 on $50,000), or Tax Complete from $90 per month on a 1-year contract, plus registrations. Stripe's own MoR, Managed Payments, costs 6.4% + 30 cents, which is more than Lemon Squeezy or Paddle on larger tickets. On a $20 sale, Stripe alone costs $0.88, Lemon Squeezy or Paddle $1.50, and Managed Payments $1.58. Managed Payments also needs a seller in a supported location, and the US is one. Stripe publishes agent skills: install the CLI with npm install -g @stripe/cli, then run stripe agent setup, so your agent works from current Stripe APIs.
Lemon Squeezy was acquired by Stripe in July 2024. Lemon Squeezy's own 2026-01-28 update admits "slower support responses and less frequent product updates" and says the team is building on Stripe Managed Payments. No shutdown date was announced in that post. Have a migration plan ready before you commit.
Authentication Options at a Glance
Quick decision guide. Security details for each provider are on the vibe coding security page.
| Provider | Free Tier | Paid | Best For |
|---|---|---|---|
| Supabase Auth | 50K MAU | Included in Pro ($25/mo, 100K MAU); $0.00325 per extra MAU | Bookly: already on Supabase |
| Clerk | Hobby: 50K MRU per app | Pro: $25/mo ($20/mo billed yearly); $0.02 per MRU from 50,001 to 100,000 | Pre-built sign-in and profile components |
| Better Auth | Open source, self-hosted | Free (you run it, with a database for sessions) | Open-source pick for new projects |
| Auth.js (NextAuth) | Open source | Free; security fixes only | Existing projects already on it |
| Firebase Auth | 50K MAU (SAML and OIDC: 50 MAU) | Above the free tier, billed at Google Cloud pricing | Google ecosystem |
Pick the auth provider that matches your database. Bookly uses Supabase Auth because it already runs the database. Clerk ships pre-built sign-in, sign-up and profile components, so you do not build auth UI by hand. Its SMS codes cost $0.01 each in the US and Canada, and each extra SSO connection costs $75 per month. Auth.js moved to the Better Auth team on 2025-09-22 and gets security fixes only, so use Better Auth for a new self-hosted project.
Detailed Stack Recommendations by App Type
Chrome Extension
Chrome extension development with WXT, the framework that still ships releases. Plasmo has not published an npm release since May 2025.
# Recommended Stack
Framework: WXT
Styling: Tailwind CSS
Backend: Supabase or Firebase (if needed)
Auth: Chrome Identity API + Firebase (if needed)
Storage: Chrome Storage API + sync
Build: WXT build
Deploy: Chrome Web Store
Cost: One-time Chrome Web Store registration fee, plus backend costs
WXT is the active option in this list. Plasmo's last npm release is 0.90.5, dated 2025-05-17. WXT's own comparison page says Plasmo "appears to be in maintenance mode with little to no maintainers". That is a rival's view, so read the release history before you pick a framework. The one-time registration fee is on Google's registration page. Put the framework and its version in your context file.
Internal Tool / Admin Dashboard
Two paths depending on whether you need code-level control or just need something working today.
No-Code Approach
# No-Code Stack
Platform: Retool
Cost: Free for up to 5 users; Team $10/mo billed yearly or $12/mo billed monthly
When to use: Non-developer admins who need to connect to existing databases, run queries, and manage records without writing code. Retool connects directly to Postgres, MySQL, MongoDB, and REST APIs.
Code Approach
# Code Stack
Framework: Refine (@refinedev/core 5.0.12)
OR Next.js + shadcn/ui
Database: Supabase Pro
with a read-only role
Auth: SSO if enterprise, otherwise Clerk
Hosting: Vercel
Cost: Vercel Pro from $20/mo per seat, plus your database and auth plans
AI Tool: a coding agent, starting from
Refine's CRUD components
When to use: You need custom business logic, complex workflows, or full design control. Refine gives you pre-built CRUD operations, data tables, and form components that AI tools can scaffold quickly.
Give the admin tool a read-only database role, never your main database credentials. Send any write through an endpoint that checks authorization. The security page covers the details.
API / Backend Service (No Frontend)
When you only need an API layer, skip the frontend framework entirely and build a lightweight backend service.
# Recommended Stack
Language: Python (FastAPI 0.162.0) or TypeScript (Express 5.3.0 or Hono 4.13.14)
Database: Supabase or Neon Postgres
API Docs: Auto-generated (FastAPI) or Swagger
Hosting: See the deployment page
Auth: API keys or JWT
Monitoring: Sentry
Testing: Pytest or Vitest
Cost: see the deployment page for host prices
Pin: the framework version in your context file
AI Coding Tool: Cursor or Claude Code
In Amplifying's July 2026 study, FastAPI was 100% of the Python API picks. FastAPI auto-generates interactive API documentation and uses Pydantic models for request and response types. If you prefer TypeScript, Hono is a small framework that runs on Cloudflare Workers, AWS Lambda and Node.js. Express 5.3.0 is now the default install on npm. Host choice and host prices are on the deployment page.
FastAPI Strengths
- Auto-generated OpenAPI docs at
/docs - Type-safe request/response with Pydantic
- Native async/await for high concurrency
- Measured: 100% of Python API picks in July 2026
Hono/Express Strengths
- Same language as your frontend (TypeScript)
- Share types between frontend and backend
- Hono: small, runs on edge runtimes
- Express 5.3.0: the default install on npm
E-Commerce
The one app type where "build it yourself" is almost always the wrong answer.
Payment processing, inventory management, shipping calculations, tax compliance, and fraud prevention are too complex for AI-generated code. Each of these domains has years of edge cases baked into battle-tested platforms. Use those platforms instead of reinventing them.
Use Hydrogen (@shopify/hydrogen 2026.10.2) if you need custom UI, or Liquid templates if you want simplicity. Shopify handles payments, inventory, shipping, taxes, and fraud out of the box.
Open-source Shopify alternative (Medusa 2.22.1). Headless and fully customizable. Its docs now recommend Medusa Cloud for deployment, so budget time if you self-host.
Drop a shopping cart onto any existing website. No backend required. Snipcart handles checkout, payments, and order management. Perfect for adding e-commerce to a content site.
# Custom E-Commerce Stack (not recommended)
Framework: Next.js 16 (App Router)
Payments: Stripe (with proper security audit)
CMS: Sanity CMS (product catalog)
Shipping: ShipStation API
Taxes: Stripe Tax (Tax Basic: 0.5% per transaction)
Cost: each vendor plan, plus Stripe fees (this page does not total them)
Security: a security audit before launch
If you go the custom route, hire a developer who specializes in payment integrations. One bug in checkout flow, tax calculation, or refund handling can cost more than the hire. The security page covers webhook checks and key handling.
Bookly now has a stack, a backend layer and a short list of choices to lock in. The next page, vibe coding deployment, ships it: the host, the environments, monitoring, a spend cap, and the incidents to plan for.
Common Questions
Which tech stack works best for vibe coding?
Pick one that agents know well and that has its docs where the agent can read them. Next.js has the clearest measured evidence: on nextjs.org/evals, top agent and model pairs pass 97% of Next.js tasks, and Vercel found that an AGENTS.md docs index raised success on new Next.js 16 APIs from 53% to 100%. Pair it with Postgres, hosted auth and Stripe.
Vite vs Next.js: which should I use for an app built with AI?
Use Next.js when the app needs server code, such as Bookly's payments, webhooks and protected data. A Vite React app runs in the browser, so it needs a separate backend for those jobs. Lovable now starts new apps on TanStack Start instead of React and Vite, so a builder export is not always a Vite app.
Astro vs Next.js for a site built with AI?
Astro fits content sites such as a landing page or blog; Next.js fits apps with logins, payments and dashboards. In WebAIM's 2026 scan, Astro pages averaged 9.0 detected accessibility errors against a 56.1 average across home pages, so Astro is a strong default for a marketing site next to the app.
TanStack Start vs Next.js: does it matter for AI coding?
It matters if you export from Lovable: apps started on or after May 13, 2026 use TanStack Start, which renders pages on the server, and Lovable offers no choice of framework. Next.js has the larger body of measured agent evidence, through nextjs.org/evals. If you start from scratch with a coding agent, Next.js is the safer default.
Prisma vs Drizzle: which works better with coding agents?
The agent's default moves with the model. In Amplifying's February 2026 Claude Code study, Drizzle was 100% of Opus 4.6's ORM picks, while Sonnet 4.5 picked Prisma 79% of the time. Drizzle fell to 45% in the July 2026 study on Fable 5. Prisma ORM 7 and Drizzle 0.45 are stable, while Prisma 8 and Drizzle 1.0 are release candidates. Name one ORM and its version in your context file, and do not switch to a release candidate mid-project.
Supabase vs Neon for a small app built with AI?
Supabase Free pauses a project after 1 week of inactivity and has no backups. Pro starts at $25 per month and keeps daily backups for 7 days. Neon Free gives 1 GB and 100 compute-hours per project, and its compute suspends after 5 minutes idle. Neon Launch has no monthly fee and bills $0.106 per compute-hour and $0.35 per GB-month. Pick Supabase for auth and storage in one product. Pick Neon when you need only Postgres and usage billing.