Skip to content

Latest commit

 

History

13 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 

Repository files navigation

Web Tech Stack Handbook 2026

English | 한국어

A practical 2026 web development tech stack guide for solo builders—from frontend and backend to deployment, analytics, and operations.

This handbook organizes modern tools and services for building web products across frontend development, full-stack architecture, databases, deployment, and product operations.

Recommendations consider not only adoption in new projects, but also development speed, operational overhead, cost, and scalability.

How this handbook is organized

Tools that serve the same purpose are generally ordered by the following criteria. Download counts and cumulative user numbers are not the sole considerations; adoption trends and suitability for new projects take priority.

  1. Suitability for solo builders who need to ship and operate quickly
  2. Adoption and momentum in new projects
  3. Ecosystem maturity and maintenance stability
  4. Fit for specialized requirements or larger organizations
  5. Operationally heavy, experimental, or legacy status

Tools with different roles are not ranked directly against one another. Each list is reviewed regularly as the ecosystem changes.

Contents

Frontend

Core languages and standards

  • HTML: The standard markup language for web documents
  • CSS: The standard styling and layout language for the web
  • JavaScript: The standard programming language of browsers and web servers
  • TypeScript: JavaScript with static types and the default choice for many modern web projects
  • Web APIs: Standard browser APIs including DOM, Fetch, Storage, and Workers

UI frameworks and libraries

  • React: Component-based UI library
  • Vue: Progressive UI framework
  • Angular: Integrated framework with routing, forms, and dependency injection
    • RxJS: Reactive programming library for asynchronous event streams
    • ReactiveX: Repository Programming API and project introduction of language implementation
    • Learn RxJS: Learning materials describing RxJS operators and patterns
  • Svelte: Compiler-based UI framework
  • jQuery: DOM library primarily relevant to legacy applications

Full-stack and meta-frameworks

  • Next.js: Full-stack React framework
  • React Router: React routing and full-stack web framework
  • Nuxt: Full-stack Vue framework
  • SvelteKit: Full-stack Svelte framework
  • Astro: Multi-framework platform well suited to content-focused sites

Static site and documentation generators

Reference: Jamstack Generators

  • Docusaurus: React and MDX documentation generator
  • Hugo: Fast Go-based static site generator
  • Gatsby: Mature React and GraphQL static-site framework

Content and documentation

Headless CMS

Reference: Jamstack Headless CMS

  • Strapi: Open-source Node.js headless CMS
  • Sanity: SaaS CMS with custom schemas and real-time collaboration
  • Payload: Code-first TypeScript CMS with strong Next.js integration
  • Contentful: Enterprise-oriented SaaS CMS
  • Ghost: Publishing, blogging, and newsletter platform

Markdown and MDX

  • MDX: Markdown with embedded JSX components
  • MDXEditor: React-based WYSIWYG MDX Editor

Rich-text editors

  • Tiptap: Headless rich-text editor built on ProseMirror
  • Lexical: Extensible rich-text editor framework from Meta

Syntax highlighting

  • Shiki: Syntax highlighter using VS Code grammars and themes
  • Prism: Lightweight syntax-highlighting library for browsers

Diagrams and code images

  • Mermaid: Text-based diagrams and sequence charts
  • Carbon: Create a source code image

Documentation hosting

Feeds

Styling and UI

CSS frameworks

  • Tailwind CSS: Utility-first CSS framework with CSS-first configuration
  • Bootstrap: CSS framework with ready-made components

CSS preprocessors

  • Sass: CSS preprocessor

CSS-in-JS and build-time styling

Headless components

  • Radix UI: Accessible headless React components
  • Headless UI: Headless React and Vue components from Tailwind Labs
  • Base UI: Headless React components from the MUI team

Styled component libraries

  • shadcn/ui: Source-owned components built with Tailwind CSS and Radix UI or Base UI
  • Material UI: Material Design React component library
  • Ant Design: React UI system popular for admin and enterprise products
  • daisyUI: Component library implemented as a Tailwind CSS plugin
  • Angular Material: Material Design Components for Angular
  • PrimeNG: Angular UI component collection
  • spartan/ui: Angular and Tailwind CSS based UI component

