# Web app architecture examples

Interactive architecture diagrams of 663 open-source repositories with a GitDiagram architecture diagram where the diagram has a web interface: a web UI, frontend or dashboard, most stars first. Each diagram shows the project's main components, how they connect, and links every part to its file on GitHub.

Across the 200 most-starred web apps here, the median diagram has 21 components. 70% draw a data store (most often PostgreSQL, SQLite and files on disk), 29% have a command-line interface and 100% a web interface.

24% have an LLM or AI-model component, 18% speak MCP, 21% have a plugin or extension system, 22% are split into workspace packages (packages/, apps/, crates/ and similar) and 12% draw a queue or event bus.

The files their components link to most are index.ts (22), App.tsx (19), main.py (19), app.py (15) and index.js (15).

Group names that recur: “user interfaces” (27), “platform services” (9), “user experience” (9), “integrations” (8) and “external integrations” (6).

By language: Python 28%, TypeScript 26%, Go 11%, Rust 10% and JavaScript 8%.

## Repositories 1 to 50 of 663

1. [kamranahmedse/developer-roadmap](https://gitdiagram.com/kamranahmedse/developer-roadmap) (368k stars, TypeScript): roadmap.sh is a community-driven learning platform for developers. Markdown: https://gitdiagram.com/kamranahmedse/developer-roadmap.md
2. [affaan-m/ecc](https://gitdiagram.com/affaan-m/ecc) (300k stars, JavaScript): ECC is a harness-native agent engineering system: an operator starts or manages agent sessions, coordinates work across harnesses, and inspects session activity. Markdown: https://gitdiagram.com/affaan-m/ecc.md
3. [deepseek-ai/deepseek-harness](https://gitdiagram.com/deepseek-ai/deepseek-harness) (277k stars, TypeScript): DeepSeek Harness is a plugin-oriented agent harness with a local Web UI and Desktop host. Markdown: https://gitdiagram.com/deepseek-ai/deepseek-harness.md
4. [digitalplatdev/freedomain](https://gitdiagram.com/digitalplatdev/freedomain) (203k stars, Markdown): This repository is the public information and learning-resource site for DigitalPlat FreeDomain; the registration application is maintained separately. Markdown: https://gitdiagram.com/digitalplatdev/freedomain.md
5. [significant-gravitas/autogpt](https://gitdiagram.com/significant-gravitas/autogpt) (187k stars, Python): This monorepo contains the AutoGPT Platform: a managed or self-hosted system for building, deploying, triggering, and observing AI-agent workflows. Markdown: https://gitdiagram.com/significant-gravitas/autogpt.md
6. [anthropics/skills](https://gitdiagram.com/anthropics/skills) (186k stars, Python): This repository is a collection of Claude skills: instruction-led, task-specific capabilities, with scripts supporting document editing, PDF forms, skill authoring, MCP… Markdown: https://gitdiagram.com/anthropics/skills.md
7. [affaan-m/everything-claude-code](https://gitdiagram.com/affaan-m/everything-claude-code) (178k stars, JavaScript): - This is a cross-harness configuration and automation platform for AI coding tools, not a product app. Markdown: https://gitdiagram.com/affaan-m/everything-claude-code.md
8. [open-webui/open-webui](https://gitdiagram.com/open-webui/open-webui) (158k stars, Svelte): Open WebUI is a self-hosted AI platform for chatting with local or cloud models, with knowledge retrieval, collaboration, extensible apps, and administration. Markdown: https://gitdiagram.com/open-webui/open-webui.md
9. [langflow-ai/langflow](https://gitdiagram.com/langflow-ai/langflow) (155k stars, Python): Langflow is a visual platform for authoring, testing, and deploying AI workflows and agents. Markdown: https://gitdiagram.com/langflow-ai/langflow.md
10. [clash-verge-rev/clash-verge-rev](https://gitdiagram.com/clash-verge-rev/clash-verge-rev) (150k stars, Rust): Clash Verge Rev is a Tauri desktop GUI for the Clash Meta (mihomo) proxy core. Markdown: https://gitdiagram.com/clash-verge-rev/clash-verge-rev.md
11. [farion1231/cc-switch](https://gitdiagram.com/farion1231/cc-switch) (142k stars, Rust): CC Switch is a desktop manager for configuring and switching AI coding-agent providers, with shared management of MCP servers, skills, and prompts. Markdown: https://gitdiagram.com/farion1231/cc-switch.md
12. [react/react-native](https://gitdiagram.com/react/react-native) (127k stars, C++): React Native lets app developers write React-based JavaScript that is rendered through platform-native UI, with native modules exposing platform capabilities. Markdown: https://gitdiagram.com/react/react-native.md
13. [tauri-apps/tauri](https://gitdiagram.com/tauri-apps/tauri) (113k stars, Rust): Tauri is a cross-platform framework for desktop and mobile apps whose frontend runs in a system WebView and communicates with a Rust application backend. Markdown: https://gitdiagram.com/tauri-apps/tauri.md
14. [supabase/supabase](https://gitdiagram.com/supabase/supabase) (111k stars, TypeScript): Supabase is a Postgres development platform combining a hosted dashboard with open-source database, API, authentication, realtime, storage, and functions services. Markdown: https://gitdiagram.com/supabase/supabase.md
15. [paperclipai/paperclip](https://gitdiagram.com/paperclipai/paperclip) (110k stars, TypeScript): Paperclip is an open-source control plane for teams of AI agents. Markdown: https://gitdiagram.com/paperclipai/paperclip.md
16. [ruvnet/ruview](https://gitdiagram.com/ruvnet/ruview) (97.2k stars, Rust): RuView is a WiFi sensing platform: edge sensors capture CSI, processing turns radio measurements into presence, pose, activity, and vital-sign estimates, and user-facing tools… Markdown: https://gitdiagram.com/ruvnet/ruview.md
17. [microsoft/web-dev-for-beginners](https://gitdiagram.com/microsoft/web-dev-for-beginners) (97k stars, JavaScript): This repository is a beginner web-development curriculum, not one integrated application. Markdown: https://gitdiagram.com/microsoft/web-dev-for-beginners.md
18. [microsoft/playwright](https://gitdiagram.com/microsoft/playwright) (97k stars, TypeScript): Playwright is a cross-browser automation and testing framework, also used for scripts and AI-agent workflows. Markdown: https://gitdiagram.com/microsoft/playwright.md
19. [ruvnet/wifi-densepose](https://gitdiagram.com/ruvnet/wifi-densepose) (96.9k stars, Rust): RuView is a WiFi sensing platform: ESP32 nodes capture CSI, which the system processes into presence, pose, activity, and vital-sign estimates for people and room monitoring. Markdown: https://gitdiagram.com/ruvnet/wifi-densepose.md
20. [louislam/uptime-kuma](https://gitdiagram.com/louislam/uptime-kuma) (92k stars, JavaScript): Uptime Kuma is a self-hosted monitoring application. Markdown: https://gitdiagram.com/louislam/uptime-kuma.md
21. [microsoft/ml-for-beginners](https://gitdiagram.com/microsoft/ml-for-beginners) (91.3k stars, Jupyter Notebook): ML for Beginners is a 12-week, 26-lesson curriculum for learning classic machine learning through lessons, quizzes, activities, projects, solutions, and assignments. Markdown: https://gitdiagram.com/microsoft/ml-for-beginners.md
22. [opencut-app/opencut](https://gitdiagram.com/opencut-app/opencut) (90.6k stars, TypeScript): OpenCut is a ground-up rewrite of a free video editor, but the sampled repository is an early scaffold: the web has routing and an editor route, the desktop launches a shell with… Markdown: https://gitdiagram.com/opencut-app/opencut.md
23. [leonxlnx/taste-skill](https://gitdiagram.com/leonxlnx/taste-skill) (90.3k stars, JavaScript): Taste Skill is a repository of portable instruction files for AI agents building or redesigning frontends, plus image-generation guidance. Markdown: https://gitdiagram.com/leonxlnx/taste-skill.md
24. [panjiachen/vue-element-admin](https://gitdiagram.com/panjiachen/vue-element-admin) (90.2k stars, Vue): vue-element-admin is a Vue-based admin-interface solution. Markdown: https://gitdiagram.com/panjiachen/vue-element-admin.md
25. [egonex-ai/understand-anything](https://gitdiagram.com/egonex-ai/understand-anything) (88.4k stars, TypeScript): Understand Anything analyzes codebases, knowledge bases, and Figma designs into knowledge graphs, then presents them in an interactive dashboard and provides chat, explanation… Markdown: https://gitdiagram.com/egonex-ai/understand-anything.md
26. [koala73/worldmonitor](https://gitdiagram.com/koala73/worldmonitor) (87.6k stars, TypeScript): World Monitor is a real-time global intelligence dashboard, with API and agent-facing interfaces as additional ways to access its data. Markdown: https://gitdiagram.com/koala73/worldmonitor.md
27. [realworld-apps/realworld](https://gitdiagram.com/realworld-apps/realworld) (84.2k stars, TypeScript): RealWorld is a cross-framework specification and validation project for a Medium-style application, not a single application implementation. Markdown: https://gitdiagram.com/realworld-apps/realworld.md
28. [cheaper-inference/omniroute](https://gitdiagram.com/cheaper-inference/omniroute) (82.4k stars, TypeScript): OmniRoute is a self-hosted AI gateway with a dashboard and CLI. Markdown: https://gitdiagram.com/cheaper-inference/omniroute.md
29. [pewdiepie-archdaemon/odysseus](https://gitdiagram.com/pewdiepie-archdaemon/odysseus) (79.1k stars, Python): - Odysseus is a self-hosted AI workspace built around a Python backend and a browser UI. Markdown: https://gitdiagram.com/pewdiepie-archdaemon/odysseus.md
30. [diegosouzapw/omniroute](https://gitdiagram.com/diegosouzapw/omniroute) (78.2k stars, TypeScript): OmniRoute is a unified AI gateway: clients send compatible requests to one endpoint, which routes them across provider connections and returns responses with fallback and… Markdown: https://gitdiagram.com/diegosouzapw/omniroute.md
31. [grafana/grafana](https://gitdiagram.com/grafana/grafana) (77.4k stars, TypeScript): Grafana is an observability platform for querying data sources, visualizing results, exploring metrics and logs, and managing alerting. Markdown: https://gitdiagram.com/grafana/grafana.md
32. [career-ops-hq/career-ops](https://gitdiagram.com/career-ops-hq/career-ops) (77.4k stars, JavaScript): career-ops is a local-first AI job-search agent with a web interface and terminal dashboard. Markdown: https://gitdiagram.com/career-ops-hq/career-ops.md
33. [composiohq/awesome-claude-skills](https://gitdiagram.com/composiohq/awesome-claude-skills) (77k stars, Python): This repository is a curated collection of Claude Skills and practical agent utilities, not one application with a shared runtime. Markdown: https://gitdiagram.com/composiohq/awesome-claude-skills.md
34. [storytold/photocraft](https://gitdiagram.com/storytold/photocraft) (75.6k stars, Rust): PhotoCraft is a native Rust image editor, with CLI, web, and automation interfaces. Markdown: https://gitdiagram.com/storytold/photocraft.md
35. [apache/superset](https://gitdiagram.com/apache/superset) (75.4k stars, Python): Superset is a business-intelligence web application for connecting to SQL data sources, exploring data, building visualizations and dashboards, and querying through SQL Lab. Markdown: https://gitdiagram.com/apache/superset.md
36. [eugeny/tabby](https://gitdiagram.com/eugeny/tabby) (75.3k stars, TypeScript): Tabby is a cross-platform terminal emulator and connection client. Markdown: https://gitdiagram.com/eugeny/tabby.md
37. [unionlabs/union](https://gitdiagram.com/unionlabs/union) (73.7k stars, Rust): Union is a cross-chain messaging and asset-transfer infrastructure project built around consensus verification and IBC compatibility. Markdown: https://gitdiagram.com/unionlabs/union.md
38. [obsproject/obs-studio](https://gitdiagram.com/obsproject/obs-studio) (73.4k stars, C): 1. Repository purpose and top-level shape Markdown: https://gitdiagram.com/obsproject/obs-studio.md
39. [strapi/strapi](https://gitdiagram.com/strapi/strapi) (73.3k stars, TypeScript): Strapi is a self-hosted headless CMS: developers define content models, creators manage and publish content in the admin, and applications consume generated APIs. Markdown: https://gitdiagram.com/strapi/strapi.md
40. [cline/cline](https://gitdiagram.com/cline/cline) (70.2k stars, TypeScript): Cline is a coding-agent product spanning a terminal CLI, shared SDK/core, VS Code integration, and Cline Hub. Markdown: https://gitdiagram.com/cline/cline.md
41. [gorhill/ublock](https://gitdiagram.com/gorhill/ublock) (68.7k stars, JavaScript): uBlock Origin is a browser content blocker: users configure filter lists and site-specific rules, then browser requests and page content are evaluated against those rules to… Markdown: https://gitdiagram.com/gorhill/ublock.md
42. [mem0ai/mem0](https://gitdiagram.com/mem0ai/mem0) (67.7k stars, Python): Mem0 is a memory layer for AI applications, delivered as Python/TypeScript SDKs, a self-hosted API and dashboard, command-line tools, and agent-framework integrations. Markdown: https://gitdiagram.com/mem0ai/mem0.md
43. [prometheus/prometheus](https://gitdiagram.com/prometheus/prometheus) (66.3k stars, Go): Prometheus collects time series from configured or discovered targets, stores them locally, evaluates PromQL queries and rules, and exposes results through its HTTP API and web UI. Markdown: https://gitdiagram.com/prometheus/prometheus.md
44. [zhulinsen/daily_stock_analysis](https://gitdiagram.com/zhulinsen/daily_stock_analysis) (65.7k stars, Python): Daily Stock Analysis is a multi-market AI stock-research and decision-support product, delivered through a web/desktop workspace, API, and chat bots. Markdown: https://gitdiagram.com/zhulinsen/daily_stock_analysis.md
45. [coollabsio/coolify](https://gitdiagram.com/coollabsio/coolify) (65.7k stars, PHP): Coolify is a self-hosted deployment and infrastructure-management platform. Markdown: https://gitdiagram.com/coollabsio/coolify.md
46. [traefik/traefik](https://gitdiagram.com/traefik/traefik) (65.5k stars, Go): Traefik is a dynamically configured reverse proxy and load balancer: infrastructure providers observe service and route definitions, configuration is updated without restarts… Markdown: https://gitdiagram.com/traefik/traefik.md
47. [jingyaogong/minimind](https://gitdiagram.com/jingyaogong/minimind) (65k stars, Python): MiniMind is a from-scratch, compact language-model project: its main user journey is preparing training data, training or adapting a model, then evaluating or serving generated… Markdown: https://gitdiagram.com/jingyaogong/minimind.md
48. [usememos/memos](https://gitdiagram.com/usememos/memos) (63.6k stars, Go): Memos is a self-hosted, Markdown-first notes timeline: users create memos, add files, find and revisit them, and choose whether to keep them private or share them. Markdown: https://gitdiagram.com/usememos/memos.md
49. [pathwaycom/pathway](https://gitdiagram.com/pathwaycom/pathway) (63.5k stars, Python): 1. This repo is a hybrid Python + Rust data-processing platform. Markdown: https://gitdiagram.com/pathwaycom/pathway.md
50. [makeplane/plane](https://gitdiagram.com/makeplane/plane) (61.3k stars, TypeScript): Plane is a project-management product for work items, cycles, modules, views, Pages, and analytics, with workspace and project administration. Markdown: https://gitdiagram.com/makeplane/plane.md

Next page: https://gitdiagram.com/architecture-examples/web-apps/2

More hubs: https://gitdiagram.com/architecture-examples

Counted over GitDiagram's stored diagrams of public repositories, from the names their components and groups carry and the files they link to; the rules are the ones in the [2026 open-source architecture report](https://gitdiagram.com/open-source-architecture-2026). Stars are GitHub's when the diagram was last made. Rebuilt daily: hubs grow as more repositories' languages are known.