Skip to content

Latest commit

 

History

History
1607 lines (1326 loc) · 57.5 KB

README.md

File metadata and controls

1607 lines (1326 loc) · 57.5 KB
Raw

🐶 Dogokit Stack All

This is both technical and non-technical stack. The opiniated stack list to manage and build modern apps with web technologies. Which could also help to setup a new team or company tools. For the much simpler version, see Stack. Which the list items might be updated more often.

Table of Contents

Preferences

Quick version

TypeScript (HTML+CSS+JavaScript+Node.js included), React, Remix, Tailwind CSS, Ariakit, Prisma ORM, MySQL on PlanetScale, GraphQL, GraphQL Yoga, Pothos Schema, Vercel, Railway.app

Short version

HTML, CSS, Tailwind CSS, JavaScript, TypeScript, Node.js, npm, React, Remix, Next.js, Ariakit, cva, Prisma ORM, MySQL on PlanetScale, PostgreSQL on Supabase/Neon, Vitest, Playwright, MSW, GraphQL, Express, NestJS, GraphQL Yoga, Pothos Schema, Vercel, Railway.app, Mailjet/Postmark, Google Cloud Platform (GCP).

Complete version

  • JavaScript and TypeScript for programming language
  • Node.js for runtime & npm for package manager
    • Golang and Rust ecosystem as altenatives
  • HTML for markup language and content structure
  • CSS for styling language
    • Tailwind CSS for utility classes
    • cva (Class Variance Authority) for component variants
  • React for frontend library and UI components
    • Ariakit, Headless UI, Radix UI for stylable accessible components
  • Remix for full stack web framework
    • Remix Router for routing
    • Remix Forms for full-stack form library
  • Next.js for alternative web framework
    • Next Router for routing
  • Vite for client-side only starter and bundler
  • Turbopack or esbuild for bundler
    • swc for transpiler
  • Authentication and authorization with
    • Cookie-based sessions
    • Email/Password
    • GitHub
  • Express or NestJS for backend framework
    • GraphQL for data query and manipulation language
      • GraphQL Yoga and Envelop for the server and plugin system
    • REST API for other web APIs
  • MySQL for relational database on PlanetScale
  • Prisma for database ORM
  • Pothos for GraphQL schema builder
  • MySQL or PostgreSQL for RDBMS
  • Vitest and Testing Library for unit and integration testing
  • Playwright for functional or e2e testing
  • MSW for local third party API request mocking
  • EditorConfig, Prettier, ESLint, stylelint, ls-lint, commitlint, lint-staged — for code formatting, linting, static testing
  • Git and GitHub for version control, collaboration, and deployment
  • Circle CI or GitHub Actions for CI/CD
  • Vercel for frontend deployment
  • Railway.app for backend or full stack deployment
  • ImageKit and Mux for multimedia storage
  • Postmark or Mailjet for transactional email
  • Google Cloud Platform (GCP) for cloud infrastructure

Names

We called it the NORSE Stack. The main defaults in the NORSE Stack are:

  • Node.js and npm as the main platform and package manager
  • ORM (Object Relational Mapping), data modeling, and API layer with Prisma and Pothos GraphQL
  • Remix (React/Vue/Svelte) or Next.js (React) as the full stack layer
  • SQL (Structured Query Language) DBMS (Database Management System) with MySQL or PostgreSQL.
  • Ecosystem of libraries and frameworks from the JavaScript and TypeScript community such as Tailwind CSS, Ariakit, etc

Business-related:

  • Slab for note-taking, alternative to Notion and Confluence
  • Twist for communication
  • Linear for product and software development
  • Basecamp / Plutio / Bloom.io for project management
  • Outseta for payment management
  • Cushion for project balancing
  • Wave / Xero / QuickBooks for accounting

Notes

Keep in mind most the items listed are not used, but the loved ❤️ or most starred ⭐ might be used and recommended. More stars can be added like ⭐⭐⭐ to indicate the importance (0 to 5 stars) or even ❤️ to indicate the utmost priority. The non-starred are just for references, comparison, good alternative, if want to be changed to, waiting for rating, or not evaluated yet.

All of these information also helps the whole team (or even yourself) to choose and change multiple options along the way. Outside of the Stages section, the links are annotated to the name of the item.

Legend

  • ⭐ — Rating
  • ❤️ — Recommended

Concepts

  • Problem Solving
  • Critical Thinking
  • First Principles
  • Engineering
  • Computer Science (CS)
  • Software Engineering (SWE)
  • Software Architecture (SWA)
  • Software Infrastructure (SWI)
  • Database
  • Deployment
  • Containerization
  • Career

References

Stages

Here is some quick overview of the preferred or recommended options. Because of the complexity, the setup can go through several stages based on the priorities. In here, there should be no link, annotations, or ratings.

Stage 0 → Setup 💻

