tech-stack.md

Tech Stack Considerations

Feel free to adjust the tech stack as you need and prefer.

These are the complete things that can be used and recommended, with more focus on things labeled by the 👍 (thumbs up) emoji.

General

• Browser: Chromium / Google Chrome / Arc Browser / Brave Browser
• Code editor: VS Code / Cursor / WebStorm / Neovim
• Terminal emulator: Kitty / Alacritty / iTerm / Warp / Hyper
• Links: Markdown
• Markup: HTML
• Styling: CSS
• Programming: JavaScript with TypeScript 👍
• Runtime version manager: proto 👍, alternative to nvm / asdf
• Runtime: Bun 👍, alternative to Node.js / Deno
  • Package manager: Bun 👍, alternative to npm / yarn / pnpm
• Monorepo: moonrepo 👍, alternative to Turborepo / Nx

Frontend

• UI library: React v18/v19 👍
  • Optimization: Million.js
• Meta-framework: Remix v2 👍 (React Router v6), alternative to Next.js
  • Bundler: Vite 👍
  • PWA: Vite PWA Plugin for Remix
  • Extension: Remix Forge for VS Code
• GraphQL client: Apollo Client v3 👍
• Auth: Remix Auth / Lucia Auth

Frontend Styling

• CSS framework: Tailwind CSS v4 👍
• Fonts: Fontsource 👍
• UI components: shadcn/ui 👍, Radix UI, SyntaxUI, Tremor.so, Aceternity UI, React Aria, Ariakit, Ark UI, Catalyst UI Kit, etc
• UI development: Storybook v8
• UI variants: Class Variance Authority (cva) 👍
• UI icons: React Icons, Lucide, Tabler Icons, Remix Icon, etc
• UI interaction and animation with various motion library: Motion One / Framer Motion / React Native Skia / Rive

Backend

• API layer: GraphQL 👍, alternative to REST API
• API server: Apollo Server v4 👍
• Schema generator: Pothos GraphQL 👍 / GraphQL Nexus
• ORM (Object Relational Mapper): Prisma 👍, alternative to Drizzle
• Database / DBMS (Database Management System): PostgreSQL 👍
  • Hosted: Vercel Postgres / Supabase / Xata.io / Neon.tech / Tembo.io
  • Utility: Snaplet
• Key-value store: Redis
  • Hosted: Upstash

Auth

• Password with email or username
• Email OTP
• Phone OTP
• GitHub Account
• Google Account
• Facebook Account

Utilities

• Toolchain: Biome
  • Formatter: Prettier
  • Linter: ESLint
  • Performance linter: Million Lint for React
• Containerization: Docker 👍, Docker Compose with Docker Rollout
  • Mac-only: OrbStack
• Data validation: Zod
• Unique ID: nanoid
• Form management: Conform / React Hook Form / Formiz
• Auth utility: Oslo.js, alternative to jsonwebtoken, bcrypt/argon, etc
• Email templating: React Email
• Rich text editor: TipTap, BlockNote, Yjs
• Security scan: Snyk, SonarCloud
• Search utility: Fuse.js v7
• Upgrade packages: Taze
• Find unused stuffs: Knip

Testing

• Test runner: Vitest
• Functional testing: React Testing Library
• E2E testing: Playwright
• Mock test: Mock Service Worker (MSW)
• GraphQL test: EasyGraphQLTester

Services

• Repository: GitHub
• Domain and DNS: Cloudflare
• Secret credentials: Doppler
• Frontend deployment: Vercel / Netlify
• Backend deployment: Render.com / Railway.app
• HTTP client: Firecamp / Hoppscotch / Insomnia / Postman / HTTPie
• GraphQL web client: Apollo Studio with Apollo Sandbox
• Analytics: Vercel Analytics / Plausible
• Event tracking: LogSnag
• Error tracking: Sentry
• Email service: Resend / Loops.so / Bento
• File upload and storage: Uploadcare / Uploadthing / Uppy
• Status monitoring: OpenStatus / BetterStack
• Link shortener: Dub.co
• Background jobs: Trigger.dev
• Notification system: Novu
• Meeting scheduler: Cal.com with Google Calendar
• Realtime and collaboration: Replicache
• BaaS (Backend as a Service): Directus
• Business dashboard and internal tool: Refine / Retool
• Integration: Alloy Automation / Zapier
• Payment gateway:
  • International: Lemon Squeezy / Stripe
  • Indonesia: Xendit / Midtrans

3D

• Three.js for 3D models
  • React Three Fiber
• Spline

CLI

• Ink, React for CLI

Mobile

• React Native
  • Expo

Desktop

• Tauri / Neutralinojs

AI / ML / LLM

• AI SDK: Vercel AI SDK
• OpenAI
• Mistral AI

Extra

• @uidotdev/usehooks
• date-fns / dayjs
• remix-typedjson
• remix-utils
• undici
• usehooks-ts