Admin application frameworks

  • React-admin: React framework for data-driven admin applications
  • Refine: Headless React framework for admin screen and internal tools

Admin templates

Icons

Fonts

  • Google Fonts: Web font discovery and delivery service
  • Inter: Open source font optimized for screen and user interface

Animation

UI and component animation

  • Motion: UI animation library for React and JavaScript
  • AutoAnimate: A tool to automatically create layout changes

Timeline and scroll animation

  • GSAP: Timeline and scroll animation platform

Vector animation

  • Lottie: JSON-based vector animation format and renderer
  • LottieFiles: Lottie animation asset search, production and management platform
  • dotLottie: Stringing and compressing Lottie assets.lottie Scots Gaelic
  • @lottiefiles/dotlottie-react: latest dotLottie player for React

Number and text animation

Gestures

  • use-gesture: Touch, drag, pinch and scroll gesture hook for React
  • AlloyFinger: Lightweight multitouch gesture library that does not depend on the framework
  • Hammer.js: Established touch-gesture library primarily maintained for existing projects

Data tables

  • TanStack Table: Headless data-table library
  • AG Grid: Data grid for large datasets and enterprise requirements
  • MUI X Data Grid: Data Grid in MUI Ecosystem
  • DataTables: TypeScript-based standalone table library (v2 and below: jQuery center structure)

Hotkeys

Data and APIs

HTTP clients

  • Fetch API: Standard HTTP API in browsers and modern JavaScript runtimes
  • Axios: Promise-based HTTP client for browsers and Node.js
  • Ky: Lightweight client built on Fetch

Type-safe APIs

  • tRPC: End-to-end type-safe APIs for TypeScript

OpenAPI code generation

  • Orval: Generates TypeScript clients and types from OpenAPI
  • openapi-typescript: Generates TypeScript types from OpenAPI

GraphQL

  • GraphQL: Query language and execution specification for APIs
  • Apollo Client: GraphQL query, cache and status management library
  • urql: Expandable Lightweight GraphQL Client

Real-time communication

API mocking

  • MSW: Network-level API mocking

Forms

Schema validation

  • Zod: TypeScript-first schema validation
  • Valibot: Modular schema validation

Backend as a Service

  • Supabase: Open-source PostgreSQL-based backend platform
  • Firebase: Managed authentication, NoSQL database, and hosting platform

ORM and query builders

  • Prisma: Type-safe ORM for Node.js and TypeScript
  • Drizzle ORM: SQL-oriented TypeScript ORM
  • Kysely: Type-safe SQL query builder

Managed databases

  • Supabase Database: Manageable PostgreSQL with authentication and storage
  • Neon: Serverless PostgreSQL platform
  • Turso: Edge database platform based on libSQL
  • PlanetScale: Managed MySQL and PostgreSQL platform
  • Cloudflare D1: Serverless SQL database integrated with Cloudflare Workers

Object storage

  • Vercel Blob: Object storage for Vercel applications
  • Cloudflare R2: S3-compatible object storage without egress fees
  • Supabase Storage: Object Storage that can integrate Supabase Auth and Row Level Security
  • Amazon S3: General-purpose object storage

Backend and server

Do not separate the frontend and server from the outset; split them when product requirements justify it. Start ordinary CRUD and authentication inside a full-stack framework, then add a dedicated API server when the Python ecosystem, independent scaling, or complex domains require one.

Full-stack backends

TypeScript API frameworks

  • Hono: Lightweight, Web Standards-based framework for multiple runtimes
  • Fastify: Low-overhead Node.js web framework with a plugin architecture
  • NestJS: Structured Node.js framework for larger applications
  • Express: Mature Node.js web framework with a broad ecosystem

Python API frameworks

  • FastAPI: Python API framework built around type hints and OpenAPI
  • Django: Batteries-included Python web framework
  • Flask: Lightweight Python web framework