Setup options:

  • Laptop
    • Apple → M1 Pro Macbook Pro
    • Linux → Thinkpad
    • Windows → Thinkpad
  • Operating System (OS)
    • macOS and iOS → Most reliable
    • Linux and Android → Most flexible
    • Windows → Most popular
  • Web Browser
    • Google Chrome → Most popular
    • Brave Browser → Most private
    • Microsoft Edge → Most performant
    • Mozilla Firefox → Most ethical
  • Mac-specific
    • Raycast → Command panel
    • Rectangle → Window manager
    • Maccy → Clipboard manager
    • Numi → Calculator
    • Owly → Prevent sleep
    • Macs Fan Control → Change fan speed
    • Hidden Bar / Vanilla → Hide menu bar items
    • iStat Menus → System status
    • KeyCastr → Show keystroke
  • Bitwarden + Authy → Credentials & 2FA
  • External communication
    • Gmail or Google Workspace → Email service by Google
      • aka Google Apps / Google App Suite
    • HEY → Email service by Basecamp
    • ImprovMX
  • Internal communication
    • Twist → Team chat
    • Email → Backup
  • External communication
    • Multi Purpose
      • Airtable → Multi purpose business-oriented database
        • Form → Collect submissions data
    • CRM (Customer Relationship Management)
      • HubSpot → Free CRM + Help Desk
      • Crisp → Paid CRM + Help Desk
    • Email Marketing
      • ConvertKit → Free newsletter emails
      • Bento → Paid all-in-one marketing automation platform
    • Community
      • Linen → Public chat forum
      • Discord → Casual chat
      • Slack → Casual chat
  • GitHub → Git hosting and collaboration
    • Refined GitHub → ?
    • DevHub → Desktop GitHub Notifications & Activities
  • Slab → Collaborative notes
  • Linear → Internal issue tracking
    • Productlane → User feedback and changelog for Linear
  • Clockify → Time tracking
  • Around → Video call
  • Community → YouTube, Twitter, Mastodon, Substack, Hashnode, DevTo, Makerlog, WIP, etc

References:

Stage 1 → Design 🎨

  • Figma → UI/UX design tool
    • Figma Tokens → ?
    • Tailwind Color Palette → ?
    • Alphredo → Transparent/alpha colors generator
  • Eraser / Excalidraw → Quick diagram
  • Favicon.io → Favicon Generator
  • Shottr → Screenshot

Stage 2 → Configuration ⚙️

  • Terminal, shell, prompt
    • Alacritty → The fastest terminal app
    • Warp → The modern terminal app
    • zsh → Terminal shell
    • Starship.rs → Terminal prompt
  • Git → Version control
    • diff-so-fancy →
    • Conventional Commit → ?
  • Repository
    • Semantic Versioning (semver) → ?
    • Semantic Release (semantic-release) → Fully automated version management and package publishing
    • Contributor Covenant → ?
    • Release Please → ?
  • Package manager
    • Homebrew → macOS
    • apt → Ubuntu
  • asdf → Runtime manager
    • fnm → Fast Node Manager
    • Volta → JavaScript tool manager
  • Node.js → JavaScript runtime
    • npm → Node.js package manager
    • pnpm → npm alternative that is fast and disk space efficient
    • Openbase → compare open-source packages
  • TypeScript → Superset of JavaScript with type safety
  • VS Code → Code editor
  • EditorConfig → Common coding style
  • Prettier → Code formatter
  • ESLint → JavaScript linter
  • Stylelint → CSS linter
  • ls-lint → File name linter
  • commitlint → Commit message linter
  • lint-staged → Staged changes linter
  • Doppler → Universal Secrets Platform
  • Plop → File generator

Stage 3 → Frontend interface ⚛️

  • React → Frontend UI library
  • Remix → Full stack web framework on React/Vue
  • Next.js → Full stack web framework on React
  • Astro → Static site generator with React/Vue/Svelte/Solid
  • Tailwind CSS → Utility CSS framework
    • UI Colors → Generate color shades
    • cva → variant management
  • PostCSS → CSS transformer
  • Ariakit → Unstyled components
  • Headless UI → Unstyled, fully accessible UI components
  • Radix UI → Accessible UI component primitives
    • tailwindcss-radix
  • Icons
    • Phosphor Icons → Application icons
    • React Icons → All in one
    • Font Awesome → Social media icons
  • UI components
    • Markdoc → Markdown renderer
    • Prism.js + Prism React Renderer → Code syntax highlighting renderer
      • Shiki → Code syntax highlighting alternative
    • Monaco Editor → Code editor
  • State management
    • Jotai →
    • Zustand → ?
  • Nextra / Slate Docs → Documentation
  • Vercel → Deployment for speed
    • Axiom → Logging
  • Railway.app → Deployment for backup
  • Cloudflare / Google Domains → Domain and DNS
  • Dr. Link Check → Links check

Stage 4 → Frontend Interaction ⚡

  • Status monitoring
    • Pulsetic → ?
    • Better Uptime → ?
    • Instatus → ?
  • Form, input, text area
    • Remix Form → for Remix
    • React Hook Form → Complex client-side form library
    • tiny-invariant → provide descriptive errors in development but generic errors in production.
    • Tiptap / Typist / Lexical → Rich text editor
  • User and product analytics
    • Google Analytics 4 → Most popular analytics
    • Splitbee → Friendly analytics
    • Posthog → Product analytics
    • Pirsch → Beautiful analytics
    • Plausible → Powerful analytics
    • MixPanel → Simple analytics
  • App analytics and error reporting
    • Highlight / Sentry → App analytics and error tracking
    • LogRocket → ?
    • Metronome → Remix insights
  • Dependency monitoring
    • DepFu → Common
    • Snyk → Security
  • Feature toggle
    • Growthbook → Feature flagging and experimentation

Stage 5 → Database and Service 💿

  • Prisma → ORM (Object Relational Mapper)
    • Argon2 / bcrypt
  • MySQL on PlanetScale → Relational database
  • PostgreSQL on Neon → Relational database
    • Dashibase → Quick dashboard
  • Snaplet → Development and backup
  • Arctype → SQL Client
  • X → Object storage
  • ImageKit → Image Storage
  • Mux → Video storage
  • Postmark → Transactional email
  • Mailjet → Transactional email
  • Basedash → Internal tooling

Stage 6 → Payment 💰

  • Paddle → Payments infrastructure for Internatioanal
  • Lemon Squeezy
  • Midtrans → Payment gateway for Indonesia
  • PayPal → Alternative payment method
  • Gumroad → Backup

Stage 7 → API 🧩

  • HTTPie & Hoppscotch → API client
  • GraphQL → Data query and manipulation language for API
    • Pothos GraphQL Schema → ?
  • Axios → REST API client
  • urql → GraphQL client
  • Payload CMS / GraphCMS → Content management system
  • GraphCDN → GraphQL CDN

