STARFORGE — App Architecture

⚛ FRONTEND ⚙ BACKEND 🗄 DATABASE 🔑 AUTH 💳 PAYMENTS 🛡 SECURITY 🚀 INFRA

// SELECT UNIVERSE

PRESS T TO CYCLE THEMES

INTERGALACTIC BUILD PROTOCOL — MISSION BRIEFING

STARFORGE APP ARCHITECTURE

Build your app like engineering an intergalactic spaceship. Every system must be battle-ready. One failure and the mission is scrubbed.

⚛ HULL / FRONTEND ⚙ ENGINE / BACKEND 🗄 CORE / DATABASE 🔑 ACCESS / AUTH 💳 FUEL / PAYMENTS 🛡 SHIELD / SECURITY 🚀 LAUNCH / INFRA

// MISSION BLUEPRINT

SHIP ASSEMBLY DIAGRAM

// DATA FLIGHT PATH

REQUEST TRAJECTORY

// ONE TAP — ALL SEVEN SYSTEMS FIRE IN SEQUENCE

🖥

HULL
Browser

🛡

SHIELD
Firewall

🔑

ACCESS
Auth

⚙️

ENGINE
API

🗄

CORE
Database

💳

FUEL
Stripe

☁️

LAUNCH
Cloud

// SHIP SYSTEMS

BUILD YOUR MODULES

HULL SYSTEM

Frontend

The hull — everything the crew sees and touches. Runs in the browser, sends signals to the engine, renders mission control.

SHIP PART: HULL PLATING

REACT + TS

// Mission control component
import { useState, useEffect } from 'react'

export default function Dashboard() {
  const [data, setData] = useState([])
  useEffect(() => {
    fetch('/api/missions')
      .then(r => r.json()).then(setData)
  }, [])
  return 
}

⚛️

React

UI COMPONENTS

Component-based UI. Reusable, composable. Powers Instagram, Airbnb, Netflix.

POPULAR

▲

Next.js

FULL-STACK FRAMEWORK

SSR, routing, API routes, edge. The go-to for production React.

✦ RECOMMENDED

🟦

TypeScript

TYPED JS

Catch bugs before they ship. Essential for teams.

🎨

Tailwind CSS

UTILITY-FIRST STYLING

Compose UI in markup. No context-switching to CSS files.

⚡

Vite

BUILD TOOL

Instant HMR. Replaces Create React App.

ENGINE CORE

Backend

The ship's engine — where power is generated. Handles business logic, connects to the data core, processes all crew requests.

SHIP PART: ENGINE BLOCK

NODE.JS

// API endpoint
app.post('/api/launch', async (req, res) => {
  const { missionId } = req.body
  if (!missionId) return res
    .status(400).json({ error: 'ID required' })
  const m = await db.findById(missionId)
  res.json({ status: 'LAUNCHED', m })
})

🟩

Node.js + Express

JS RUNTIME

JS on the server. Huge ecosystem. Best start for JS devs.

START HERE

🐍

Python + FastAPI

PYTHON API

Auto OpenAPI docs. Async. Perfect for ML/AI backends.

🌐

REST API

STANDARD PROTOCOL

GET, POST, PUT, DELETE. The universal language of the web.

🔷

GraphQL

QUERY LANGUAGE

Request exactly what you need. No over/under-fetching.

📨

Message Queues

ASYNC JOBS

Redis/Bull/SQS. Background processing without blocking.

DATA CORE

Database

The ship's memory banks — every byte of mission data stored and retrieved at warp speed. SQL for structure, NoSQL for flexibility.

SHIP PART: CENTRAL COMPUTER

PRISMA

model Mission {
  id     Int    @id @default(autoincrement())
  name   String
  status String @default("STAGED")
  crew   User[]
}
const m = await prisma.mission
  .findMany({ include: { crew: true } })

🐘

PostgreSQL

RELATIONAL DB

Gold-standard open source RDBMS. ACID, JSON, full-text search.

✦ RECOMMENDED

🔷

Prisma ORM

TYPE-SAFE CLIENT

Auto-generated TypeScript client + migrations.

🔴

Redis

IN-MEMORY CACHE

Sub-ms reads. Sessions, caching, pub/sub.

☁️

Supabase

BACKEND-AS-A-SERVICE

Postgres + Auth + Realtime + Storage. Open-source Firebase.

🍃

MongoDB

DOCUMENT DB

Flexible JSON documents. Scales horizontally.

ACCESS CONTROL

Authentication

The airlock — controls who boards and what each crew member can access. Never build raw auth from scratch. Use battle-tested systems.

SHIP PART: AIRLOCK SYSTEM

🔑

JWT Tokens

STATELESS AUTH

Header.Payload.Signature. Verify identity without a DB call every request.

STANDARD

🏢

Clerk

AUTH-AS-A-SERVICE

Drop-in auth. Login, signup, OAuth, MFA — fully managed.

✦ RECOMMENDED

🔒

OAuth 2.0

SOCIAL LOGIN

"Login with Google/GitHub/Apple." Industry standard protocol.

🛡️

NextAuth.js

AUTH FOR NEXT.JS

