An opiniated stack for building real world apps with web technologies.

Core:

Remix, Tailwind CSS, Prisma ORM, MySQL, Vercel

Preferences:

Linear, Figma, HTML, CSS, JavaScript, TypeScript, Node.js, npm/pnpm, React, Remix, Tailwind CSS, Radix UI, Prisma ORM, MySQL on PlanetScale, Zod, Vercel, Bitwarden.

This is the short version of Stack All. You can use this repo as a template to help with your technical evaluation and decision.

The emoji 🧰 (toolbox) indicated the recommendation and 🔰 (beginner) need to be prioritized. Just keep in mind it doesn't mean that everything is required. Also feel free to skip the ones without the 🧰.

Main Categories:

• Stack: For technical evaluation
  • Work Stack
  • App Stack/Dependency
  • Development Stack/Dependency
  • Deployment Stack
  • External Service Stack
• References: For learning more
• Checklist: For development decision

• Arc 🧰🔰
• Chromium 🧰🔰
• Google Chrome 🧰
• Mozilla Firefox
• Apple Safari

• Telegram 🧰🔰
• Twist
• Slack
• Discord

• Notion 🧰
• Slab 🧰

• Linear 🧰🔰
• Asana
• Todoist

• Airtable 🧰🔰
• Typeform
• Google Forms + Google Sheets

• Warp

• Zed 🧰🔰
• VS Code 🧰🔰

• Markdown 🧰🔰
  • MDX
• Typst

• Clockify 🧰
• Clockwise

• Git 🧰🔰
• GitHub 🧰🔰
  • GitHub Classroom

• Eraser.io 🧰
  • DesignDocs.dev
• Excalidraw 🧰
• Mermaid
• Whimsical

• Figma 🧰🔰
• Framer
• Sketch
  • Zeplin
• InVision
• UXPin
• Marvel

• HTML 🧰🔰
• CSS 🧰🔰
• JavaScript 🧰🔰
  • TypeScript 🧰🔰
  • JSON 🧰
  • Node.js 🧰🔰
• Deno
• Bun

General:

• pnpm 🧰🔰
• npm
• yarn
• @antfu/ni

Installer:

• asdf
• nvm
• fnm

• Remix 🧰🔰
  • 📦 React, TypeScript, Prisma, Tailwind CSS, Remix Auth
• Next.js 🧰
• T3 Stack 🧰
  • 📦 Next.js, TypeScript, tRPC, Prisma, Tailwind CSS, NextAuth.js
• SolidStart
• SvelteKit

• React 🧰🔰
• Solid
• Svelte

• React Native 🧰🔰
  • Expo
• Flutter

• Full Stack Framework's Approach 🧰
• tRPC
• REST API
• GraphQL

For transforming the data into the content.

• DIY: Just create it ourself
• Contentlayer
• Astro:Content

Functions/Services:

• Remix Auth 🧰🔰
  • remix-auth
  • remix-auth-form
• Auth.js 🧰
  • next-auth
• Clerk 🧰: For setup auth the fastest way
  • @clerk/remix
  • @clerk/nextjs
• Auth0

Methods:

• Cookie-based Sessions 🧰🔰
• Email and Password 🧰
• Passwordless with OTP
• OAuth
  • GitHub
  • Google
  • Twitter

Security/Encryption/Encoding:

• bcrypt 🧰
• JWT (JSON Web Token)

If using Full Stack Framework's Approach, these might not needed.

REST:

• NestJS 🧰
• Express
• Fastify

GraphQL:

• GraphQL Yoga 🧰
  • Envelop
• Pothos GraphQL Schema
• Apollo GraphQL Server

General:

• Fetch API 🧰🔰
• Axios HTTP 🧰🔰
• ky

REST:

• TanStack Query 🧰
• SWR
• RTK Query

GraphQL:

• urql 🧰
• graphql-request
• Apollo Client

• Tailwind CSS 🧰🔰
  • Tailwind UI
  • tailwindcss
  • @tailwindcss/typography
  • @tailwindcss/forms
  • @tailwindcss/line-clamp
  • @tailwindcss/nesting
  • tailwindcss-radix
  • tailwindcss-animate
  • tailwindcss-debug-screens
  • tailwind-merge
  • tailwind-variants
  • tailwind-config-viewer
• clsx 🧰🔰: For constructing className strings conditionally
  • lukeed/clsx
• cva: For creating component variants (Class Variance Authority)
  • class-variance-authority:
  • joe-bell/cva
• PostCSS
• Autoprefixer
• Fontsource: For self-host Open Source fonts in neatly bundled NPM packages.

• Radix UI 🧰🔰: For the most complete unstyled UI components
  • shadcn UI: For ready to use UI components made of Radix UI and Tailwind CSS
    • shadcn/ui
    • Chimera UI: For installable shadcn UI components
• Headless UI
• Ariakit
• Downshift
• React Wrap Balancer
• NProgress 🧰: For slim progress bar

• Lucide 🧰
  • lucide-react
• Heroicons
  • @heroicons/react
• React Icons
  • react-icons

• React Router 🧰
• Next Router
• TanStack Router

• Zod 🧰🔰
  • zod-form-data

Framework Specific:

• Remix Validated Form 🧰🔰: For full stack form handling
• Remix Forms by Seasoned
  • domain-funcions

Framework Agnostic:

• HouseForm 🧰: For highly interactive client side form handling
• React Hook Form (RHF)
  • react-hook-form
  • @hookform/resolvers
• Formik

• Jotai 🧰
• Zustand
• XState
• Recoil
• Redux
  • Redux Toolkit (RTK)

• Prisma ORM 🧰🔰: For modeling the data and connecting the database
  • prisma
  • @prisma/client
• TypeORM
• Sequelize
• Mongoose