API design and reliability

  • REST: Universal HTTP API Design
  • Webhooks: An integrated way to receive events of external services to HTTP
  • Idempotency: The design principles of request to prevent duplicate processing even when revised
  • OpenAPI: Standard specification to document HTTP API and connect with tools

Background jobs and workflows

Use these tools for work that cannot reliably finish within a request, such as email delivery, webhook retries, scheduled synchronization, and AI processing. Solo operators should evaluate managed services before running queue workers themselves.

Managed jobs and durable workflows

  • Inngest: Event-driven background jobs with step-level retries
  • Trigger.dev: Long-running TypeScript jobs and scheduled tasks
  • Upstash Workflow: Durable workflows for serverless applications

Queues and message delivery

Scheduled jobs

Email and notifications

Transactional email

  • Resend: Developer-focused transactional email API
  • Postmark: Transactional email delivery and tracking
  • Amazon SES: AWS email delivery service for larger volumes

Email templates

  • React Email: Email templates built with React components

Marketing email

  • Buttondown: Newsletter service for individuals and small teams
  • Mailchimp: Audience management and marketing automation

Push notifications

Cache and application infrastructure

Managed cache and key-value storage

Common uses

  • Cache: Store slow or less expensive results
  • Rate limiting: Limiting requests in user, IP or API key units
  • Session storage: Save login status that multiple server instances share
  • Distributed locks: Fixed that multiple operations do not change resources at the same time

Search

If the data is not large or simple to search, it starts at PostgreSQL, and introduces a dedicated search engine when the Otta allowed·Faceting·related adjustment is important.

State management

Server state

  • TanStack Query: Async server-state fetching, caching, and synchronization
  • SWR: React data fetching and caching from Vercel

Client state

  • Zustand: Minimal React client-state management
  • Redux Toolkit: Official recommended approach to Redux applications
  • Jotai: Atomic React state management
  • Pinia: Official state library for Vue
  • NgRx: Angular state management using RxJS and Redux patterns
  • NGXS: Angular Status Management Framework
  • Recoil: React Status Management Library archived. Jeonju National University
  • Vuex: Vue 2 and existing Vue project reference status management library

Authentication

Application-owned authentication

  • Better Auth: TypeScript authentication and authorization framework
  • Auth.js: Established JavaScript authentication library maintained by the Better Auth team
  • SimpleWebAuthn: WebAuthn and passkey implementation toolkit
  • Lucia: deprecated authentication library. Jeonju National University

Managed authentication

  • Clerk: Managed authentication with strong React and Next.js support
  • Auth0: Managed authentication with enterprise capabilities
  • Kinde: Fast integration focused authentication platform

BaaS-integrated authentication

Passkey-first services

  • Corbado: Certificated Platform for Passkey Introduction and Conversion
  • Hanko: Open source platform with Passkey-first authentication

Token handling

  • jose: JWT, JWS, and JWE signing, verification, and encryption
  • jwt-decode: Client utility to decode JWT content. Not validation of signature or validity

Development tools

Code quality

  • ESLint: JavaScript and TypeScript static analysis with Flat Config
  • Prettier: Opinionated code formatter
  • Biome: Rust-based linter and formatter
  • Oxlint: High-performance JavaScript and TypeScript linter

JavaScript runtimes

  • Node.js: Mainstream JavaScript runtime for servers and tooling
  • Bun: Runtime, package manager, bundler, and test toolkit

Node.js version managers

  • fnm: Fast cross-platform Node.js version manager written in Rust, with support for .node-version and .nvmrc
  • mise: Cross-platform tool for managing project-specific versions of Node.js and other languages and development tools
  • Volta: Cross-platform tool that automatically selects project-specific Node.js, npm, Yarn, and JavaScript CLI versions
  • nvm: Widely used per-user, per-shell Node.js version management script for POSIX shells

Package managers

  • pnpm: Storage-efficient package manager with strong workspace support
  • npm: JavaScript Package Manager, included in Node.js
  • Yarn: Package Manager with Plug'n'Play and Workspace features

