Skip to content

Map of technologies and architecture

The fifteen areas that hold up a professional web application, with the technologies I use in each. Tap any node to see what it covers.

Almost everyone splits web development into «frontend and backend». In practice, a system in production is the intersection of fifteen disciplines that overlap constantly: a slow search can be a database problem, a cache problem, an infrastructure problem or an architecture problem — and you can only tell them apart if you have observability.

This map arranges those areas around the system and hangs the concrete technologies I work with off each one. It isn't a wish list: every node corresponds to something I use in deployed projects.

01Tech map

Fifteen areas around a system in production

Web system in productionWeb systemin productionPerformancePerformanceClient state & dataClientstate & dataAccessibilityAccessibilityCompatibilityCompatibilitySoftware architectureSoftwarearchitectureAPIs & integrationAPIs &integrationDatabasesDatabasesInfrastructure & DevOpsInfrastructure& DevOpsReliabilityReliabilityCybersecurityCybersecurityObservabilityObservabilityTesting & QATesting & QATechnical SEOTechnicalSEOCode qualityCode qualityDependencies & supply chainDependencies& supply chain

Drag to pan · scroll to zoom · click a node for details

PlanesFrontendBackend & dataInfrastructureCross-cutting layers15 areas · 115 technologies

02Full index

The fifteen areas, in detail

The same content as the map, in reading form: each area with everything it covers and the associated technologies.

Frontend

Performance

Making the site fast, and being able to prove it.

Web performance measured, not guessed: how much JavaScript reaches the browser, when the first content paints, how long the backend takes to answer. It's far bigger than «optimise the images»: it cuts across frontend, database, cache and infrastructure.

What it covers

  • Load time
  • JavaScript shipped to the browser
  • SSR / SSG / ISR / CSR
  • Code splitting
  • Lazy loading
  • Image optimisation
  • Caching strategies
  • CDN
  • Compression
  • Core Web Vitals (LCP, INP, CLS)
  • Slow queries
  • CPU and memory usage
  • Backend optimisation

What I use for it

  • Next.js SSR / ISR
  • React Server Components
  • next/image + sharp
  • Code splitting
  • Cloudflare CDN
  • Redis
  • Vercel Edge
  • Lighthouse CI

Overlaps with

Frontend

Client state & data

Who owns each piece of data, and when it stops being valid.

In a large application, half the bugs are state bugs: data duplicated between server and client, caches that never invalidate, lists that drift out of sync. Separating local state, global state and server state is an architecture decision, not a library choice.

What it covers

  • Local state
  • Global state
  • Server state
  • Data caching
  • Synchronisation
  • Optimistic updates
  • Pagination
  • Infinite scrolling
  • WebSockets
  • Real-time data
  • Cache invalidation
  • Forms and client-side validation

What I use for it

  • Redux Toolkit
  • Zustand
  • TanStack Query
  • SWR
  • React Context
  • Server Actions
  • WebSockets

Overlaps with

Frontend

Accessibility

The product working without a mouse and without seeing the screen.

Part of it is design, but most of it is development: semantic HTML, focus order, ARIA roles only where HTML falls short, and forms a screen reader can actually walk through. It also happens to be exactly what Google needs to understand the page.

What it covers

  • Semantic HTML
  • ARIA
  • Keyboard navigation
  • Screen readers
  • Colour contrast
  • Focus management
  • Accessible forms
  • Accessible captchas
  • Assistive technologies
  • Alternative text
  • Heading hierarchy and landmarks
  • prefers-reduced-motion

What I use for it

  • HTML semántico
  • ARIA
  • shadcn/ui (Radix)
  • Lighthouse a11y
  • Focus management

Overlaps with

Frontend

Compatibility

«It works on Chrome» is not an answer.

The same code running across browsers, operating systems, resolutions and connection speeds. Safari is usually the one that breaks, and the differences only surface in production unless a suite runs against several engines.

What it covers

  • Chrome, Firefox, Safari, Edge
  • Android and iOS
  • Desktop and mobile
  • Different resolutions
  • Slow connections
  • Responsive design
  • Polyfills
  • Graceful degradation
  • Rendering engine differences
  • Dark mode and system preferences

What I use for it

  • Playwright multi-navegador
  • Tailwind CSS
  • PostCSS / Autoprefixer
  • React Native
  • Diseño mobile-first

Overlaps with

Backend & data

Software architecture

How the system is built, and what it costs to change it.

The boundaries between modules and services, who may call whom, and what contract binds them. Monolith or microservices is a cost decision, not a fashion one: what matters is that responsibilities are separated and contracts are verified at compile time.

What it covers

  • Frontend/backend architecture
  • Monolith vs microservices
  • Separation of concerns
  • API design
  • Modularity
  • Design patterns
  • Dependency injection
  • Scalability
  • Project structure
  • Service-to-service communication
  • Domain boundaries
  • Shared, versioned contracts

What I use for it

  • NestJS
  • Next.js App Router
  • gRPC + protobuf
  • Monorepo
  • Contratos TypeScript
  • Prisma ORM
  • Laravel
  • Docker Compose

