| 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
- 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.
