# WWADD — What Would A Dev Do? > A free reference for web developers: what each tool is for, copy-ready "moves" (snippets with short explanations), and stack playbooks that say when to use a combination, how the pieces fit, sourced real-world examples, and when to skip it. Content is editorial and opinionated. Playbook examples link to public sources; tool licenses are stated precisely (e.g. SSPL is marked source-available, not open source). Every tool, stack, comparison, and move page also exists as plain Markdown at the same URL plus `.md` (for example `/tools/supabase.md`). Editorial text is CC BY 4.0 (attribute WWADD and link the page) and code snippets in moves are CC0; see https://wwadd.dev/terms. Full content in one file: https://wwadd.dev/llms-full.txt ## Stack playbooks - [Stack picker](https://wwadd.dev/stacks/pick): answer a few questions about what you're building and get a recommended playbook, or an honest "no clear winner" - [Vite + React + Supabase + Vercel](https://wwadd.dev/stacks/vite-react-supabase-vercel): A short path from idea to a real product with auth, a database, and a public URL. - [Next.js + Postgres + Prisma + Vercel](https://wwadd.dev/stacks/nextjs-postgres-prisma-vercel): The default choice when you need SEO, server rendering, and typed database access in one codebase. - [Astro + Markdown + CDN](https://wwadd.dev/stacks/astro-markdown-cdn): Content sites that stay fast because there is almost no JavaScript to ship. - [WordPress + managed hosting](https://wwadd.dev/stacks/wordpress-managed-hosting): Hard to beat when non-developers must publish daily and the budget favors plugins over engineers. - [React Native + Expo](https://wwadd.dev/stacks/react-native-expo): One TypeScript codebase for iOS and Android when the app is mostly screens, lists, and forms. - [Turborepo + pnpm + shared UI package](https://wwadd.dev/stacks/turborepo-pnpm-shared-ui): For teams running several apps that must look and behave like one product. - [Tauri + React + SQLite](https://wwadd.dev/stacks/tauri-react-sqlite): Small, fast desktop apps built with web skills, with data stored on the user's machine. - [FastAPI + Postgres + SQLAlchemy](https://wwadd.dev/stacks/fastapi-postgres-sqlalchemy): A typed Python API for when your data work, ML models, or team already live in Python. - [Phaser + TypeScript + Vite](https://wwadd.dev/stacks/phaser-typescript-vite): 2D games that load instantly in a browser tab — and can still ship to Steam. - [Godot + GDScript](https://wwadd.dev/stacks/godot-gdscript): A royalty-free engine for indie games headed to Steam, mobile, or consoles. - [B2B SaaS (organizations / multi-tenant): Next.js + Postgres + Better Auth](https://wwadd.dev/stacks/b2b-saas-nextjs-postgres-better-auth): Organizations / multi-tenant apps where your customers are companies: one shared database, per-org data, roles, and SSO. - [TypeScript API service: NestJS + Postgres + Prisma](https://wwadd.dev/stacks/nestjs-postgres-prisma-api): A standalone TypeScript API that several clients depend on — mobile apps, partners, other services — with a validated contract and generated docs. - [Collaborative editing (local-first): Yjs + Hocuspocus + Tiptap + Postgres](https://wwadd.dev/stacks/collaborative-yjs-hocuspocus-postgres): Documents and boards several people edit at once — changes merge automatically, survive going offline, and persist to Postgres. - [3D web game: Three.js + Rapier + Vite](https://wwadd.dev/stacks/threejs-rapier-vite-3d-web-game): 3D games and explorable worlds that run in a browser tab — a link instead of an install. - [Desktop app: Electron + React + Vite](https://wwadd.dev/stacks/electron-react-vite): Desktop apps that must look and behave the same on every OS — bundled Chromium, a React UI, and Node.js behind a narrow bridge. ## Comparisons - [Prisma vs Drizzle](https://wwadd.dev/compare/prisma-vs-drizzle): Both give you type-safe database access in TypeScript. - [Supabase vs Firebase](https://wwadd.dev/compare/supabase-vs-firebase): Both bundle a database, auth, storage, and realtime behind one SDK. - [Node.js vs Bun](https://wwadd.dev/compare/nodejs-vs-bun): Both run JavaScript and TypeScript on the server. - [Pinecone vs Qdrant](https://wwadd.dev/compare/pinecone-vs-qdrant): Both store embeddings and run similarity search for RAG and semantic search. - [Radix UI vs Headless UI](https://wwadd.dev/compare/radix-ui-vs-headless-ui): Both are unstyled, accessible component primitives that handle focus, keyboard navigation, and ARIA while you bring the styles. - [Phaser vs PixiJS](https://wwadd.dev/compare/phaser-vs-pixijs): Both draw 2D graphics in the browser with WebGL. - [Godot vs Unity](https://wwadd.dev/compare/godot-vs-unity): Both are full 2D/3D engines with editors that export to desktop, mobile, and consoles. - [Unity vs Unreal Engine](https://wwadd.dev/compare/unity-vs-unreal-engine): The two biggest commercial engines. - [Tauri vs Electron](https://wwadd.dev/compare/tauri-vs-electron): Both turn a web frontend into a desktop app. ## Tools: Languages & runtimes - [TypeScript](https://wwadd.dev/tools/typescript): Typed superset of JavaScript. Adds static types and interfaces to JavaScript, then compiles away to plain JS. - [Rust](https://wwadd.dev/tools/rust): Memory-safe systems language. A compiled systems language that guarantees memory safety at compile time without a garbage collector. - [React](https://wwadd.dev/tools/react): Component-based UI library. Meta's library for building UIs from components written in JSX. - [Tauri](https://wwadd.dev/tools/tauri): Cross-platform desktop framework. Builds desktop (and mobile) apps from a web frontend plus a Rust backend. - [Node.js](https://wwadd.dev/tools/nodejs): JavaScript runtime. The server-side JavaScript runtime that most of the web tooling ecosystem is built on. - [Bun](https://wwadd.dev/tools/bun): All-in-one JavaScript runtime. A JavaScript runtime that also ships a package manager, bundler, and test runner in one binary. - [Python](https://wwadd.dev/tools/python): Interpreted general-purpose language. A readable, batteries-included language that dominates data work and machine learning. - [Vue.js](https://wwadd.dev/tools/vue): Progressive frontend framework. A frontend framework built around single-file components (`.vue`) and built-in reactivity. - [Svelte / SvelteKit](https://wwadd.dev/tools/svelte): Compiled UI framework. Svelte compiles components into small imperative JavaScript at build time instead of shipping a virtual-DOM runtime. - [Next.js](https://wwadd.dev/tools/nextjs): React meta-framework. The most widely used React framework, maintained by Vercel. - [C# / .NET](https://wwadd.dev/tools/dotnet): Compiled object-oriented platform. Microsoft's cross-platform runtime and C# language, open source and running on Windows, macOS, and Linux. - [Astro](https://wwadd.dev/tools/astro): Content-first web framework. Renders pages to HTML at build or request time and ships no JavaScript unless a component opts in as an interactive island. - [React Native](https://wwadd.dev/tools/react-native): Native mobile UI from React. Meta's framework for building iOS and Android apps with React. - [Expo](https://wwadd.dev/tools/expo): React Native framework and cloud services. The framework layer on top of React Native: an SDK of device APIs, file-based routing with Expo Router, and EAS cloud services that build, submit, and update apps without local Xcode or Android Studio setup. - [Electron](https://wwadd.dev/tools/electron): Desktop apps from web tech. Bundles Chromium and Node.js so a web app runs as a desktop app with full system access. - [FastAPI](https://wwadd.dev/tools/fastapi): Python web framework for APIs. Builds HTTP APIs from Python type hints: requests are validated automatically, and an OpenAPI schema with interactive docs is generated for free. - [NestJS](https://wwadd.dev/tools/nestjs): Structured Node.js server framework. A TypeScript framework for server-side apps built from modules, controllers, and providers wired by dependency injection. - [Fastify](https://wwadd.dev/tools/fastify): Fast Node.js web framework. A low-overhead Node.js web framework with JSON Schema validation and serialization built in, and a plugin system for everything else. - [Hono](https://wwadd.dev/tools/hono): Web-standards web framework. A small web framework built on the standard Request and Response APIs, so the same code runs on Cloudflare Workers, Bun, Deno, Node.js, and serverless platforms. ## Tools: Databases & backends - [Supabase](https://wwadd.dev/tools/supabase): Postgres backend-as-a-service. A hosted Postgres database bundled with auth, storage, realtime subscriptions, edge functions, and auto-generated APIs. - [PostgreSQL](https://wwadd.dev/tools/postgresql): Relational SQL database. A mature, standards-compliant relational database with strong JSON support and a large extension ecosystem, including PostGIS for geospatial data and pgvector for embeddings. - [SQLite](https://wwadd.dev/tools/sqlite): Embedded single-file database. A full SQL database that lives in one file inside your application, with no server to run. - [Firebase](https://wwadd.dev/tools/firebase): Document backend-as-a-service. Google's app platform: Firestore document database, auth, hosting, cloud functions, analytics, and push messaging. - [Redis](https://wwadd.dev/tools/redis): In-memory key-value store. An in-memory data structure store used as a cache, session store, rate limiter, queue, and pub/sub broker. - [MongoDB](https://wwadd.dev/tools/mongodb): Document database. Stores JSON-like documents with flexible schemas and scales horizontally with sharding. - [Prisma](https://wwadd.dev/tools/prisma): TypeScript ORM. Define your schema in one file and Prisma generates a fully typed client plus migrations. - [Drizzle](https://wwadd.dev/tools/drizzle): TypeScript SQL query builder. A lightweight ORM whose query API mirrors SQL, with schemas written in TypeScript. - [Pinecone](https://wwadd.dev/tools/pinecone): Managed vector database. A fully hosted vector database for storing and searching embeddings. - [Qdrant](https://wwadd.dev/tools/qdrant): Vector search engine. An open-source vector database written in Rust, with payload filtering alongside similarity search. - [DuckDB](https://wwadd.dev/tools/duckdb): Embedded analytical database. A columnar SQL engine that runs in-process, like SQLite but built for analytics. - [Better Auth](https://wwadd.dev/tools/better-auth): TypeScript auth library. Framework-agnostic authentication for TypeScript: email and password, OAuth providers, sessions, and plugins for two-factor, passkeys, and organizations — stored in your own database. - [SQLAlchemy](https://wwadd.dev/tools/sqlalchemy): Python SQL toolkit and ORM. Python's standard database toolkit: a Core layer for composing SQL and an ORM for mapping classes to tables. - [Alembic](https://wwadd.dev/tools/alembic): Database migrations for SQLAlchemy. Versioned schema migrations for SQLAlchemy projects. - [Pydantic](https://wwadd.dev/tools/pydantic): Python data validation. Validates and parses data using Python type hints. - [Yjs](https://wwadd.dev/tools/yjs): CRDT library for shared data. Represents shared documents as CRDTs, so edits from any number of clients merge automatically without conflicts or a central lock. - [Hocuspocus](https://wwadd.dev/tools/hocuspocus): Collaboration server for Yjs. A WebSocket server for Yjs documents from the Tiptap team. ## Tools: Dashboards & UI kits - [Tabler](https://wwadd.dev/tools/tabler): Admin dashboard template. A polished, MIT-licensed dashboard template built on Bootstrap 5, with hundreds of responsive components, an icon set, and dark mode. - [CoreUI](https://wwadd.dev/tools/coreui): Admin dashboard system. An admin template with native versions for React, Vue, Angular, and plain Bootstrap. - [AdminLTE](https://wwadd.dev/tools/adminlte): Admin dashboard template. One of the longest-running open-source admin templates. - [Metronic](https://wwadd.dev/tools/metronic): Commercial admin theme. A large paid theme with dozens of prebuilt app layouts, data tables, and integrations across React, Angular, Vue, Laravel, and more. - [Horizon UI](https://wwadd.dev/tools/horizon-ui): Admin dashboard template. A modern dashboard template for React and Next.js with Tailwind CSS and Chakra UI versions, strong default dark mode, and chart-heavy widgets. - [TailAdmin](https://wwadd.dev/tools/tailadmin): Admin dashboard template. A Tailwind CSS admin dashboard with free open-source editions for React, Next.js, Vue, and plain HTML, plus a paid Pro tier. ## Tools: CSS & component libraries - [shadcn/ui](https://wwadd.dev/tools/shadcn-ui): Copy-into-your-repo components. Not a package you install but a set of React components you copy into your project with a CLI, built on accessible primitives and Tailwind. - [Tailwind CSS](https://wwadd.dev/tools/tailwind-css): Utility-first CSS framework. Style directly in markup with small single-purpose classes like `flex`, `px-4`, and `rounded-lg`. - [DaisyUI](https://wwadd.dev/tools/daisyui): Tailwind component plugin. A Tailwind plugin that adds semantic component classes like `btn`, `card`, and `navbar`, plus themes. - [Mantine](https://wwadd.dev/tools/mantine): React component library. A batteries-included React library with 100+ components, a hooks package, form management, modals, notifications, and dark mode built in. - [Ant Design](https://wwadd.dev/tools/ant-design): Enterprise React design system. A design system from Ant Group aimed at data-heavy business software, with especially capable tables, trees, filters, and forms. - [Flowbite](https://wwadd.dev/tools/flowbite): Tailwind component library. Interactive Tailwind components (dropdowns, modals, navbars, datepickers) with vanilla JS plus React, Vue, and Svelte bindings. - [Radix UI](https://wwadd.dev/tools/radix-ui): Headless accessible primitives. Unstyled React primitives (dialogs, dropdowns, popovers, tabs) that handle focus management, keyboard navigation, and ARIA for you. - [Headless UI](https://wwadd.dev/tools/headless-ui): Headless accessible components. Tailwind Labs' set of unstyled, accessible components for React and Vue, designed to pair with Tailwind classes. - [Vuetify](https://wwadd.dev/tools/vuetify): Vue component framework. A complete Material Design component framework for Vue, with a broad set of layout and form components. - [Tiptap](https://wwadd.dev/tools/tiptap): Headless rich-text editor. A headless rich-text editor framework built on ProseMirror, for React, Vue, and plain JavaScript. ## Tools: Dev tooling & AI - [Vite](https://wwadd.dev/tools/vite): Frontend build tool and dev server. Serves source files as native ES modules during development, so the dev server starts almost instantly and hot module replacement stays fast as the project grows. - [Claude Code](https://wwadd.dev/tools/claude-code): AI coding agent. Anthropic's agentic coding tool. - [Codex](https://wwadd.dev/tools/codex): AI coding agent. OpenAI's coding agent, available as an open-source CLI and as a cloud agent that works on tasks in parallel sandboxes. - [REST](https://wwadd.dev/tools/rest): API architectural style. Resources addressed by URLs and manipulated with standard HTTP methods and status codes. - [GraphQL](https://wwadd.dev/tools/graphql): API query language. Clients send a query describing exactly the fields they need and get back that shape in one request, from a single typed endpoint. - [Docker](https://wwadd.dev/tools/docker): Container platform. Packages an app with its dependencies and configuration into a container image that runs the same on a laptop, CI, and production. - [pnpm](https://wwadd.dev/tools/pnpm): JavaScript package manager. A package manager that stores each package version once on disk and links it into projects, making installs fast and space-efficient. - [Turborepo](https://wwadd.dev/tools/turborepo): Monorepo build system. Runs tasks across a JavaScript monorepo in dependency order and caches the results by content hash, so unchanged packages are skipped locally and in CI. - [Changesets](https://wwadd.dev/tools/changesets): Versioning and changelogs. Contributors add small changeset files describing what changed and how big the change is; Changesets turns them into version bumps and changelog entries across every package in a monorepo. - [electron-builder](https://wwadd.dev/tools/electron-builder): Electron packaging and updates. Packages an Electron app into installers for Windows, macOS, and Linux, handles code signing and macOS notarization, and pairs with electron-updater for auto-updates. ## Tools: Hosting & content platforms - [Vercel](https://wwadd.dev/tools/vercel): Frontend cloud platform. Git-connected hosting for frontend frameworks: every push gets a preview URL, production deploys on merge, and server-side code runs as functions. - [Cloudflare Workers](https://wwadd.dev/tools/cloudflare-workers): Edge compute and static hosting. Runs JavaScript and WebAssembly on Cloudflare's network close to users, and now serves static assets too — so one Worker can host a full site. - [Netlify](https://wwadd.dev/tools/netlify): Web hosting platform. Git-based hosting with deploy previews, serverless and edge functions, forms, and a global CDN. - [WordPress](https://wwadd.dev/tools/wordpress): Open-source CMS. The PHP content management system behind a large share of the web: drafts, roles, revisions, a media library, and the block editor, extended by thousands of plugins and themes. - [WooCommerce](https://wwadd.dev/tools/woocommerce): E-commerce plugin for WordPress. Turns a WordPress site into a store: products, carts, checkout, payments, and orders, managed from the same admin as the content. ## Tools: Game development - [Three.js](https://wwadd.dev/tools/threejs): 3D rendering library. The most widely used JavaScript 3D library: scenes, cameras, lights, materials, and loaders over WebGL, with a WebGPU renderer alongside. - [React Three Fiber](https://wwadd.dev/tools/react-three-fiber): React renderer for Three.js. Write Three.js scenes as declarative React components. - [Babylon.js](https://wwadd.dev/tools/babylonjs): 3D web engine. A full 3D engine started at Microsoft, with physics, a scene inspector, PBR lighting, WebXR, and WebGPU support built in. - [PlayCanvas](https://wwadd.dev/tools/playcanvas): 3D game engine and editor. A WebGL/WebGPU game engine with a collaborative, browser-based visual editor. - [Phaser](https://wwadd.dev/tools/phaser): 2D game framework. A full 2D framework for browser games: scenes, sprites, tilemaps, input, audio, cameras, and built-in physics. - [PixiJS](https://wwadd.dev/tools/pixijs): 2D rendering engine. A fast 2D renderer for WebGL and WebGPU. - [Kaplay](https://wwadd.dev/tools/kaplay): Beginner-friendly 2D library. A small, fun-first JavaScript game library with a component-based API that gets a playable game on screen in a few lines. - [Godot](https://wwadd.dev/tools/godot): Full game engine. A complete, MIT-licensed 2D and 3D engine with its own editor and scripting language (GDScript), plus C#. - [Unity](https://wwadd.dev/tools/unity): Cross-platform game engine. A widely used commercial engine for 2D and 3D games, scripted in C#, with a large asset store and export to desktop, mobile, consoles, and the web. - [Unreal Engine](https://wwadd.dev/tools/unreal-engine): High-end 3D game engine. Epic's engine for high-fidelity 3D, with C++ and Blueprints visual scripting, and built-in rendering features like Nanite geometry and Lumen lighting. - [Rapier](https://wwadd.dev/tools/rapier): Physics engine. A 2D and 3D physics engine written in Rust and shipped to JavaScript as WebAssembly. - [Tiled](https://wwadd.dev/tools/tiled): Tilemap level editor. A free desktop editor for tile-based levels. - [Kenney](https://wwadd.dev/tools/kenney): Free game asset library. Thousands of CC0 2D sprites, 3D models, UI elements, and sound effects you can use in any project, commercial included, without attribution. ## Tools: AI agent skills - [Agent Skills (the format)](https://wwadd.dev/tools/agent-skills): Open standard for agent skills. A skill is a folder with a SKILL.md file — a name, a description, and instructions — plus optional scripts and reference docs. - [Impeccable](https://wwadd.dev/tools/impeccable): Design direction and critique skill. A design skill that pushes coding agents away from generic, templated UI. - [frontend-design](https://wwadd.dev/tools/frontend-design-skill): Aesthetic direction skill. Anthropic's Claude Code plugin skill for new UI work: the agent commits to a clear aesthetic direction — typography, layout, color — before writing code, instead of reaching for template defaults. - [make-interfaces-feel-better](https://wwadd.dev/tools/make-interfaces-feel-better): Design-engineering polish skill. Jakub Krehel's skill for the small details that make an interface feel finished: press feedback on buttons, balanced text wrapping, concentric border radii, shadows, hit areas, icon alignment, and restrained enter/exit animation. - [Web Design Guidelines](https://wwadd.dev/tools/web-design-guidelines): UI review skill. Vercel's skill that reviews UI code against its Web Interface Guidelines — 100+ rules across accessibility, performance, and UX — fetching the latest rules before each run and reporting findings as file:line. - [Accessibility Review](https://wwadd.dev/tools/accessibility-review): Accessibility audit skill. Part of Anthropic's open-source design plugin: runs a WCAG 2.1 AA audit on a design or page, covering color contrast, keyboard navigation, touch target size, and screen reader behavior. - [Figma Generate Library](https://wwadd.dev/tools/figma-generate-library): Design-system skill. One of Figma's official MCP skills: builds or updates a Figma component library from your codebase in phases — audit what exists, create token collections, build component pages, then run a quality check. ## Moves: CSS - [Center anything](https://wwadd.dev/moves/css/center-anything): Flexbox is the shortest path to both-axis centering. - [Flexbox essentials](https://wwadd.dev/moves/css/flexbox-essentials): Flex works on one axis at a time. - [Grid essentials](https://wwadd.dev/moves/css/grid-essentials): Grid is two-dimensional. - [Truncate and clamp text](https://wwadd.dev/moves/css/truncate-text): Single-line truncation needs `overflow`, `white-space`, and `text-overflow` together. - [Sticky header that actually sticks](https://wwadd.dev/moves/css/sticky-header): `position: sticky` fails silently when an ancestor has `overflow: hidden`/`auto`, or when no offset is set. ## Moves: JavaScript - [Array methods you reach for](https://wwadd.dev/moves/javascript/array-methods): `map` transforms, `filter` narrows, `reduce` folds. - [fetch JSON with error handling](https://wwadd.dev/moves/javascript/fetch-json): `fetch` only rejects on network failure — a 404 or 500 still resolves. - [Promises and async patterns](https://wwadd.dev/moves/javascript/promises): Run independent work in parallel with `Promise.all`. - [localStorage without the footguns](https://wwadd.dev/moves/javascript/localstorage): localStorage stores strings only, is synchronous, and throws in private mode or when full. - [Debounce and throttle](https://wwadd.dev/moves/javascript/debounce-throttle): Debounce waits until the noise stops (search inputs). ## Moves: Git / HTTP - [Git commands for daily work](https://wwadd.dev/moves/git-http/git-daily): Ninety percent of git use is this handful of commands. - [Undoing things in git](https://wwadd.dev/moves/git-http/git-undo): Pick by blast radius: `restore` for files, `reset --soft` to re-do a commit message, `revert` for anything already pushed, `reflog` when you think work is gone. - [HTTP status codes worth memorizing](https://wwadd.dev/moves/git-http/status-codes): 2xx succeeded, 3xx go elsewhere, 4xx the caller is wrong, 5xx the server is wrong. - [REST basics](https://wwadd.dev/moves/git-http/rest-basics): Nouns in the path, verbs in the method. - [HTTP headers that matter](https://wwadd.dev/moves/git-http/http-headers): Caching and content negotiation live in headers. ## Moves: Game dev - [Fixed-timestep game loop](https://wwadd.dev/moves/game-dev/fixed-timestep-loop): Run physics in fixed steps and render as often as the screen allows. - [Frame-rate independent movement](https://wwadd.dev/moves/game-dev/delta-time-movement): Speeds should be per second, not per frame. - [Keyboard input without stuck keys](https://wwadd.dev/moves/game-dev/keyboard-input-state): Track which keys are held in a Set and read it during update, instead of moving things inside event handlers. - [Box collision (AABB)](https://wwadd.dev/moves/game-dev/aabb-collision): Axis-aligned bounding boxes are the cheapest useful collision check: two rectangles overlap unless one is fully to the side of, above, or below the other. - [Sprite sheet animation on canvas](https://wwadd.dev/moves/game-dev/sprite-sheet-animation): Pack animation frames side by side in one image and draw one slice at a time with the 9-argument `drawImage`. - [Crisp pixel-art scaling](https://wwadd.dev/moves/game-dev/pixel-art-scaling): Render at the game's native low resolution, then scale the canvas up with CSS. ## Optional - [About WWADD](https://wwadd.dev/about): what the name means and the content philosophy - [Terms of use](https://wwadd.dev/terms): licenses (CC BY 4.0 text, CC0 snippets) and how to attribute - [Contact](https://wwadd.dev/contact): corrections and questions