Overlaps with

Backend & data

APIs & integration

Everything that happens between two systems that don't know each other.

Designing the surface through which one system talks to another: contracts, versioning, input validation, and what happens when the other side fails or replays the same webhook three times. Idempotency stops being theoretical once money is involved.

What it covers

  • REST
  • GraphQL
  • gRPC
  • WebSockets
  • Webhooks
  • OAuth 2.0
  • Third-party API consumption
  • Rate limits
  • API versioning
  • Documentation (OpenAPI)
  • Input validation
  • Serialisation
  • Idempotency
  • Pagination and filtering
  • Error handling and status codes

What I use for it

  • APIs REST
  • GraphQL
  • gRPC
  • Webhooks
  • OAuth 2.0 / JWT
  • Stripe
  • Mercado Pago
  • OpenAI API
  • Anthropic Claude API
  • Zoho CRM API
  • OpenAPI / Swagger
  • Zod / class-validator

Overlaps with

Backend & data

Databases

The difference between a 20 ms search and a 2 second one.

A discipline of its own: modelling the schema, choosing the right indexes, reading a query's execution plan and versioning every migration. The difference between a product that scales and one that falls over on a Tuesday afternoon usually lives here.

What it covers

  • Schema design
  • Relationships and normalisation
  • Indexes
  • Queries and execution plans
  • Transactions
  • Concurrency and locking
  • Versioned migrations
  • Referential integrity
  • Replication
  • Backups and restore
  • Query optimisation
  • Caches
  • SQL vs NoSQL
  • Full-text search

What I use for it

  • PostgreSQL
  • MySQL
  • MongoDB
  • Supabase
  • Prisma ORM
  • Redis
  • SQLite
  • Migraciones SQL
  • Full-text search

Overlaps with

Infrastructure

Infrastructure & DevOps

Where and how the application actually lives.

Containers, pipelines, domains, certificates and CDN. The goal is for deployment to be boring: the same artifact in development and production, separate environments, and a pipeline that runs the tests before letting anything through.

What it covers

  • Servers
  • Containers
  • CI/CD
  • Deployments and rollback
  • Reverse proxy
  • CDN
  • DNS
  • Load balancing
  • Environment variables and secrets
  • Logs
  • Backups
  • Horizontal and vertical scaling
  • Cloud
  • Domain management
  • SSL/TLS certificates
  • Scheduled jobs (crons)

What I use for it

  • Docker
  • Docker Compose
  • Kubernetes
  • GitHub Actions
  • Vercel
  • Render
  • Microsoft Azure
  • AWS S3
  • Cloudflare (WAF, CDN)
  • Nginx
  • Vercel Crons

Overlaps with

Infrastructure

Reliability

Different from performance: is it still working correctly?

Performance asks how fast it responds; reliability asks whether it still responds when something breaks. Retries with backoff, timeouts, fallbacks and idempotent processing are what separate an incident from an outage.

What it covers

  • Error handling
  • Retries with backoff
  • Timeouts
  • Circuit breakers
  • Fallbacks
  • Redundancy
  • Backups
  • Disaster recovery
  • Graceful degradation
  • High availability
  • Idempotency
  • Queues and reprocessing

What I use for it

  • Webhooks idempotentes
  • Reintentos con backoff
  • Timeouts
  • Health checks
  • Backups automatizados
  • Entornos dev / tst / prod

Overlaps with

Cross-cutting layers

Cybersecurity

Protecting the system, the data and the accounts.

Validating everything that comes in, keeping authentication and authorisation separate, secrets out of the repo, and headers that close what the browser leaves open by default. The attack surface includes your dependencies and your infrastructure, not just your own code.

What it covers

  • SQL injection
  • XSS
  • CSRF
  • SSRF
  • CORS
  • Authentication
  • Authorisation and roles
  • JWT and sessions
  • Password hashing
  • Rate limiting
  • API protection
  • Secret management
  • Input validation
  • Dependency security
  • Security headers and CSP
  • HTTPS/TLS
  • Infrastructure security

What I use for it

  • Auth0
  • JWT en cookies HTTP-only
  • Hashing bcrypt / Argon2
  • Cloudflare WAF
  • reCAPTCHA v3
  • Content Security Policy
  • Rate limiting
  • HTTPS / TLS

Overlaps with

Cross-cutting layers

Observability

What is happening inside the system, right now?

Most small sites don't have it, which is why they find out about problems from a user's email. With observability, «it feels slow» turns into «the /laws/search endpoint takes 1.8 s and fails 4 % of the time».

What it covers

  • Structured logs
  • Error tracking
  • Metrics
  • Monitoring
  • Distributed tracing
  • Per-endpoint latency
  • Request volume
  • 5xx errors
  • CPU and memory usage
  • Database performance
  • Alerting
  • Health checks
  • Product analytics

What I use for it

  • Sentry
  • Google Analytics 4
  • Hotjar
  • Vercel Analytics
  • Logs estructurados
  • Health checks
  • Google Search Console