Python project tools

  • uv: Fast Python version, environment, dependency, and lockfile manager
  • Ruff: Python linter and formatter
  • Pyright: Python static type checker
  • Poetry: Python dependencies and packaging management tools

Build tools

  • Vite: Frontend build tool based on Rolldown and Oxc (v7 and earlier used esbuild and Rollup)
  • Turbopack: Rust-based bundler integrated with Next.js
  • Rspack: Rust-based bundler compatible with the Webpack ecosystem
  • Webpack: Mature bundler with a broad ecosystem
  • Rolldown: Rust-based bundler with Rollup compatibility
  • esbuild: Go-based high performance JavaScript bundler and converter
  • Rollup: Strong Burner for Library Packaging and ES Module Optimization

Monorepo tools

  • Turborepo: Build system for JavaScript and TypeScript monorepos
  • Nx: Multi-language monorepo platform
  • pnpm workspaces: pnpm built-in workspace function

Release automation

  • Changesets: Versioning and changelog management for monorepos
  • release-please: Conventional Commits-based Release PR Automation Tools

Component development

  • Storybook: Isolated UI component development, testing, and documentation
  • Bit: Platform for development and sharing of components

Tunneling

  • ngrok: Tunneling tool that exposes a local server through a public HTTPS URL for webhook, mobile-device, and external-collaborator testing

Testing

Unit and integration testing

  • Vitest: Test framework integrated with the Vite ecosystem
  • Jest: JavaScript and TypeScript test framework
  • pytest: Python test framework

Component testing

End-to-end testing

  • Playwright: Cross-browser end-to-end testing and automation
  • Cypress: End-to-end testing with an interactive developer experience

API and load testing

  • Bruno: Open-source, repository-friendly API client
  • Postman: API design, testing, and collaboration platform
  • k6: Code-driven load testing

Deployment and hosting

CI/CD automation

Containers

  • Docker: Container packaging and execution
  • Kubernetes: Open-source orchestration platform for automating the deployment, scaling, and operation of containerized applications

Serverless deployment

  • SST: AWS-based Full Stack and Serverless Application Development Tools
  • Serverless Framework: Serverless Application Distribution Framework

Frontend and full-stack platforms

Application and container platforms

  • Render: Backend, database, and full-stack application platform
  • Fly.io: Globally distributed container platform
  • Google Cloud Run: Serverless container runtime

Cloud infrastructure

Domain registrars

International

  • Cloudflare Registrar: Registrar of Registration, providing cost-based pricing and Cloudflare DNS integration
  • Porkbun: A registered organization that provides protection of WHOIS personal information with transparent prices and free
  • Namecheap: A registered organization that provides web services related to domain

South Korea

  • Gabia: Domain registration system convenient for domestic payment and proofing
  • Hosting.kr: Local domain registration and hosting services

DNS

Development DNS

  • DuckDNS: Free Dynamic DNS for development and personal projects
  • sslip.io: DNS for development that automatically interprets hostname with IP address
  • nip.io: Wildcard DNS for Local and Test Environment

DNS diagnostics

  • DNSChecker: Domain Name Search Engine Optimization
  • ICANN Lookup: Search Engine Optimization
  • who.is: Domain Registrar, Expiration Dates and Public WHOIS Information View Tool

Operations

In one operation, it is important that you can quickly discover obstacles than the number of tools and recover them in less steps. Before deploying, set the possession location and recovery procedure of the items below.

Secrets and configuration

  • Hosting platform environment variables: the simplest basic choice of small projects
  • Doppler: A platform that manages multiple environments and services secrets centrally
  • 1Password Secrets Automation: 1Password vault’s Secret to CI and Applications
  • Principle: Unpack Secret to the repository and client bundles, separate development·Preview·Production value and record the replacement procedure

Uptime and status

  • Better Stack Uptime: Uptime Monitoring, On-call and Status page service
  • UptimeRobot: Simple HTTP, Keyword and Port Monitoring Services
  • Checkly: Playwright-based Synthetic Monitoring and API check platform