Stage 8 → Testing 🧪

  • Falso/Faker → Generate fake data
  • Vitest → ?
  • testing-library → ?
  • Playwright / Reflect.run → ?
  • Mock Service Worker (MSW) → ?

Stage 9 → Automation and Extra ✨

  • GitHub Actions → Build checks
    • Changeset
    • Codecov
  • CodeFactor → Code review
  • Docker → Container

Work/Management Stack

Browser

  • Google Chrome —?
    • uBlock Origin —?
    • Bitwarden —?
    • Raindrop —Bookmark management
  • Brave Browser — ?
  • Microsoft Edge — ?
  • Mozilla Firefox — ?
  • Min Browser — A fast, minimal browser that protects your privacy
  • WebCatalog — ?

Search Engine

  • Google — ?
  • DuckDuckGo — ?
  • Bing — ?
  • Brave Search — ?

Utility

  • Credentials
    • Bitwarden — ?
    • Authy — ?
  • Mac-related
    • Raycast — Blazingly fast, totally extendable launcher. It lets you complete tasks, calculate, share common links, and much more.
    • Maccy — macOS clipboard manager
    • Numi — Beautiful calculator app for Mac
    • Rectangle — Move and resize windows in macOS using keyboard shortcuts or snap areas
    • Owly — ?
    • Macs Fan Control— ?
    • iStat Menus — ?
    • KeyCastr — ?
    • Cursor Pro — ?
  • Writing

Multimedia

  • VLC — ?
  • Calibre — ?

Communication

External text

  • Gmail / Google Account ❤️⭐⭐⭐ — Access to Google services
    • Google Calendar — ?
    • Google Drive — ?
    • YouTube — ?
  • HEY Email ❤️⭐⭐⭐⭐⭐ — ?
  • ProtonMail ⭐⭐ — ?
  • Superhuman ⭐⭐⭐ — The Fastest Email Experience Ever Made

External video

  • StreamYard — ?
  • Restream — Create and Multistream Live Video
  • Riverside — ?
  • Melon — Login & Start Streaming

Internal text

  • Twist ❤️⭐⭐⭐⭐⭐ — ?
  • Slack — ?

Internal video

  • Around.co — Video calls loved by extraordinary teams
  • Zoom.us — ?
  • Claap — Record quick videos of your screen, get contextual feedback, and make decisions. The modern way to align hybrid teams. Less Meeting. More doing.

Knowledge base

  • Slab ❤️⭐⭐⭐ — for primary team knowledge base
  • Outline ⭐⭐ — Team knowledge base & wiki
  • Notion ⭐⭐ — for legacy tracks/topics/lessons
  • Reflect ⭐ — keep track of your notes, books, and meetings

General management

Generally for tracking issue, feedback, roadmap, changelog, and time.

  • GitHub Issues ⭐⭐⭐⭐ — public issue tracking and management
  • Linear ⭐⭐⭐⭐⭐ — internal team issue tracking and management to handle the priority feature development.
  • Roadmap and changelog
    • Productlane ⭐⭐⭐⭐ — Linear-based public roadmap, user feedback, and changelog
    • Headwayapp — ?
    • Canny — ?
    • Productboard — ?
  • Clockify ⭐⭐⭐ — The most popular free time tracker for teams

Engineering management

  • Sleuth — ?

Calendar and scheduling

  • Calendly ❤️⭐ — ?
  • Cal.com ❤️⭐ — Open source Calendly alternative (previously Calendso)
  • Cron calendar ❤️⭐ ⭐⭐— Next-generation calendar for professionals and teams.
  • Rise calendar — ?
  • SavvyCal — ?
  • Nook Calendar — ?

Community and social media

Especially for profile pictures.

  • GitHub — ?
  • GitLab — ?
  • LinkedIn — ?
  • Twitter — ?
  • Facebook — ?
  • Instagram — ?
  • YouTube — ?
  • Discord — ?
  • Slack — ?
  • Mastodon — ?
  • Showwcase — ?
  • Makerlog — ?
  • WIP — ?
  • Polywork — ?
  • Stack Overflow — ?
  • Hashnode — ?
  • Dev.to — ?
  • Gravatar — ?

Jobs

  • Remote OK — ?
  • Grow Remote — ?

General / Full Stack / Frontend & Backend

Terminal, shell, prompt

  • Terminal app
    • Universal
      • Alacritty ⭐⭐⭐ — Cross-platform, OpenGL terminal emulator
        • alacritty-themes CLI
      • Hyper™ ⭐⭐⭐ — Terminal built on web technologies by Vercel
    • Mac
      • iTerm2 ⭐⭐ — ?
      • Warp ⭐⭐ — ?
  • Terminal shell
    • zsh ⭐⭐⭐ — ?
      • Antibody — Shell plugin manager made from the ground up thinking about performance.
  • Terminal prompt
    • Starship.rs ⭐⭐⭐ — Cross-Shell Prompt. The minimal, blazing-fast, and infinitely customizable prompt for any shell
  • Terminal commands
    • asdf-vm/asdf ⭐⭐⭐ — Extendable version manager with support for Ruby, Node.js, Elixir, Erlang & more. Manage multiple runtime versions with a single CLI tool
    • fnm Fast Node Manager — Fast and simple Node.js version manager, built in Rust
    • clvv/fasd ⭐⭐⭐ — Fasd (pronounced similar to "fast") is a command-line productivity booster. Fasd offers quick access to files and directories for POSIX shells. It is inspired by tools like autojump, z and v.
    • Volta ⭐⭐⭐ — The Hassle-Free JavaScript Tool Manager
  • Remote login
    • OpenSSH — ?

