Top Mistakes That Developers Make When Building a Web App (And How to Prevent Them)

1. Over-engineering / Under-engineering
   • Hits:
     • Smells (over): microservices on day 0, excessive abstractions, premature queues.
     • Smells (under): single mega file, no types, copy-paste logic, no boundaries.
     • Guideline: “Build for 10× users, not 100×.” Add extension points, not layers.
     • Start with a modular monolith; extract services only when a hotspot emerges.
   • Example:
     • Keep auth, billing, and cron in the monolith initially; extract billing to a worker service once queue latency or blast radius becomes a real problem.
2. Leaving the hardest unknowns till last
   • Hits:
     • Identify the “Riskiest Assumption Tests” (payments, KYC, OAuth, data import).
     • Do a tracer bullet POC: minimal vertical slice that proves the scary part works.
     • Kill/alter scope early if a critical dependency won’t meet requirements.
   • Example:
     • Before UI polish, wire a real webhook → verify retries/signatures → persist an event → see it on a dashboard.
3. Spending time in the wrong places
   • Hits:
     • Tie work to a North-Star metric (activation, retention, time-to-value).
     • Use RICE or ICE to ruthlessly rank backlog; limit WIP to 1–2 focus items.
     • Scope creep when it’s unnecessary
     • Defer design-system ornamentation; use off-the-shelf components until fit is proven.
     • Review weekly: “What shipped that moved the metric?”
   • Example:
     • Skip building a custom admin; stand up a CRUD scaffold + SQL queries and revisit after PMF signals
4. Ignoring security basics
   • Hits: secret leakage, missing auth, unvalidated input, XSS/CSRF, wide IAM.
   • Prevent: .env management + secret scanning, principle of least privilege, server-side validation at every boundary, secure headers/CSP, rate limiting, dependency updates.
   • Example: Sanitize/escape user content, set CSP + HttpOnly/SameSite cookies, and enforce role-based checks on every API.
5. Skipping tests (or testing the wrong things)
   • Hits: only E2E or only unit tests → brittle or blind spots.
   • Prevent: thin unit tests for logic, integration tests for DB/API, a small Playwright smoke suite (sign-up, login, key flows) in CI; write a regression test for every major bug.
   • Example: Contract tests for your API using shared types/schemas (e.g., Zod/OpenAPI) to catch breaking changes.
6. No observability
   • Hits: missing logs/metrics/traces → slow triage, flaky uptime.
   • Prevent: structured logs with request IDs, centralized error tracking, health checks, latency and saturation dashboards, SLOs + alerts.
   • Example: Alert if p95 latency > X ms for 10 min; link alert → trace → offending query.
7. Neglecting CI/CD & safe deploys
   • Hits: manual deploys, no rollback, environment drift.
   • Prevent: one-click deploys, preview environments, blue/green or canary, infra-as-code, runtime config via env, migrations gated behind flags.
   • Example: Ship behind a flag → canary to 5% → watch errors/latency → ramp to 100%

Links

• We Should Care More About Web App Security | HTML All The Things Podcast
• Boosting Developer Productivity with AI Without Losing Your Edge | HTML All The Things Podcast

How to support the show

Patreon

Prices subject to change and are listed in USD

• Support the show from as little as ~$1/month
• Get a shoutout at the end of the episode (while supplies last) for just ~$3/month
• Help support the HTML All The Things Podcast: Click Here

Scrimba Discount - Coding Courses!

Learn to code using Scrimba with their interactive follow-along code editor.

Join their exclusive discord communities and network to find your first job!

Use our affiliate link for a 20% discount!!

• Click the link to take you to the Scrimba site
• A pop-up should appear on your screen with the discount amount and instructions on how to claim it
• Discount is for new accounts only

We receive a monetary kickback if you use our affiliate link and make a purchase.