Tech Stack Decision Maker

Stop guessing. Get confident tech recommendations backed by reasoning.

What This Skill Does

You describe the project requirements, and this skill recommends:

✅ Exact Tech Stack - Specific technologies for frontend, backend, database, hosting ✅ Why Each Choice - Clear reasoning tied to project needs ✅ Claude Code Prompts - Ready-to-use prompts for building with this stack ✅ Deployment Strategy - Where and how to host ✅ Cost Breakdown - What it will cost the client monthly/annually ✅ Alternatives - When to consider different options

Who This Is For

Software Tailors who:

• Feel overwhelmed by technology choices

• Want to make confident recommendations to clients

• Need to justify tech decisions professionally

• Want to use modern, AI-friendly tech stacks

• Avoid picking the wrong stack and having to rebuild

How To Use This Skill

Input Format

Example Input:

Project: Fire inspection management system

Requirements:

• Web app for office staff (desktop primarily)
• Mobile-friendly interface for field inspectors
• User authentication with different roles (admin, inspector)
• Database for buildings, inspections, users
• File uploads (photos from inspections)
• PDF report generation
• Email notifications
• Real-time dashboard

Expected Users: 10-15 concurrent users max Data Volume: ~200 inspections/month, growing slowly Budget: Mid-range (client can afford hosting, but not enterprise costs) Timeline: Need to launch in 4-6 weeks

Output Format

Tech Stack Recommendation: Fire Inspection Management System

Recommended Stack (Modern & AI-Friendly)

Frontend: Next.js 14 (React framework) Backend: Next.js API Routes Database: PostgreSQL (via Supabase) Auth: Supabase Auth File Storage: Supabase Storage Hosting: Vercel Styling: Tailwind CSS

Why This Stack?

✅ Next.js 14 (Frontend + Backend)

Reasons:

• All-in-one: Frontend and backend in one codebase (simpler for Claude Code to build)

• Fast development: React components + built-in routing = quick builds

• Mobile-friendly: Responsive by default

• SEO-ready: Server-side rendering if needed

• Claude Code loves it: Widely documented, Claude handles it perfectly

Perfect for: Projects that need both a web interface and API logic

Alternative: Separate React + Express if you need API used by multiple frontends

✅ PostgreSQL (via Supabase)

Reasons:

• Relational data: Your project has clear relationships (buildings → inspections → users)

• Robust: Handles complex queries, transactions, data integrity

• Supabase = managed: No database administration headaches

• Built-in features: Real-time subscriptions, row-level security, auto-generated REST API

• Affordable: Free tier for small projects, $25/month for production

Perfect for: Projects with structured data and relationships

Alternative: MongoDB if data structure is super flexible/undefined

✅ Supabase (Auth + Storage + Database)

Reasons:

• Complete backend: Auth, database, storage all in one

• Fast setup: No backend server to configure

• Secure by default: Row-level security policies protect data

• File storage included: Photo uploads handled easily

• Great docs: Claude Code knows how to integrate it

Perfect for: Projects that don't need complex custom backend logic

Alternative: Firebase (similar features, Google ecosystem) or custom backend if complex logic

✅ Vercel (Hosting)

Reasons:

• Made for Next.js: Seamless deployment (literally one click)

• Automatic deployments: Push to GitHub = instant deploy

• Edge network: Fast globally (CDN built-in)

• Free tier: Generous (perfect for small projects)

• Easy custom domains: Client's domain setup is trivial