Overlaps with

Cross-cutting layers

Testing & QA

Checking the whole journey, not just the functions.

Unit tests over domain logic, integration tests over the APIs and E2E over the journeys that make money: login, checkout, forms. An E2E can walk user → login → API → database automatically on every push.

What it covers

  • Unit tests
  • Integration tests
  • End-to-end tests
  • API tests
  • Component tests
  • Regression tests
  • Load tests
  • Stress tests
  • Security tests
  • Coverage
  • Fixtures and mocks
  • Tests in CI

What I use for it

  • Playwright
  • Jest
  • Vitest
  • Cypress
  • Testing Library
  • PHPUnit
  • pytest
  • Storybook
  • SonarQube

Overlaps with

Cross-cutting layers

Technical SEO

Letting Google crawl, understand and index the site.

It isn't about writing content: it's about the site's plumbing letting a crawler through. Sitemaps, canonicals, structured data, correct status codes, 301 redirects on every URL migration, and server rendering for anything that has to be indexed.

What it covers

  • XML sitemap
  • robots.txt
  • Canonical URLs
  • Metadata and titles
  • Structured data / JSON-LD
  • URL structure
  • 301 redirects
  • HTTP status codes
  • SSR and indexing
  • Crawling and crawl budget
  • Internal linking
  • Open Graph and Twitter Cards
  • Core Web Vitals
  • hreflang and internationalisation

What I use for it

  • Sitemaps dinámicos
  • JSON-LD (schema.org)
  • Metadata API de Next.js
  • Redirecciones 301
  • Open Graph
  • hreflang
  • Lighthouse + Puppeteer
  • Google Search Console

Overlaps with

Cross-cutting layers

Code quality

The part the user never sees and pays for anyway.

Strict types, consistent conventions, code review and refactors done in time. Technical debt isn't an aesthetic problem: it's why a feature that should take two days ends up taking two weeks.

What it covers

  • Strict TypeScript
  • Linting
  • Automatic formatting
  • Code review
  • Refactoring
  • SOLID
  • DRY
  • Cyclomatic complexity
  • Naming conventions
  • Technical documentation
  • Technical debt
  • Git hooks and conventional commits

What I use for it

  • TypeScript strict
  • ESLint
  • Prettier
  • Husky
  • SonarQube
  • Code review

Overlaps with

Cross-cutting layers

Dependencies & supply chain

One npm install can drag in fifty more libraries.

Every package you install enters the build and production with the same privileges as your own code. Lockfiles, audits, timely updates and the judgement not to adopt abandoned libraries are part of the job, not an extra.

What it covers

  • npm packages
  • Known vulnerabilities (CVE)
  • Semantic versioning
  • Lockfiles
  • Transitive dependencies
  • Updates and breaking changes
  • Licences
  • Software supply chain
  • Abandoned dependencies
  • Automated audits
  • Bundle size

What I use for it

  • npm
  • Lockfiles
  • Dependabot
  • npm audit
  • Composer
  • SemVer

Overlaps with

03Traces

How the areas cross in practice

Three real traces from systems I've built. Each step touches several disciplines at once — which is why the map is a network, not a tree.

A search in the Law Observatory

Nine hops to return a list of laws. Each one belongs to a different area.

  1. 01UserAccessibilityCompatibility
  2. 02Next.jsPerformanceClient state & data
  3. 03CloudflareInfrastructure & DevOpsCybersecurity
  4. 04NestJSSoftware architectureAPIs & integration
  5. 05Auth + rate limitCybersecurity
  6. 06Full-text searchDatabases
  7. 07PostgreSQLDatabasesPerformance
  8. 08CachePerformanceReliability
  9. 09Sentry + metricsObservability

A multi-country checkout

Where money is involved, idempotency and traceability stop being optional.

  1. 01FormAccessibilityClient state & data
  2. 02API routeAPIs & integrationCybersecurity
  3. 03Laravel gatewaySoftware architectureAPIs & integration
  4. 04Stripe / Mercado PagoAPIs & integration
  5. 05Idempotent webhookReliabilityAPIs & integration
  6. 06PostgreSQLDatabases
  7. 07Zoho CRMAPIs & integration
  8. 08Playwright E2ETesting & QA
  9. 09SentryObservability

From a push to production

The pipeline that makes deploying boring, which is exactly the point.

  1. 01git pushCode quality
  2. 02GitHub ActionsInfrastructure & DevOps
  3. 03Lint + typecheckCode quality
  4. 04TestsTesting & QA
  5. 05npm auditDependencies & supply chainCybersecurity
  6. 06Docker buildInfrastructure & DevOps
  7. 07DeployInfrastructure & DevOpsReliability
  8. 08Lighthouse CIPerformanceTechnical SEO
  9. 09Search ConsoleTechnical SEOObservability

Need any of these areas covered?

I work remotely from Buenos Aires on projects that need architecture, backend and infrastructure — not just screens.

Let's talkBack to home