Code management, version control, auto-merge

  • Git ❤️⭐⭐⭐ — the most popular version control
    • diff-so-fancy — ?
    • Conventional Commit — Specification for adding human and machine readable meaning to commit messages
    • Release Please — Automates CHANGELOG generation, the creation of GitHub releases, and version bumps for your projects.
  • GitHub ❤️⭐⭐⭐ — the best Git hosting on the planet
    • Refined GitHub ⭐⭐⭐ — ?
    • DevHub ⭐⭐⭐ — Desktop GitHub Notifications & Activities
    • Neat ⭐ — Supercharge your GitHub workflow
  • Git tools
    • degit ⭐ — Straightforward project scaffolding, to the info in README
    • GitFlow — structured branching model and workflow for Git
    • PR auto-merge
      • Kodiak ⭐
      • Mergify ⭐
  • Doppler ❤️⭐⭐⭐ — Universal Secrets Platform
  • Plop — Consistency Made Simple. Little tool that saves you time and helps your team build new files with consistency
  • Repository, document, versioning, contributing

Code editor

Languages, platforms, runtimes

  • TypeScript — ?
  • JavaScript — ?
  • Node.js — ?
  • npm — ?
    • Yarn — ?
    • pnpm — Fast, disk space efficient package manager
    • Openbase — ?

Configuration, formatter, linter

  • EditorConfig ⭐⭐⭐ — ?
  • Prettier ⭐⭐⭐⭐⭐ — ?
  • ESLint ⭐⭐⭐⭐⭐ — ?
    • eslint-config-airbnb
    • @remix-run/eslint-config
    • prettier-eslint
    • eslint-plugin-tailwindcss
  • Stylelint ⭐⭐⭐⭐⭐ — A mighty, modern linter that helps you avoid errors and enforce conventions in your styles
    • stylelint-config-prettier
  • ls-lint ⭐⭐⭐⭐⭐— File name linter
  • commitlint ⭐⭐⭐— Commit message linter

Generic library for utility

  • dayjs ⭐ — ?
  • cuid ⭐ — ?
  • jsonwebtoken ⭐ — ?
  • validator ⭐ — ?
  • Lodash ⭐ — ?
  • is-online ⭐ — Check if the internet connection is up
  • is-reachable ⭐ — Check if servers are reachable
  • humanize-list ⭐ — Comma delimit an array for human readability, the Oxford comma is optional.

slug

  • limax ⭐⭐⭐ — ?
  • slugify ⭐⭐ — ?

Frontend Stack

UI, UX, and graphic design

  • Figma ⭐⭐⭐ — The collaborative interface design tool
    • Typescale — Harmonious typographic scales, directly from your design tool
    • Figma Tokens — ?
  • Lunacy ⭐⭐⭐ — Free Design Software for Win, Mac, Linux
  • Framer ⭐⭐⭐ —
  • InVision ⭐⭐ —
  • Sketch ⭐⭐ —
  • Penpot ⭐⭐ —

Asset colors

Asset design, diagram, flowchart

Add Later

Sketch/Diagram

Frontend/web app framework

  • React ⭐⭐⭐⭐⭐ — UI library/framework
    • TSX/TypeScript — ?
    • JSX/JavaScript — ?
    • HTML — ?
    • CSS — ?
  • React Native ⭐⭐⭐ — ?
    • Expo ⭐ — ?

Frontend routing

  • React Router — ?
  • TanStack Location — ?
  • wouter — ?

Module bundler, transpiler, minifier, mangler, compressor

  • esbuild — ?
  • Vite — ?
  • Turbopack — ?
  • Webpack — ?
  • Babel — ?
  • swc — ?
  • Terser —?

Full-stack web app framework

  • Remix ❤️⭐⭐⭐⭐⭐ — ?
    • esbuild as bundler — ?
  • Remix Packages
    • React Router v6 — ?
      • history — ?
      • query-string — ?
      • qs — ?
    • remix-seo ❤️⭐ —
    • remix-pwa ❤️⭐ — PWA integration & support for Remix
    • remix-utils ⭐ —
    • remix-themes ⭐ — An abstraction for themes in your Remix app.
    • remix-auth ⭐ — inspired by Passport
    • remix-i18next — The easiest way to translate your Remix apps
    • remix-image — ?
    • remix-forms — ?
    • remix-tailwind — research first
    • remix-query ⭐ — Keep your loader data in sync in your component without reloading the page
  • Next.js — ?
    • NextAuth.js — ?
    • Outstatic — A Static Site CMS for Next.js
  • RedwoodJS — ?

Styling and design system

Template, starter kit, or boilerplate:

  • Rewinds ❤️⭐⭐⭐⭐⭐ — Remix Tailwind Starter Kit by M Haidar Hanif
  • Vitesse — Opinionated Vite Starter Template by Anthony Fu
  • ts-nextjs-tailwind-starter — Next.js + Tailwind CSS + TypeScript Starter by Theodorus Clarence

Styling preferences

  • React Universal = Tailwind CSS + Headless UI + Radix UI + family of libraries
  • React CSS-in-JS = Stitches + Radix UI + Radix Colors

Pure styling options

  • Tailwind CSS ❤️⭐⭐⭐⭐⭐ — A utility-first CSS framework for rapid UI development
    • UI Colors — Tailwind CSS Color Shades Generator & Editor
    • PostCSS — CSS transformer
    • @tailwindcss/typography
    • @tailwindcss/forms
    • @tailwindcss/line-clamp
    • @tailwindcss/aspect-ratio
  • UnoCSS ⭐⭐⭐ — ?
    • It's actually better than Tailwind, just the ecosystem is still new, like there is no editor plugin yet
  • Master CSS ⭐⭐⭐ — A Virtual CSS language with enhanced syntax. Efficiently build your UI and design system with HTML only.

Variant components

  • cva (Class Variance Authority) — component variants