Perfect for: Next.js projects (it's made by the same company)

Alternative: Railway or Render if using non-Next.js stack

✅ Tailwind CSS (Styling)

Reasons:

• Fast styling: Utility classes = rapid UI development

• Responsive built-in: Mobile-friendly by default

• Consistent design: Design system in your HTML

• Claude Code's preference: Most AI code generation uses Tailwind

Perfect for: Fast prototyping and modern UI design

Alternative: Plain CSS or styled-components if you prefer

Complete Tech Stack Breakdown

Layer Technology Monthly Cost Why This Choice

Frontend Next.js 14 Free (included in hosting) All-in-one React framework, fast development

Backend Next.js API Routes Free (included in hosting) Backend logic in same codebase as frontend

Database PostgreSQL (Supabase) $25 Relational data, managed service

Authentication Supabase Auth Included Secure user login, role-based access

File Storage Supabase Storage Included Photo uploads for inspections

Hosting Vercel $20 (Pro plan) Seamless Next.js deployment

Domain Custom domain $12/year (~$1/month) Client's branded URL

Email Resend or SendGrid $0-10 Transactional emails (notifications)

Total

~$46-56/month Mid-range, scalable

Annual Cost: ~$552-672/year

Claude Code Prompts for This Stack

1. Project Initialization

Create a Next.js 14 project with TypeScript, Tailwind CSS, and ESLint. Use the App Router (not Pages Router). Set up folder structure: /app, /components, /lib, /types, /public.

2. Supabase Setup

Install Supabase client library. Create a Supabase project and get the project URL and anon key. Set up environment variables for NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Create a Supabase client utility function in /lib/supabase.ts.

3. Database Schema

In Supabase, create the following PostgreSQL tables:

• users (id, email, role, created_at)
• buildings (id, name, address, client_name, inspection_frequency, created_at)
• inspections (id, building_id, inspector_id, scheduled_date, status, notes, created_at)

Set up foreign key relationships:

• inspections.building_id → buildings.id
• inspections.inspector_id → users.id

Create row-level security (RLS) policies so users can only see their own data.

4. Authentication

Implement Supabase authentication with email/password. Create a login page at /login and signup page at /signup. Add middleware to protect routes (redirect to /login if not authenticated). Store user session in cookies for persistence.

5. Dashboard Page

Create a dashboard page at /dashboard. Show today's inspections, upcoming inspections, and overdue inspections. Use Supabase to fetch data with real-time subscriptions. Style with Tailwind CSS - use cards and a clean layout.

6. Buildings Management

Create a page at /buildings that shows a list of all buildings. Add search and filter functionality. Create a form to add/edit buildings with fields: name, address, client_name, inspection_frequency. Implement CRUD operations using Supabase.

7. Inspection Scheduling

Create an inspection scheduling page at /inspections/new. Form fields: building (dropdown), inspector (dropdown), scheduled_date (date picker). On submit, create a new inspection record in Supabase. Show success notification and redirect to dashboard.

8. File Uploads

Add photo upload functionality to inspection forms. Use Supabase Storage to handle file uploads. Create a storage bucket called "inspection-photos". Allow inspectors to upload multiple photos per inspection. Display uploaded photos in a grid with lightbox functionality.

9. PDF Report Generation

Install @react-pdf/renderer library. Create a PDF template for inspection reports that includes:

• Company logo and branding
• Building and client information
• Inspection details and results
• Photos (if any) Generate PDF on demand when user clicks "Download Report" button.

10. Email Notifications

Install Resend library for sending emails. Create API route at /api/send-email. Send email when:

• Inspection is scheduled (notify inspector)
• Inspection is completed (notify client) Use email templates with dynamic data (building name, date, etc).

Deployment Steps

Step 1: Push to GitHub

git init git add . git commit -m "Initial commit" git remote add origin [your-github-repo-url] git push -u origin main

Step 2: Connect Vercel

• Go to vercel.com and sign up

• Click "Import Project"

• Connect your GitHub repository

• Vercel auto-detects Next.js and configures build settings

Step 3: Add Environment Variables in Vercel

• NEXT_PUBLIC_SUPABASE_URL = [your Supabase project URL]

• NEXT_PUBLIC_SUPABASE_ANON_KEY = [your Supabase anon key]

• RESEND_API_KEY = [your Resend API key]

Step 4: Deploy

• Vercel automatically deploys on every push to main branch

• Production URL: your-project.vercel.app

Step 5: Custom Domain

• In Vercel dashboard, go to Settings → Domains

• Add client's custom domain (e.g., inspections.clientcompany.com )

• Follow DNS configuration instructions

Total Deployment Time: 10-15 minutes

When to Use Alternatives

Use MongoDB instead of PostgreSQL if:

• ❌ Data structure is highly variable/unpredictable

• ❌ Need extreme flexibility in schema

• ❌ Storing lots of nested JSON objects

Example: Social media app with diverse user-generated content

Use Firebase instead of Supabase if:

• ❌ Client is heavily invested in Google ecosystem

• ❌ Need Google Cloud integrations

• ❌ Want Firestore's offline-first mobile SDKs

Example: Mobile app that needs offline functionality

Use React + Express instead of Next.js if:

• ❌ Backend logic is very complex (heavy business rules)

• ❌ Need separate API consumed by mobile apps + web

• ❌ Team already knows Express well

Example: Complex ERP system with intricate business logic

Use Render/Railway instead of Vercel if:

• ❌ Using backend other than Next.js (like Django, Rails)

• ❌ Need more control over server configuration

• ❌ Want to host database and app on same platform

Example: Python/Django project

Stack Complexity Levels

🟢 Beginner-Friendly (Recommended for new software tailors)

Stack: Next.js + Supabase + Vercel + Tailwind Why: Minimal configuration, great docs, Claude Code handles it perfectly Best for: 80% of B2B software projects

🟡 Intermediate

Stack: React + Node.js/Express + PostgreSQL + AWS/Railway Why: More control, separate frontend/backend Best for: Projects with complex backend logic or existing infrastructure

🔴 Advanced (Avoid unless necessary)

Stack: Custom microservices + GraphQL + Kubernetes + AWS Why: Overkill for most projects, high maintenance Best for: Enterprise systems with huge scale requirements

For software tailors: Stick to 🟢 Beginner-Friendly unless client has specific needs

Tech Stack Red Flags

Avoid these unless you have good reason:

❌ PHP/WordPress - Outdated, hard to maintain, Claude Code struggles with it ❌ Ruby on Rails - Less common, fewer Claude Code examples ❌ Angular - More complex than React, steeper learning curve ❌ MySQL - PostgreSQL is better for modern projects ❌ Shared hosting - Slow, unreliable, use cloud platforms instead ❌ Self-hosted everything - Maintenance nightmare, use managed services

Quick Stack Recommendations

Simple CRUD App (basic data management):

• Next.js + Supabase + Vercel

• Cost: $25-50/month

• Build time: 2-3 weeks

Mobile-First Field Service:

• Next.js (responsive) + Supabase + Vercel

• Consider PWA (progressive web app) before native mobile

• Cost: $25-50/month

• Build time: 3-4 weeks

Complex Project Management:

• Next.js + Supabase + Vercel + Advanced features (Stripe, Twilio, SendGrid)

• Cost: $50-100/month

• Build time: 6-8 weeks

E-Commerce / Customer Portal:

• Next.js + Supabase + Stripe + Vercel

• Cost: $50-100/month (+ Stripe fees)

• Build time: 4-6 weeks

Remember

The best tech stack is:

• ✅ Simple - Fewer moving parts = fewer bugs

• ✅ Well-documented - Claude Code can help effectively

• ✅ Managed services - Less maintenance = more time building

• ✅ Cost-effective - Under $100/month for most B2B projects

• ✅ Proven - Use battle-tested tech, not bleeding edge

Default recommendation for 80% of projects: Next.js + Supabase + Vercel + Tailwind

This stack is modern, AI-friendly, affordable, and scalable.

Stop overthinking tech choices. Use this stack, build fast, get paid.