• MySQL on PlanetScale 🧰🔰
• PostgreSQL on Neon or Supabase
• MongoDB on MongoDB Atlas

Remix:

• remix-utils 🧰

General:

• sleep-promise: For a promise after a specified delay
• Invariant: For descriptive errors in development, but generic errors in production
  • tiny-invariant
• Falso: For all the fake data

Text/String:

• @sindresorhus/slugify
• Voca: For string manipulaton
• prettyjson: For formatting JSON data in a coloured YAML-style, perfect for CLI output
• pluralize
• country-code-lookup
• i18next
  • remix-i18next
  • next-i18next

Number/Currency:

• numeral: For formatting and manipulating numbers
• currency.js

Date:

• Day.js 🧰🔰
• date-fns
• Moment.js

File/Asset:

• pdfjs-dist: For parsing and rendering PDFs

Email:

• React Email 🧰
• Nodemailer

• TypeScript 🧰🔰: For type safety
• swc 🧰
• Babel

These are important just to know the language behind the tools.

• Golang → esbuild, Vite
• Rust → swc, Turbopack

• esbuild 🧰: For Remix default bundler
  • Vite 🧰: For client side only bundler
  • Turbopack 🧰: For Next.js future bundler
• Webpack: For Next.js current bundler

• pnpm Workspace
• Turborepo
• Nx

• Pretier 🧰🔰: For opiniated formatting
  • prettier-plugin-tailwindcss
  • IanVS/prettier-plugin-sort-imports
• Rome
• EditorConfig

• ESLint 🧰🔰: For enforcing JS/TS syntax rules
  • eslint-config-next
  • eslint-config-prettier
  • eslint-config-turbo
  • eslint-plugin-react
  • eslint-plugin-tailwindcs
• stylelint 🧰: For enforcing CSS syntax rules
• ls-lint
• commitlint
  • @commitlint/cli
  • @commitlint/config-conventional
• lint-staged

• Vitest 🧰🔰: For unit test
• Jest
• testing-library 🧰: For unit test
• Playwright 🧰: For end-to-end test
• MSW 🧰: For mock service test

Workflow:

• Bitwarden🧰🔰: For any credential management
• Doppler 🧰🔰: For app environment variable management
• Kodiak: For pull request management
• [npm-run-all]/run-p: For parallel scripts
• [motdotla/dotenv]

TypeScript:

• @total-typescript/ts-reset: For improving types for common JavaScript AP

Setup:

• Docker
• Nix

Extra:

• webhookthing
• Pino: For simple logging
• bundle-wizard: For evaluating bundle size
• @milahu/patch-package: For patching node modules

• Vercel 🧰🔰: For full stack app deployment with frontend focus
  • vercel.json
• Netlify 🧰: For full stack app deployment with frontend focus

• Railway.app 🧰: For full stack app deployment with all focus
• Render
• Fly.io
• Deno Deploy

• Amazon Web Services (AWS)
  • Amazon Elastic Compute Cloud (EC2)
• Google Cloud Platform (GCP)
  • Google Compute Engine (GCE)

• Highlight
• Sentry

• Posthog 🧰
• Cloudflare Analytics 🧰
• Axiom
• Fathom
• Plausible
• Google Analytics

• Uploadcare: For easy image storage/hosting 🧰🔰
• ImageKit: For easy image storage/hosting
  • imagekitio-react
• Mux Video: For modern video hosting
• bunny.net (Bunny CDN): For cheapest video storage/hosting/streaming

• Mapbox 🧰
  • mapbox-gl
  • react-map-gl
• Google Maps

Transactional:

• Mailjet 🧰🔰: For cheapest transactional email service
• Resend 🧰
• Postmark 🧰
• Sendgrid
• Amazon SES

Marketing:

• ConvertKit 🧰🔰
• Bento 🧰
• Substack

• GitHub Actions 🧰: For easy CI/CD on GitHub
• GitLab CI: For easy CI/CD on GitLab
• Circle CI

• Infra I'm Building On In 2023
  • The Infra That Saved Me From AWS - My 2023 Stack

• Rewinds - Remix Tailwind CSS starter kit
• neorepo - Remix/Next.js production-ready starter kit
• SaasRock - The One-Man SaaS Framework
• MakerKit - SaaS Starter Kits based on React

• Website
  • Personal Website
  • Company Profile
  • Organization Profile
  • School Portal
  • Government Portal
  • Community Portal
• Application
  • Content Management System (CMS)
  • Learning Management System (LMS)
  • Information and Encyclopedia
  • News and Magazine
  • Writing and Publication
  • Work and Productivity
  • Contacts and Address Book
  • Social Media and Event
  • Note-Taking and Research
  • Multimedia Streaming
  • Cooking and Culinary
  • Commerce and Shopping
  • Forum and Discussion
  • Jobs and Hiring
  • Health and Fitness Tracker
  • Personal Development
  • Places and Exploration
  • Travel and Accommodation
  • Property and Housing
  • Directory and List
  • Software as a Service (SaaS)

• Stack:
  • Work Stack
  • App Stack/Dependency
  • Development Stack/Dependency
  • Deployment Stack
  • External Service Stack
• General:
  • Format and lint rules
  • Function vs arrow function
  • Type naming convention
• Frontend/Client/Website:
  • Landing page/route
    • Header and Navigation
    • Main
    • Footer
  • 404 Not Found page/route
  • Splat (*) routes
  • Favicons
  • SEO metadata
    • charset
    • sitemap.xml
    • robots.txt
  • OG image for social media
  • Twitter metadata
  • JSON-LD Structured data
  • Analytics
• Backend/Server/API/Database:
  • Model naming convention (singular vs plural)
  • Field/property case convention (camel vs snake)