Behavioral components

  • Headless UI ❤️⭐⭐⭐⭐ — Unstyled, fully accessible UI components
  • Radix UI ❤️⭐⭐⭐⭐ — Accessible component system that replicate most Headless UI components
    • @radix-ui/react-scroll-area
  • Reach UI — ?
  • Ariakit — ?
  • Downshift — ?
  • React Select — ?
  • TanStack Table v8 / React Table — Headless UI for building powerful tables & datagrids
  • Tailwind components
    • Tailwind UI ⭐ — Beautiful UI components
      • Only for references, as VechaiUI and daisyUI provide a more organized UIs
    • daisyUI — Tailwind CSS Components
    • Vechai UI ❤️⭐⭐⭐ — React Tailwind CSS Components
    • Tailblocks — ?
    • Hyper UI — ?
    • Tail-kit / tailwind-kit.com
    • tailwindcomponents.com
    • kitwind.io
    • tailblocks.co
    • merakiui.com
    • tailwindtoolbox.com

Styled components

  • Stitches ⭐⭐ — CSS-in-JS library and theming solution
    • Performant and can customize variants easily
    • Replace emotion and styled-components
    • Can extract Tailwind CSS config into Stitches config
    • Replicate most Tailwind UI components
    • Can implement multiple themes than just light and dark mode
  • emotion — ?
  • styled-components — ?

Misc

  • Radix Colors ⭐⭐— accessible color system with light and dark theme
    • Only when using Radix UI and Stitches together
    • Not when using Tailwind CSS
  • Existing design system and components for inspirations
    • NextUI ⭐⭐⭐ — for UI components based on Stitches
    • Chakra UI ⭐⭐⭐ — for flexible UI components
    • Mantine — for complex ready to use components
    • NativeBase — ?
    • UI Kitten— ?
    • React Native Elements— ?
    • Eva Design System — Deep learning color generator

Data fetching

  • Remix built-in loader and action with fetch
  • Axios HTTP ⭐⭐⭐ — Promise based HTTP client for the browser and Node.js
  • urql ❤️⭐⭐⭐ — "Universal React Query Library" is a blazing-fast minimal GraphQL client. The highly customizable and versatile GraphQL client for React, Svelte, Vue, or JavaScript.
    • Can perform in Remix Loader
    • Can replace graphql-request or Apollo
  • graphql-request ⭐ — GraphQL client
    • Only when urql is too much
  • SWR — React Hooks for Data Fetching
  • TanStack Query / React Query — ?

Font hosting

  • Google Fonts ⭐⭐⭐ — ?
  • fontbit.io ⭐ — Simple and privacy-friendly Google Fonts proxy

Frontend hosting

Frontend tools

  • Dr. Link Check — Broken Link Checker

Frontend library

  • Hooks
    • usehooks-ts — ?
  • Forms
    • React Hook Form — ?
    • Formik — ?
    • React Final Form — ?
  • Icons
    • Icônes — Icon Explorer with Instant searching, powered by Iconify
    • Iconify ❤️⭐⭐⭐⭐⭐ — ?
    • React Icons ❤️⭐⭐⭐ — ?
    • Phosphor Icons ❤️⭐⭐⭐ — ?
    • Remix Icon ⭐⭐ — ?
    • Feather Icons ⭐⭐ — ?
    • Boxicons ⭐ — ?
    • Ionicons ⭐ — ?
    • Font Awesome ⭐ — ?
    • Game Icons — ?
    • Simple Icons — 2000+ Free SVG icons for popular brands
  • Component documentation
    • Storybook ⭐⭐⭐⭐⭐ — component management
    • Bit.dev — ?
  • Markdown
  • Code syntax highlighting
    • Prism.js ⭐⭐⭐⭐⭐ —?
      • Prism React Renderer — ?
    • highlight.js ⭐⭐⭐ — ?
      • React Syntax Highlighter —?
    • Shiki ⭐⭐⭐ — ?
  • Markdown documentation generator
    • Nextra — ?
    • Slate — ?
  • Emoji
    • Twemoji & react-twemoji ⭐⭐⭐ — ?
    • OpenMoji — ?
  • Rich text editor / WYIWYG editor
    • Tiptap ❤️⭐⭐⭐⭐⭐ — Headless WYSIWYG Text Editor
      • Typist ❤️⭐⭐⭐⭐⭐ — Rich Editor based on Tiptap
    • Quill.js ❤️⭐⭐⭐ — Your powerful rich text editor
    • Lexical ❤️⭐⭐⭐ — An extensible text editor framework that does things differently
    • Jodit ⭐ — ?
    • Slate.js ⭐— ?
  • Animation library
    • AutoAnimate — Add motion to your apps with a single line of code
    • Framer Motion ⭐ — animated component
    • react-spring — ?
    • anime.js — ?
    • Velocity.js — ?
  • Gesture and drag and dop library
  • Charting library
    • D3.js — ?
    • Vega — ?
  • Diagramming library
    • D2 — ?
      • Text to diagram — ?
    • MermaidJS — ?
    • PlantUML — ?
    • Graphviz — ?
  • 2D and 3D engine
    • Matter.js — 2D physics engine for the web
    • Three.js — JavaScript 3D Library based on WebGL
    • GreenSock — GSAP (GreenSock Animation Platform) — Professional-grade animation for the modern web
  • Parallax library — https://openbase.com/categories/js/best-react-parallax-libraries
    • react-parallax
    • simpleParallax.js — a JavaScript library for parallax effects
    • parallax.js — ?
  • Slide deck
    • slidev — Presentation Slides for Developers
    • Gamma — Write like a doc Present like a deck
  • Video creation
  • Keyboard shortcuts
    • kbar — command+k interface for your site
    • CommandBar ⭐⭐⭐ — ?
  • Maps
    • Mapbox
    • react-map-gl — Mapbox GL JS for React
  • Math typesetting
    • KaTeX — The fastest math typesetting library for the web
  • Files and images
    • Filepond — ?
    • Pintura Image Editor — ?
  • Slide or carousel
    • Swiper — The Most Modern Mobile Touch Slider or Carousel
  • Blockchain and web3
    • RainbowKit — ?
  • Others
    • react-device-detect — Detect device, and render view according to detected device type
    • react-responsive — CSS media queries in React for responsive design, and more

