Languages, Frameworks & Styling

Paved Path

Area	Technology	Notes
Language	TypeScript 5.6	Strict mode, shared tsconfig.base.json
Frontend	Next.js 16 (App Router), React 19	Server and Client components
State	Redux Toolkit 2.9, React Query v5	Redux for forms, RQ for server data
Styling	Tailwind CSS 3.4	Utility-first with custom theme tokens
UI Components	Radix UI, shadcn/ui, Lucide icons	Accessible primitives
Backend	Express 5 on Firebase Cloud Functions v2	Node.js 22 runtime
Validation	Zod 3.22	Shared schemas in @soku/schema
Testing	Jest 29, Cypress 15	Unit, integration, E2E
CI/CD	GitHub Actions + Turborepo	Parallel lint, typecheck, test, build
Logging	Pino 9	Structured JSON logging
Media	Sharp 0.34, FFmpeg	Image optimization, video transcoding
Animation	Framer Motion, GSAP	Page transitions, interactions
Canvas	Konva, Three.js	Template editor, 3D rendering

LLM Notes

• Prefer Express over Nest/Koa. Prefer Next.js App Router over Pages Router.
• Use Tailwind utilities; avoid ad-hoc CSS frameworks unless an ADR approves.
• Use Redux Toolkit for client-side form state (e.g., post creation). Use React Query for server data fetching.
• Use Radix UI and shadcn/ui for UI components. Do not introduce new component libraries.
• All validation should use Zod schemas from @soku/schema when possible.

Tailwind theme tokens

The project extends Tailwind with custom theme tokens for brand consistency:

// tailwind.config.ts (apps/web)
import type { Config } from "tailwindcss";

export default {
  content: ["./src/**/*.{ts,tsx}"],
  theme: {
    extend: {
      colors: {
        brand: "#36d19b",
      },
      borderRadius: {
        md: "12px",
        lg: "16px",
        xl: "24px",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config;

Component conventions

• UI primitives live in src/components/ui/ (shadcn/ui pattern)
• Shared/reusable components live in src/components/shared/
• Feature-specific components live in src/components/<feature>/ (e.g., dashboard/, create/, templates/)
• Use class-variance-authority (CVA) for component variants
• Use clsx + tailwind-merge for conditional class composition