Frontend Engineering Practices¶
Frontend engineering standards for the TypeScript/React/Next.js codebase.
Sections¶
| Guide | Description |
|---|---|
| TypeScript Standards | Strict mode, interfaces vs types, generics, utility types |
| React Components | Component structure, server vs client, props, composition |
| Naming Conventions | Files, variables, React-specific naming patterns |
| State Management | Local state, TanStack Query, Zustand |
| API Integration | Axios client, error parsing, hook organization |
| Form Handling | react-hook-form + Zod, validation schemas |
| Styling | Tailwind CSS, cn() utility, responsive, dark mode |
| Accessibility | Semantic HTML, ARIA, keyboard navigation |
| Performance | Code splitting, memoization, images, lazy loading |
| Images | Upload flow, rendering primitives (SafeImage, ZoomableImage), download proxy |
| Media Resources | MediaResourceRenderer — unified component for API-sourced images and videos |
| Modal System | Registry modals, inline modals, ModalHub layout, stacking, useModalState |
| Floating Windows | Draggable/resizable portal panels via useFloatingWindow |
| Media Clipboard | Persistent clipboard store with compare mode and local upload support |
| Action Menu | Global programmatic context menu, Action types, useMediaResourceActions |
| UI Providers | All UI context providers — ActionMenu, Gallery, Popover, Menu, Prediction menus, ClientProviders tree |
| Searchable Select | SearchableSingleSelect/Multi primitives and domain *SelectField wrappers |
| Form & List Hooks | Standard CRUD form hooks and paginated list hook patterns |
| DataTable | Generic sortable table with row actions, pagination, and pinned rows |
| Next.js Essentials | App Router, server/client components, data fetching, metadata, images, fonts, navigation |
| Next.js Advanced | Server actions, parallel routes, streaming, caching, middleware, i18n, PPR |
| TanStack Query | Prefetching, hydration, suspense queries, mutations, cache coordination with Next.js |
| Security | XSS prevention, sanitization, environment variables |
| Code Review Checklist | Pre-PR verification checklist |