Open-source. 40+ OAuth providers. DB adapters for every setup.

FUEL CELL

Payments

The fuel system — monetize the mission. Never touch raw card data. Stripe handles PCI compliance so you can focus on orbit.

SHIP PART: FUEL INJECTION

STRIPE

// Webhook handler
app.post('/webhook', (req, res) => {
  const event = stripe.webhooks
    .constructEvent(
      req.body,
      req.headers['stripe-signature'],
      process.env.STRIPE_SECRET
    )
  if (event.type === 'checkout.session.completed')
    fulfillOrder(event.data.object)
})

💳

Stripe

PAYMENTS PLATFORM

One-time, subscriptions, invoicing. 135+ currencies. Industry standard.

GOLD STD

🔔

Webhooks

EVENT-DRIVEN

Stripe fires events to your server. Always verify the signature.

🔄

Stripe Billing

SUBSCRIPTIONS

Trials, upgrades, cancellations, proration. All built in.

🧾

Paddle

MERCHANT OF RECORD

Handles VAT/GST globally. Better for international SaaS.

SHIELD SYSTEM

Security

The deflector shields — protecting every module from hostile actors. Security is forged into every weld from day one, not bolted on at launch.

SHIP PART: DEFLECTOR SHIELDS

THREAT	DESCRIPTION	COUNTERMEASURE	TOOLS
💉 SQL Injection	Attacker injects SQL to manipulate DB	Parameterized queries only	Prisma, pg
📜 XSS	Scripts run in users' browsers	Sanitize output, CSP headers	DOMPurify, Helmet
🎭 CSRF	Forged requests trick auth users	CSRF tokens, SameSite cookies	csurf, cors
🔓 Broken Auth	Weak passwords, no rate limits	bcrypt + rate limits	bcrypt, express-rate-limit
🕵️ Data Exposure	Secrets/PII in logs or responses	Encrypt at rest + transit	dotenv, TLS
💣 DDoS	Request floods take server down	Rate limiting + WAF	Cloudflare

LAUNCH SYSTEM

Infrastructure

Launch control — where the ship lifts off. Git push triggers liftoff. Containers ensure identical flight everywhere. Cloud auto-scales the thrust.

SHIP PART: LAUNCH PAD

DOCKERFILE

FROM node:20-alpine AS builder
WORKDIR /app
RUN npm ci --only=production
COPY . . && npm run build

FROM node:20-alpine AS runner
COPY --from=builder /app/dist ./dist
EXPOSE 3000
CMD ["node", "dist/index.js"]

▲

Vercel

FRONTEND HOSTING

Zero-config. Git push = live. Global edge. Native Next.js.

START HERE

🐳

Docker

CONTAINERIZATION

Runs identically in dev, staging, and production.

⚙️

GitHub Actions

CI/CD PIPELINE

Automated testing + deploy on every push. Free for public repos.

🔶

AWS / GCP / Azure

CLOUD PROVIDERS

Unlimited scale. 200+ services. EC2, Lambda, S3, RDS, CDN.

📊

Sentry + Datadog

OBSERVABILITY

Error tracking, metrics, dashboards. Know before your users do.

// LAUNCH SEQUENCE

CI/CD PIPELINE

// GIT PUSH → PRODUCTION — AUTOMATED LAUNCH

👨‍💻

01
git push

⚙️

02
Actions
trigger

🧪

03
Tests
+ lint

🐳

04
Docker
build

📦

05
Push to
registry

🚀

06
Deploy
prod

📊

07
Monitor

// MISSION LOADOUT

PRODUCTION SAAS STACK

⚛ HULL — FRONTEND

Next.js 14 + TypeScript + Tailwind

App RouterServer ComponentsZustandReact Queryshadcn/uiFramer Motion

⚙ ENGINE — BACKEND

Node.js + tRPC + Zod

ExpressZod validationBull queuesNodemailer

🔑 ACCESS — AUTH

Clerk

OAuthMFAWebhooks

🗄 CORE — DATABASE

PostgreSQL + Prisma + Redis

SupabaseRedis cacheS3 storage

💳 FUEL — PAYMENTS

Stripe

CheckoutBillingWebhooks

🛡 SHIELD — SECURITY

Cloudflare + Helmet

WAFRate limitTLSbcrypt

🚀 LAUNCH — INFRASTRUCTURE

Vercel + Railway + GitHub Actions + Docker

Vercel (frontend)Railway (backend)GitHub ActionsSentryUptime RobotCloudflare DNS

// CREW EQUIPMENT

DEVELOPER TOOLKIT

💻

VS Code

EDITOR

🐙

GitHub

VERSION CTRL

🌐

Postman

API TESTING

🐳

Docker Desktop

CONTAINERS

🐘

TablePlus

DB GUI

⚡

Warp

TERMINAL

🤖

Claude Code

AI AGENT

📐

Figma

DESIGN

📋

Linear

PROJECT MGMT

📦

pnpm

PKG MANAGER

🔍

ESLint

LINTER

🧪

Vitest

TESTING

🏗️

Terraform

INFRA CODE

🔐

1Password

SECRETS

💬

Slack

COMMS

🌊

Vercel CLI

DEPLOY