Frontend state management

  • Jotai — ?
  • Zustand — ?
  • Redux — ?
  • XState — ?
  • Recoil — ?

Frontend assets

  • Shottr — ?
  • CleanShot X — ?
  • Image optimizer
    • TinyPNG/TinyJPG ⭐⭐⭐⭐⭐ — Compress multiple WebP, PNG, and JPEG images intelligently
    • Squoosh ⭐⭐⭐ — Make images smaller using best-in-class codecs, right in the browser
  • Favicons
  • Open Peeps — Hand-Drawn Illustration Library
  • Descript — All-in-one audio/video editing, as easy as a doc.
  • Bannerbear — API for Automated Image and Video Generation
    • neg4n/next-api-og-image — ?
  • Senja — The #1 Tool to Collect, Manage & Share Testimonials

Backend Stack

Platforms and runtimes

  • Node.js ⭐⭐⭐⭐⭐ — ?
  • Deno ⭐⭐⭐⭐ — ?
  • Golang ⭐⭐⭐ — ?
  • Rust ⭐⭐ — ?

Backend/web server frameworks

  • Express.js ⭐⭐⭐⭐⭐ — ?
    • cors — ?
    • morgan — ?
  • Fastify ⭐⭐⭐ — ?
  • tinyhttp ⭐ — 0-legacy, tiny & fast web framework as a replacement of Express
  • NestJS ⭐ — ?
  • AdonisJS — ?
  • Hapi — ?
  • Fresh for Deno — ?

Web API

  • GraphQL ⭐⭐⭐⭐⭐ — ?
    • Internal GraphQL for most dynamic data management. Because even big techs are using it (Shopify, Github, Medium, Docker, Twitter, Airbnb, and Paypal)
    • GraphQL Code Generator ⭐ — ?
    • GraphCDN ⭐ — ?
    • Nexus GraphQL ⭐ — ?
    • Apollo GraphQL ⭐ — Supergraph to unify APIs, microservices, and databases in a composable graph. Unifies GraphQL across your apps and services, unlocking faster delivery for your engineering teams.
  • REST API ⭐⭐⭐ — ?
    • Still needed in case of an alternative or public API release
  • tRPC — ?
  • gRPC — ?
    • Only when there is a budget and performance issue
  • WebSocket — ?
    • Socket.io — ?
    • soketi — Simple, fast, and resilient open-source WebSockets server. 📣
    • LiveBlocks — ?
  • Client
    • Hoppscotch ⭐⭐⭐⭐⭐ — API client for REST API and GraphQL
    • Postman — ?
    • Insomnia — ?
    • Paw — The most advanced API tool for Mac

Backend as a Service (BaaS) and CMS

All in One

  • Airtable — ?
    • All purpose database
    • Form
    • CRM
    • ATS, Applicant Tracker

Simple Form

Backend with Auth

  • Firebase ⭐⭐ — ?
    • Rowy — Low-code backend on Google Cloud and Firebase. Instant Airtable-like UI for managing your database on your own cloud.
  • Supabase ⭐⭐⭐ — The Open Source Firebase Alternative
    • Dashibase ⭐⭐⭐ — No-code dashboards with Supabase
  • Nhost — ?
  • Strapi — ?
  • Kontenbase — Easily create backend API, auth, and storage in less than one minute without coding.
  • AWS Amplify — ?
  • Backendless — ?
  • back4app — ?

Notification

  • Novu — Notification management simplified

CMS with Rich Text Editing

  • Hygraph (aka GraphCMS) ⭐⭐⭐⭐⭐ — content management system in static assets
  • Grafbase
  • Payload CMS ⭐⭐⭐ — ?

Internal Tool

  • Retool — ?
  • ToolJet — ?
  • Budibase — ?
  • Basedash ⭐ — Collaborative Database Editing
  • Appsmith ⭐ — Build & self-host internal tools
  • Metabase — ?
    • The backend written in Clojure which contains a REST API

Database ORM

  • Prisma ORM ⭐⭐⭐ — ?
  • Sequelize — ?
  • TypeORM — ?
  • Bookshelf.js — ?
  • Knex.js — ?

Database Management System (DBMS)

  • MySQL ⭐⭐⭐⭐ — ?
    • MySQL on PlanetScale ⭐⭐⭐⭐⭐ — ?
  • PostgreSQL ⭐⭐⭐⭐ — ?
    • Postgres.app for Mac ⭐⭐⭐⭐⭐ — ?
    • PostgreSQL on Railway.app ⭐⭐⭐⭐⭐ — ?
    • PostgreSQL on Render ⭐⭐ — ?
  • Redis — ?
    • Redis on Upstash ⭐⭐⭐⭐ — ?
    • Redis on Railway.app ⭐⭐⭐ — ?
    • Redis on Render — ?
    • RedisInsight — ?
  • CockroachDB ⭐⭐⭐ — ?
  • MongoDB ⭐⭐⭐ — ?
    • Realm — ?
  • SurrealDB ⭐⭐ — ?
  • Snaplet — ?

Data Stream

  • Kafka — ?
    • Kafka on Upstash — ?
  • Fluvio — ?

Database Client

  • Arctype SQL Client — Free SQL Editor for Developers
  • TablePlus — ?
  • Medis — ?

Data Encryption

  • Argon2 ❤️⭐⭐⭐ — ?
  • Bcrypt ⭐⭐ — ?

