How to Dev
This site documents, for real, the standards I use day to day to structure a project from scratch: folder organization, authentication, forms, tables, report exports, and — above all — security, always with the reasoning behind the decision, not just the "how". It isn't a product and there's no team behind it: it's a personal technical reference, published because documenting is the most honest way to check, later, whether a pattern still holds up.
It started from a simple question: if a malicious actor got access to this documentation, would it help them attack a real system — or would it show them the system is already protected enough that it isn't worth trying? The Security section, inside the Frontend Standard, was written with that exact bar: complete documentation, hiding no threshold, header, or authorization behavior. The only acceptable "flaw" is the system being too well protected.
HTD indexes
Use these entry points to jump straight to a subject: pick a topic, open the reference page, then read the implementation notes and checklist.
Security coverage map
A quick way to go from a risk category to the HTD page that actually implements the control — this table reflects HTD's own content, not an external checklist.
| Risk or control | HTD reference |
|---|---|
| Access control and IDOR | IDOR and authorization |
| XSS and unsafe input | XSS and input sanitization |
| Authentication and token lifecycle | Authentication and JWT |
| Browser hardening | HTTP headers and CSP |
| Export and generated file abuse | PDF and export security |
| Monitoring and audit trail | Audit logs |
Study roadmap
Goes from the basics to the more advanced parts of the standard, in the order I'd actually recommend reading them — each step links straight into the real Frontend Standard content that exists today.
- 01
FoundationAvailable
Start here: what the standard is for, and how the App Router shapes routes and folders.
- Overview and project structure
- Routing — App Router, folders, private/public routes
- 02
Core web conceptsAvailable
The fundamentals every other page assumes: how rendering, caching, and the browser actually behave.
- SSR, hydration, and code-splitting
- CORS, BFF, and state management
- Accessibility and progressive enhancement
- 03
Building the UIAvailable
Turn concepts into screen: reusable components and the styling decisions behind them.
- Buttons, search, filters, and typed props
- Modals, select, pagination, and typography
- 04
Data and formsAvailable
How data actually moves: forms, validation, caching, and the request/response lifecycle.
- Forms with React Hook Form + Zod
- Cache, mutations, and query responses (TanStack Query)
- File uploads/downloads and PDF/Excel reports
- 05
Security checklistAvailable
Security as implementation work, not a final review — the most detailed section on HTD.
- XSS, CSRF, JWT, IDOR, and RBAC
- HTTP headers, CSP, and cookie handling
- Password policy, brute force, and audit logs
- 06
API, infrastructure, examplesIn progress
The parts that expand the same standard beyond the frontend — not written yet.
- API Standard — HTTP contract, pagination, versioning
- Infrastructure Standard — environments, deploy, observability
- Examples — complete reference flows
Project links
About me
I'm Juan Kalleo, a Staff Fullstack Software Engineer on NextTech's frontend team, based in Porto Velho, Brazil. Secure software development is the focus that runs through most of what I build — HTD is where that focus turns into documentation, written the way I wish more of it was.
GitHub ↗