STACK.md

Stack

This is an opinionated and extended t3-turbo stack, which includes:

🏎️ T3-TURBO

• WebUI:
  • ReactJS / NextJS
  • NextAuth
    • email / password auth
    • Auth with Facebook
    • Auth with Google
    • Auth with Apple
    • Auth with Microsoft
    • Auth with Twitter
    • JWT
    • 2fa (with Google Athenticator Codes)
    • Roles + RBAC (Role Based Access Control)
      • NextShield
    • Using Postmark with NextAuth.js
• Mobile: React Native / Expo
• API Query / cache / state managment: tRPC with React Query
  • Global state management:
    • Zustand (as replacement for Redux)
    • Jotai (as replacement for ContextAPI, insipred by Recoil)
• JavaScript superset with strong typying: TypeScript
  • Fix some TS issues: ts-reset
• CSS library: TailwindCSS with NativeWind for React Native
  • tailwind-merge
  • clsx
  • class-variance-authority
• Param validation: Zod
• ORM for SQL and NoSQL: Prisma
• Monorepo: Turborepo
• Package Manager: pnpm

plus more:

🪪 UI

• Figma + Zeplin
• Atomic Design
• Storybook
  • Basic setup for Sotrybook/NextJS components
  • Free Storybook deployments with CI/CD, feedbacs and more: Chromatic
• shadcn/ui (RadixUI + TailwindCSS + tailwind-merge + Class Variance Authority + clsx)
• Snackbar / notifications (choose one):
  • React Hot Toast
  • React Toastify
• Form handler: (Formik or React Hook Form - both works with Zod)
  • Formik
  • React Hook Form
• Icons:
  • Lucide
  • react-icons
• Animations:
  • Framer Motion
  • react-spring
  • react-animations
  • GreenSock
• DreamUI (customly build UI library on top of shancn, with form handlers, snackbar, i18n/rtl, etc.)

✅ Quality and CI/CD

• Git hooks: husky
  • lint-staged & .lintstagedrc
  • lintcommit
• Code formatter: Prettier
• Code linting: ESLint
  • eslint-plugin-tailwindcss
• Sonar
  • Code linting: SonarLint (added as recommended VSCode extension)
  • Static code analysis: SonarQube
• Git Commit messages: Conventional Commits & lintcommit
• Git Branch Name Convesions: validate-branch-name
• Code monitoring, logging and alerting:
  • Sentry
  • Checkly (e2e, monitoring & alerting, uses Playwright for e2e)
  • System metrics, monitoring and alerting Prometheus + Grafana
• Vulnerabilities checks
  • Dependabot
  • Snyk
• Audits for performance, accessibility, progressive web apps, SEO, and more: Lighthouse
• Release automation (with Semantic Release) - has plugins update version and changelog, Docker Hub / Expo app / npm publish, push notification to Slack bot or Telegram Bot, etc.
  • ReactJS / NextJS release
  • React Native release with Semantic Release, Fastlane, and Semaphore

🔍 Tesing

• Unit / Integration testing: (choose one)
  • Jest
  • Vitest (Jest-compatible alternative) Migrate Jest to Vitest
• UI testing:
  • Web: React Testing Library
  • Mobile: React Native Testing Library
• e2e testing: (choose one) Cypress vs Playwright comparison
  • Cypress
  • Playwright
  • Testim.io
• API testing: Postman

📚 Documentation

• UI documentation: Storybook
• API documentation: Swagger & Postman
• Other markdown docs: (choose one)
  • Docusaurus
  • Nextra (preffered)

💭 Backend / Cloud

• Microservices
  • NestJS
  • Deno?
  • Bun?
  • Python?
  • Go?
  • Rust?
• Realtime notifications / chat: Pusher
• Upstash: serverless Redis (with rate limiting and feature flags) / Kafka / QStash
  • Redis
    • Rate limiting
    • Feature flags
  • Kafka
• File upload:
  • S3
  • MinIO (self-hosted S3-compatible object storage)
  • Cloudflare R2 (S3-compatible object storage)
  • UploadThing (S3 alternative from t3-stack creator)
  • Vercel Storage
    • Vercel KV based on Upstash Redis
    • Vercel Postgres based on Neon
    • Vercel Blob based on Cloudflare R2
    • Vercel Edge Config
• Send emails
  • Postmark
  • Nodemailer
  • SendGrid
• Full text serach: ElasticSearch

🛠️ Other

• i18n / rtl support
  • i18next
    • next-i18next
    • Locize
• Row Level Security

Useful resources:

• NPM Trends can be used if you need to complare multiple npm packages to pick from

Tool preferences

• npm > yarn > ✅ pnpm
• webpack > vite > ✅ turbopack
• lerna > nx > ✅ turborepo
• jest > ✅ vitest
• selenium > cypress > ✅ playwright
• nvm > ✅ volta
• create-react-app > create-next-app > create-t3-app > create-t3-turbo > ✅ dreamstack