Backend or Full Stack Hosting

  • Railway.app ⭐⭐⭐⭐⭐ — ?
  • Render.com ⭐⭐⭐ — Cloud Application Hosting for Developers
    • Need to check if compatible with Remix
  • Buddy.works — The easiest CI/CD. Ever. Buddy is the most effective way to build better apps faster. The DevOps Automation Platform
  • Fly.io — ?
  • Heroku — ?
  • Cyclic.sh — ?
  • Google Compute Engine — ?
  • Amazon EC2 — ?

Backend library

Backend storage for static assets

Includes object storage, block storage, file storage, archive storage, and data transport.

  • Images
    • Gravatar — ?
    • ImageKit ⭐ — ?
  • Videos
    • muse.ai ⭐ — The power of video made simple for you
    • VdoCipher — Secure Video Hosting for Business
    • bunny.net — The Content Delivery platform that truly Hops!
  • Anything
    • Cloudinary — ?
    • Google Cloud Storage — ?
    • Amazon S3 — ?
    • Azure Blob Storage — ?
    • Vultr Object Storage — ?
    • Linode Object Storage — ?
    • DigitalOcean Spaces — S3-Compatible Cloud Object Storage
    • Wasabi Cloud Storage — ?

Backend service

Especially for background process.

  • Temporal.io ⭐ — ?
  • Quirrel ⭐ — ?
  • EasyCron — ?
  • Healtchecks.io — ?
  • Dkron — ?
  • Privy.io — Simple APIs to manage user data off-chain

Test

General

  • Testing Playground — Simple and complete DOM testing playground that encourage good testing practices.

Unit and Functional

  • Vitest ⭐⭐⭐⭐ — ?
    • happy-dom — ?
  • Jest ⭐⭐⭐ — ?
    • Jest Preview — ?
  • React Testing Library ⭐⭐ — ?

Functional

  • Tomato ⭐ — ?

End to End

Utility

  • Mock Service Worker (MSW) ⭐⭐⭐⭐⭐ — ?
  • Falso ⭐⭐⭐⭐⭐ — ?
  • Faker ⭐⭐⭐ — ?

Services

Network

  • Cloudflare Registrar ⭐ — ?
    • Migrated from Uniregistry/GoDaddy
  • Cloudflare DNS ⭐ — ?

Payment and finance 💰

  • International
  • Singapore
    • HitPay — ?
    • Eway Singapore — ?
  • Malaysia
    • iPay88 — ?
    • Gkash — ?
  • Indonesia
    • Midtrans ⭐⭐⭐ — ?
    • Xendit ⭐⭐⭐ — ?
    • Durianpay ⭐⭐ — ?
    • Mayar ⭐ — ?

Payment revenue and subscription analysis

Subscription data platform and analytics.

  • MRR.io ❤️⭐⭐⭐ — Keep track of your Monthly Recurring Revenue
  • ChartMogul ⭐⭐⭐ — Subscription Analytics Platform
  • ProfitWell ⭐ — Subscription business financial metrics

Business management

  • Cushion — Forecasting for freelancers
  • Plutio — One app to run your business and get work done
  • Bloom.io ❤️⭐⭐⭐ — ?

Accounting and Invoice

  • Wave Accounting ❤️⭐⭐⭐ — ?
  • Xero — ?
  • FreshBooks — ?
  • QuickBooks — ?
  • invoicely — ?
  • Square Invoices — ?

Blog

  • Dev.to ⭐⭐⭐⭐ — ?
    • Forem — ?
  • Hashnode ⭐⭐⭐⭐ — ?
  • Ghost.org ⭐⭐⭐ — Turn your audience into a business
  • Medium ⭐⭐ — ?

Hiring

  • Homerun — Where hiring comes together

URL shortener

  • Rebrandly ⭐ — ?

CRM and chat support

  • Crisp ❤️⭐⭐⭐⭐⭐ — #1 Messaging Platform For Startups and SMBs
  • HubSpot ❤️⭐⭐⭐⭐ — Best Free CRM Software for Businesses
  • Chatwoot ⭐⭐⭐ — ?
  • Groove ⭐⭐⭐ — ?
  • Clay ⭐⭐⭐ — ?

Web and product analytics

  • Open source
    • Posthog ❤️⭐⭐⭐⭐ — Host your own product analytics
      • posthog-js, posthog-node
    • Pirsch ❤️⭐⭐⭐⭐— Cookie-Free and Privacy-Friendly Web Analytics
      • 30-day free trial, pirsch-sdk
    • Plausible ❤️⭐⭐⭐ — Simple, privacy-friendly Google Analytics alternative
      • 30-day free trial, plausible-tracker
    • Matomo ⭐⭐ — The Google Analytics alternative that protects your data
    • Umami ⭐ — simple. fast. beautiful. own your website analytics.
  • Closed source
    • Splitbee (Acquired by Vercel) ❤️⭐⭐⭐⭐ — Your all-in-one analytics and conversion platform
      • splitbee-js
    • Mixpanel ❤️⭐⭐⭐ — Product Analytics for Mobile, Web, & More
    • Simple Analytics ❤️⭐⭐⭐ — The privacy-first Google Analytics alternative
      • 14-day free trial
    • Fathom Analytics ❤️⭐⭐⭐ — Website analytics without compromise
      • 7-day free trial, fathom-client
    • Amplitude ⭐⭐⭐ — The Digital Optimization System
    • June.so ⭐⭐ — Product-Led Analytics
      • @june-so/analytics-next
    • Microsoft Clarify ⭐⭐ — Free Heatmaps & Session Recordings
    • Google Analytics ⭐⭐ — Analytics Tools & Solutions for Your Business
    • Hotjar ⭐ — Website Heatmaps & Behavior Analytics Tools
    • Fullstory ⭐ — Build a More Perfect Digital Experience
    • heatmap — Real-time analytics for your website