Backups and recovery

  • Managed database for automatic backup and Point-in-time recovery
  • pg_dump: PostgreSQL logic backup tool
  • Database as well as Object storage, DNS, environment variables and external service settings also record
  • If you don’t want to create backups, check regularly to be a real Restore in a separate environment.

Feature flags

  • PostHog Feature Flags: Product analytics
  • Flags SDK: Feature flag standardization tool to connect multiple Providers with Next.js
  • Unleash: Open source feature management platform for self-hosting

Cost controls

  • Hosting, database, email, storage and set up a budget alert for AI providers
  • Use-based services consist of rate limit, monthly and more usage alerts
  • Preview Deployment and unused database·Story and log cleanup cycles

Quality, security, and observability

Performance

Web Vitals and performance audits

Bundle size and optimization

Accessibility

Security

Guides and browser security

Server and integration security

  • Distinguish authentication from authorization, and have the server verify permissions again for every data-changing operation
  • For cookie-based authentication, configure Secure, HttpOnly, and SameSite together with CSRF protection
  • CORS: Allow only the required origins, methods, and headers
  • Verify signatures on external webhooks for payments, authentication, and email, and use idempotency keys to prevent duplicate processing
  • Apply rate limits and input-size limits to public APIs and operations that incur costs

Dependencies and supply chain

  • Dependabot: Responsible security updates and vulnerability notifications
  • npm audit: npm Known Vulnerability Test
  • CI uses Lockfile and short-life Credential for minimum authority

Observability

  • Sentry: Error tracking and application performance monitoring
  • Vercel Observability: Vercel-native insights for requests, functions, errors, and usage
  • Grafana: Dashboards and alerting across metrics, logs, traces, and profiles
  • OpenTelemetry: Vendor-neutral logs, metrics, and traces
  • Web Vitals: Real-user Core Web Vitals measurement
  • Operation principle: Contains request ID and distribution version to log·Withdraw, User information and Secret does not record and set the storage period

Browser compatibility

  • web.dev Baseline: Web function support status standard between browsers
  • Browserslist: Configuring support browser range between tools
  • Can I Use: Web Platform features browser support status

Product integrations

SEO & GEO

Guides and standards

  • sitemaps.org: sitemap.xml protocol specification
  • JSON-LD: Search engines and AI tools to help understand the structure and meaning of content
  • robots.txt: Standards for searching and setting access policies of AI crawlers
  • Google Search Central: Google’s Official Search Optimization Document
  • The Beginner's Guide to SEO: Mozart's comprehensive SEO guide
  • llms.txt: AI agent is a proposition standard that spreads to read site information easily.

Frameworks and libraries

  • Next.js Metadata API: Basic metadata and Open Graph management of App Router
  • next-seo: Auxiliary library that manages metadata and Open Graph settings in the existing Next.js project
  • next-sitemap: Sitemap.xml and robots.txt creation tools for Next.js
  • schema-dts: TypeScript for Schema.org JSON-LD

Search engine consoles

AI crawler monitoring

Debuggers

Analytics

Web analytics

  • Google Analytics: Traffic and Conversion Analysis Services for Web and App
    • GA Dev Tools: Google Analytics Demo and Debugging Utilities
  • Plausible: Lightweight, privacy-focused web analytics service
  • Statcounter: Live visitors and traffic statistics services

Product analytics

  • Amplitude: Cohort, Foundation and user behavior analysis platform
  • Mixpanel: Event-based product analytics platform
  • PostHog: Open source platform that provides analysis, session playback and function flags

Heatmaps and session replay

  • Microsoft Clarity: Free session playback and hit map service
  • Hotjar: Session playback, hitmap and user feedback tools

Tag management

Attribution and marketing pixels

  • Airbridge: Web and App Marketing Contribution Measurement Platform
  • Meta Pixel: Meta advertising conversion measurement and retargeting tools
  • Kakao Pixel & SDK: Kakao advertising conversion and user behavior measurement tools

