Jordan’s Toolkit
GitHub
← All categories

Frontend Engineering

Build React and Next.js interfaces with deliberate state, TanStack Query, Tailwind, forms, accessibility and browser-level verification.

Browse the collection

21 entries

Showing 21 entries

Original

React Component Architecture

Design React components around stable identity, explicit ownership and composable behavior; preserve focus and local state while making feature boundaries easier to change.

Reactexperimental
Original

React Rendering and Performance

Identify the actual cause of slow React interactions and reduce unnecessary work using measured state boundaries, subscriptions, scheduling and justified memoization.

Reactexperimental
Original

React State Ownership

Assign each UI value one authoritative owner across local state, URL state, form drafts, server caches and shared client stores, with explicit reconciliation rules.

Reactexperimental
Original

TanStack Query Engineering

Implement React Query data access with complete query identities, explicit freshness, cancellation, mutation reconciliation and isolated server-rendering caches.

TanStack Queryexperimental
Original

Next.js Application Architecture

Plan App Router features around route ownership, server/client execution, loading and failure boundaries, cache semantics and the actual deployment target.

Next.jsexperimental
Original

React Server Component Boundaries

Keep server-only data and execution out of client graphs while composing small interactive React islands with explicit serialization and hydration contracts.

Next.jsexperimental
Original

Tailwind CSS Engineering

Build maintainable utility-based interfaces with version-correct tokens, statically discoverable variants, responsive behavior and tested component composition.

Tailwind CSSexperimental
Original

Responsive UI Implementation

Implement layouts that adapt to container space, content length, input mode and zoom without hiding required actions or masking overflow.

Layoutexperimental
Original

Frontend Accessibility

Implement and verify accessible frontend interactions through native semantics, meaningful names, keyboard/focus behavior and explicit assistive-technology limits.

Accessibilityexperimental
Original

React Forms and Validation

Build React forms with a deliberate native or React Hook Form lifecycle, accessible errors, stable field identity and authoritative server validation.

React Hook Formexperimental
Original

URL and Navigation State

Use a validated URL as the authority for shareable frontend state while preserving browser history, unrelated parameters and safe navigation boundaries.

Routingexperimental
Original

Frontend Data Boundaries

Convert untrusted transport data into deliberate frontend view models without leaking service details, precision errors or unauthorized fields throughout the component tree.

Data accessexperimental
Original

Frontend Loading and Error States

Design initial, empty, refreshing, partially failed and mutation-pending UI states that preserve useful data and offer safe, attributable recovery.

Async UIexperimental
Original

Browser Storage and Offline State

Persist frontend state only under explicit privacy, schema, quota and reconciliation policies; distinguish local durability from synchronized server acceptance.

Browser runtimeexperimental
Original

Frontend Concurrency and Background Work

Move suitable CPU-heavy work away from urgent UI interactions while controlling worker ownership, message identity, cancellation and stale results.

Browser runtimeexperimental
Original

Frontend Performance Budgeting

Set and evaluate route-specific frontend budgets for transfer size, main-thread work and user-visible loading without equating synthetic checks with field performance.

Performanceexperimental
Original

Frontend Testing Strategy

Choose unit, component and browser checks around user-visible frontend contracts, with independent network fixtures and explicit integration coverage.

Testingexperimental
Original

Visual Regression and UI Verification

Use reproducible visual evidence to detect frontend regressions while preserving independent interaction, accessibility and content checks.

Testingexperimental
Original

Frontend Security Boundaries

Keep untrusted content, navigation, credentials and server effects behind explicit boundaries while testing the real browser-to-server trust model.

Securityexperimental
Original

Headless Components and shadcn/ui

Compose installed headless primitives and shadcn/ui source components without breaking keyboard semantics, local changes or version-specific APIs.

Design systemsexperimental