export default tech-stack-decision-maker

name	tech-stack-decision-maker
description	Get confident tech stack recommendations for any software project based on requirements, with justification for each choice, Claude Code prompts to build with that stack, deployment strategy, and cost breakdown.

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

1. Go to vercel.com and sign up
2. Click "Import Project"
3. Connect your GitHub repository
4. 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:

1. ✅ Simple - Fewer moving parts = fewer bugs
2. ✅ Well-documented - Claude Code can help effectively
3. ✅ Managed services - Less maintenance = more time building
4. ✅ Cost-effective - Under $100/month for most B2B projects
5. ✅ 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.