Internationalization

  • i18next ⭐⭐⭐⭐⭐ — ?

Feature toggle

  • Growthbook ❤️⭐⭐⭐ — ?
  • LaunchDarkly ⭐⭐⭐ — ?
  • flagged — ?

Monitoring, logging, error tracking, and replayer

  • Sentry ❤️⭐⭐⭐⭐ — ?
  • Axiom ❤️⭐⭐⭐⭐ — ?
  • Checkly — Delightful Active Monitoring for Developers
  • Highlight.run ⭐⭐⭐ — Reproduce end-to-end user sessions to better understand their application
  • Metronome.sh ⭐⭐⭐ — Insights tailored for Remix

Profiler and session replay

  • OpenReplay ⭐⭐⭐ — ?
  • LogRocket ⭐ — ?
  • Replay ⭐ — ?

Uptime monitoring and incident response:

  • Pulsetic ❤️⭐⭐⭐ — ?
  • Better Uptime ❤️⭐⭐⭐ — ?
  • Instatus ❤️⭐⭐⭐ — ?
  • Upptime ⭐ — Free uptime monitor and status page powered by GitHub
  • UptimeRobot — ?
  • Lightstep — ?

Infrastructure monitoring

  • DataDog ⭐ — ?
  • New Relic — ?

Log management and analysis:

Marketing and newsletter email

  • ConvertKit ❤️⭐⭐⭐⭐ — The creator marketing platform, especially for newsletter emails
  • Bento ⭐⭐⭐⭐ — All-in-one marketing automation platform. Marketing Tracking and Automation Platform For Ecommerce
  • CustomerIO ⭐⭐⭐ — Marketing Automation for the Whole Customer Lifecycle
  • SendStack ⭐⭐⭐ — Privacy-first newsletter platform
  • Loops.so ⭐⭐⭐ — Email made easy. Create, send and track beautiful email campaigns your users will love
  • Drip ⭐⭐⭐ — The Ecommerce Revenue Engine. Email and SMS marketing for growing ecommerce brands.
  • ActiveCampaign ⭐⭐⭐ — #1 Customer Experience Automation Platform
  • Intercom ⭐⭐⭐ — The Engagement OS. The modern customer communications platform that unifies every aspect of the customer journey, from conversion to engagement to support
  • HubSpot ⭐⭐⭐ — Inbound Marketing, Sales, and Service Software
  • Keap® ⭐⭐⭐ — fka Infusionsoft — CRM, Sales & Marketing Automation
  • GetResponse ⭐⭐⭐ — Get Started with a Free Marketing Platform
  • Klaviyo ⭐⭐ — Email Marketing & SMS Automation Platform
  • Buttondown ⭐⭐ — The easiest way to write your newsletter. Small, elegant tool for producing newsletters
  • MailerLite ⭐⭐ — Create Email Marketing Your Audience Will Love
  • Keila ⭐ — Open Source Email Newsletters Easy & Reliable
  • Revue ⭐ — Editorial newsletter tool for writers and publishers
  • MailChimp ⭐ — Marketing, Automation & Email Platform

Transactional email

  • Mailjet ❤️⭐⭐⭐⭐ — Email Delivery Service for Marketing & Developer Teams
  • Postmark ⭐⭐⭐ — Fast, Reliable Email Delivery Service, SMTP, API
  • DMARC Digests — DMARC Monitoring to Protect Your Email Deliverability and Combat Spoofing and Phishing
  • Amazon SES ⭐ — ?
  • Nodemailer ⭐ — ?
  • Sendgrid ⭐ — ?
  • Mailgun ⭐ — ?
  • SES ⭐ — ?
  • NodeMailer ⭐ — ?
  • Mandrill ⭐ — ?
  • Sendinblue ⭐ — ?
  • EmailJS ⭐ — ?
  • SparkPost ⭐ — ?

Containerization

  • Docker ⭐ — ?
  • Kubernetes — ?
    • Restack — Creating the next generation of open source developers

CI/CD

  • GitHub Actions ⭐⭐⭐ — ?
    • Meercode — ?
  • CodeFactor ⭐⭐⭐ — Automated Code Review for C#, C++, Java, CSS, JS, Go, Python, Ruby, TypeScript, Scala, CoffeeScript, Groovy, C, PHP, Dockerfile, Shell, YAML, HTML, Vue, Swift, Kotlin, PowerShell, Dart and R source code
  • Buddy Works — ?
  • Circle CI ⭐ — ?
  • Heroku CI — ?
  • Travis CI — ?
  • AppVeyor — ?

Dependency management

  • Depfu ⭐⭐⭐ — Automated dependency updates done right. More configurable than Dependabot
  • Snyk ⭐⭐⭐ — Security updates
  • AccessLint ⭐ — Automated and continuous web accessibility testing

Community network

  • Luma / Lu.ma ⭐⭐⭐⭐ — ?
  • Mighty Network ⭐⭐ — ?

Image editing

  • Ray.so — Create beautiful images of your code
  • BrandBird Studio — Easy, fast image editing for founders. Turn boring screenshot into beautiful sharable images

Video editing and sharing

  • ScreenFlow — ?
  • Screen Studio — ?
  • Loom — ?
  • Grain — Capture & Share Insights from Customer Meetings. The easiest meeting insights tool to understand and communicate the needs of your customers.
  • tl;dv — ?

Audio editing and sharing

  • Yac — ?

Shipping

  • Indonesia
    • Shipper — ?
    • Biteship — ?
    • Lalamove — ?

References

General

Remix

GraphQL

Security

Boilerplate

Workflow

Backlog

Company

  • Firstbase — Start and grow a US business from anywhere
  • Devyce — The modern business phone system.

Other stacks to evaluate

Related