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 | |
XSS and input sanitizationAuthentication and JWTHTTP headers and CSPPDF and export securityAudit 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 FoundationAvailableStart 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 conceptsAvailableThe 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 UIAvailableTurn 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 formsAvailableHow 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 checklistAvailableSecurity 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 progressThe 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.