Consent and privacy

  • Google Consent Mode: How to reflect the user’s consent status to Google tag operation
  • Klaro: Open Source Consent manager that can self-host
  • Cookiebot: Cookie Scan and Consent banner
  • Principle: Write a privacy policy appropriate to the service regions and collected data, and do not run unnecessary analytics or advertising scripts before consent

Payments and monetization

Global payments

  • Stripe: Automated TrackingAnalyticsNotificationsTrack ButtonApps & Plugins
    • Link: One-click payment service provided by Stripe
  • PayPal: Global online payment and digital wallet service

Korean payments

  • Toss Payments: PG service providing domestic payment API and payment UI
  • PortOne: Payments with multiple PGs to connect with a single API
  • KG Inicis: LOGIN JOIN
  • NHN KCP: Korean online and offline electronic payment service

Subscriptions and Merchant of Record

  • Paddle: Merchant of Record providing SaaS payment, subscription, tax processing
  • Lemon Squeezy: Payment for digital products and SaaS and Merchant of Record
  • RevenueCat: Mobile App and Web Subscription Management Platform

Sponsorship

  • GitHub Sponsors: Open Source Developer Sponsorship Platform
  • Patreon: Recurring membership and creator sponsorship platform
  • Buy Me a Coffee: One-time and recurring support service for creators
  • Ko-fi: Support, membership and digital products sales service

Advertising

Web ad networks

  • Google AdSense: Google Ad Revenue Platform for Websites
  • kakaoAdFit: Kakao’s domestic web and app advertising platform
  • Taboola: Content-recommendation-based native advertising platform
  • Outbrain: Content-recommendation-based native advertising platform

In-app ad networks

Affiliate and commerce ads

Ad infrastructure

Maps and location

Commercial map platforms

Vector and open-source maps

  • Mapbox: Custom vector maps and location services platform
  • Leaflet: Lightweight 2D map library commonly used with open map tiles
  • OpenLayers: Open-source map library supporting vector tiles and a wide range of geospatial data formats

Geospatial visualization

  • deck.gl: WebGL-based framework for large-scale geospatial visualization

Data visualization

Charts

  • Chart.js: Easy to use Canvas-based Chart Library
  • Recharts: React component-based chart library
  • Apache ECharts: A library that supports various charts and large data renderings
  • D3: Low level library for data-based custom visualization
  • Plotly: A strong interactive chart library of science and science and 3D visualization
  • AG Charts: © 2020 Sennheiser electronic GmbH & Co. KG Germany

Graphics

  • Three.js: WebGL Library for Web 3D Graphics
  • PixiJS: High Performance 2D WebGL Rendering Engine

Cross-platform development

  • React Native: Native application framework based on React
  • Flutter: Dart-based multi-platform UI framework
  • Ionic: Cross-platform application framework built on web technologies and WebView

Developer services

  • CodePen: A browser-based editor for creating front-end examples and sharing
  • JSFiddle: Online editor to run and share HTML, CSS and JavaScript
  • Transform for developer data and code conversion
  • Bitly for short URLs
  • Lorem Picsum for placeholder images

AI development

  • AI SDK: TypeScript toolkit for AI applications and agents
  • LM Studio: Local AI model runtime
  • Hugging Face: Community for models, datasets, and AI applications
  • OpenRouter: Unified API platform for multiple AI models

Git and releases

Version control

  • Git: Decentralized Version Management System
  • Git Cheat Sheet: Summary of Git commands often used

Branching workflows

Versioning and commit conventions

README badges

  • Shields.io: Create a badge for displaying repositories and project status
  • Badgen: Fast and concise SVG badge creation service
  • Markdown Badges: Curated collection of Markdown badges for developer profiles and projects

Created by

This handbook is created and maintained by Dokkaebi Club.

License

Copyright © 2026 Lee Jihye. This work is licensed under the Creative Commons Attribution 4.0 International License.

About

A curated 2026 web tech stack handbook for solo builders.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Contributors