Web Application Developer

Web Application Developer

When to Use

• Build or extend a browser-based web application (not native mobile)
• Implement auth flows, sessions, or token handling in a web context
• Connect UI to HTTP APIs with correct error and loading handling
• Address CORS, cookies, CSRF, or caching behavior between browser and server
• Ship SSR, SPA, or hybrid (e.g., Next.js) routing and data loading

When NOT to Use

• Native iOS/Android or desktop-only clients → stack-specific mobile/desktop guidance
• Pure infrastructure or pipelines → devops, infrastructure-engineer
• UX discovery and wireframes only → product-designer
• Org-wide security program → cybersecurity
• Senior cross-service RFCs → senior-software-engineer

Related skills

Core Workflows

1. Web app structure

Choose rendering model explicitly:

Document: routes, auth gates, global layout, error boundaries.

See `references/web_app_architecture.md` for routing and env patterns.

2. HTTP API integration

• Use typed client or OpenAPI-generated types
• Handle 401 → refresh or redirect to login
• Timeouts and retry only for idempotent GETs
• Paginate list endpoints; avoid loading unbounded data in browser

See `references/api_integration.md` for client patterns.

3. Auth in the browser

• Prefer HttpOnly, Secure, SameSite cookies for session cookies
• Or short-lived access token in memory + refresh rotation
• Never store secrets in localStorage for high-risk apps
• Protect state-changing routes with CSRF tokens when using cookies

See `references/auth_sessions.md` for flow diagrams.

4. Forms and uploads

• Client validation for UX; server validation required
• multipart/form-data for files; progress and size limits
• Sanitize filenames; scan server-side if policy requires

5. Web security baseline

• Escape output; avoid dangerouslySetInnerHTML without sanitizer
• Set CSP headers; restrict script sources
• CORS allowlist explicit origins—not * with credentials
• Security headers: HSTS, X-Frame-Options or frame-ancestors

See `references/web_security.md` for checklist.

6. Test and release

• Unit: validators, hooks, API mappers
• Integration: API routes with test DB
• E2E: login and one critical journey (Playwright/Cypress)
• Smoke test after deploy on staging URL

See `references/web_app_architecture.md` for env and config.

When to load references

• Architecture and env → references/web_app_architecture.md
• API clients → references/api_integration.md
• Login and sessions → references/auth_sessions.md
• CSRF, CSP, CORS → references/web_security.md

API integration

Table of contents

1. Client patterns 2. Error handling

Client patterns

• Central fetch wrapper: base URL, auth header/cookies, JSON parse
• Map HTTP status to user-visible messages
• Cancel in-flight requests on route change when safe

Error handling

Auth and sessions

Table of contents

1. Cookie session flow 2. Token flow

Cookie session flow

login POST → server sets HttpOnly session cookie → subsequent requests include cookie → logout clears cookie

• SameSite=Lax (or Strict if no cross-site needs)
• Secure in production
• CSRF token on POST/PUT/PATCH/DELETE when using cookies

Token flow

login → access token (short TTL) + refresh token (HttpOnly cookie or rotation endpoint)

• Store access token in memory, not localStorage, when XSS risk is material
• Refresh before expiry; single-flight refresh to avoid storms

Web app architecture

Table of contents

1. Environment config 2. Routing

Environment config

Use separate configs for dev/stage/prod; no prod data in local dev.

Routing

• Public routes: marketing, login, password reset
• Protected routes: middleware or loader checks session
• 404/500 pages branded; log server errors with request ID

Web security

Table of contents

1. Checklist 2. CORS

Checklist

• [ ] No secrets in client bundle
• [ ] CSP configured for scripts and styles
• [ ] Cookies: HttpOnly + Secure + SameSite
• [ ] CSRF protection on cookie-based mutations
• [ ] Input validated server-side
• [ ] Output encoded in HTML contexts
• [ ] File upload type and size limits
• [ ] Dependencies scanned (link devsecops)

CORS

• Allow specific origins only
• credentials: true only with explicit origin—not wildcard
• Preflight handled for non-simple methods