Aim to prioritize open source option, free-tier, or freemium.
Legends:
- 🧰 = primary, required, or should not be changed
- 🎉 = 3rd party service or platform
- 🧩 = optional or interchangeable
- 💠 = available as open source
- 🚧 = still in development or not available
Table of Contents:
- Guide: Tech Stack
- Core
- Library and Framework
- Styling and Components
- Form Handling and Data Validation
- Database and ORM
- Auth Provider
- Code Quality
- Deployment
- Domain and DNS and SSL/TLS
- Image
- Video
- Environment Variable/Secret
- Analytics
- Transactional Email
- Marketing Email
- Uptime Monitoring
- Error Monitoring and Tracking
- Background Jobs
- Cache and Rate Limiter
- Payment Gateway
- Testing
- Container
- Credentials
- Code Review
- Don't Use These Stack
- Extra Stack
- HTML: Markup language 🧰
- CSS: Styling language 🧰
- JavaScript: Programming language 🧰
- Node.js: JavaScript runtime 🧰💠
- pnpm: Package manager 🧩💠
- TypeScript: Typed language 🧰💠
- React: UI library 🧰💠
- Remix: Full stack web framework 🧰💠
- React Router: Routing (part of Remix) 🧰
- Tailwind CSS: Styling 🧰💠
- Fontsource: Web fonts 🧰
- Radix UI: Unstyled UI components 🧰🧩💠
- Iconify: Icon set component 🧰
- Icones: Icon search 🧰💠
- shadcn UI: Styled interactive components and theming 🧰🧩💠
- Tremor: Styled dashboard components 🧩💠
- React Email: Email rendering components 🧰🧩💠
- TanStack Table: Unstyled table grid component 🚧🧩💠
- Conform: Form handling 🧰💠
- Zod: Data validation 🧰💠
- znv: Type-safe env parsing and validation 🧰💠
- Zodix: Zod utilities for Remix loaders and actions 🧩💠
- zod-form-data 🧩💠
- Prisma ORM: Database ORM (Object Relational Mapping) 🧰💠
- MySQL: Database management system (DBMS) 🧩
- PlanetScale: MySQL-compatible serverless database platform 🧩🎉
- Remix Auth 🧰💠
- Prettier: Code formatter 🧰💠
- ESLint: Code linter 🧰💠
- Stylelint: Styling linter 🧰💠
- Markdownlint: Markdown linter 🧰💠
Starting here are mostly dominated by 3rd Party Tools, open source or not.
- Vercel 🧰🧩🎉
Alternatives:
- Fly 🧩🎉
- Render 🧩🎉
- Railway 🧩🎉
- Google Cloud 🧩🎉
- Amazon Web Services (AWS) 🧩🎉
Placeholders:
- Dicebear: Avatar placeholder 🧩🎉💠
Stock Photos:
- Unsplash: Image placeholder 🚧🧩🎉
Asset Storage and Upload:
- Uploadcare: Assets management 🧩🎉
- ImageKit: Assets management 🚧🧩🎉
- Cloudinary: Assets management 🚧🧩🎉
- UploadThing: Upload management 🚧🧩💠
Maps:
- Mux: video streaming and management 🚧🧩🎉
- Vercel Analytics 🧩🎉
- Enable it on Vercel projects dashboard
- Posthog: Product platform and data tools 🧩🎉💠
- Jitsu: Data pipeline and ingestion 🚧🧩🎉💠
- Resend 🧰🚧🧩🎉
Alternatives:
- Mailjet 🚧🧩🎉
- Postmark
- ConvertKit 🚧🧩🎉
- Bento 🚧🧩🎉
- Trigger.dev 🚧🧩🎉
- Upstash 🚧🧩🎉
- Lemon Squeezy 🚧🧩🎉
- Paddle 🚧🧩🎉
- Stripe 🚧🧩🎉
- Tier: Pricing as Code 🚧🧩🎉
- Vitest 🚧🧩💠
- Testing Library 🚧🧩💠
- Mock Service Worker (MSW) 🚧🧩💠
- Playwright 🚧🧩💠
- Ladle 🚧🧩
- Docker 🧩💠
- Docker Compose 🧩💠
- Docker Hub 🚧🧩💠
If work as a team, it's recommended to use either of these as secrets management platform to share
the environment variables. So can optionally use .env file.
If need to share quickly, EnvShare is good enough.
- Graphite: Stacking tool to ship code faster
- Vercel Pro: to make code review with preview deployments easier.
- CSS-in-JS solutions such as styled-components, @emotion, Stitches, Chakra UI, MUI, etc because already using Tailwind CSS.
- Data fetching and caching library such as TanStack/React Query, SWR, Axios, etc because already using Remix loader/action, unless very necessary.
- Redux, Zustand, Jotai, XState, etc because the app is still mostly having a server-side state.
- Firebase, Supabase, Auth0, etc because the app is already handling the auth with Remix Auth, unless very necessary
Although these are not included, if need a separate backend/server/service, here are the recommendations: