Skip to main content

Frontend Patterns

Key component patterns and conventions used in the Next.js frontend application.

Key Component Patterns​

PageContainer​

Layout wrapper used across most pages. Provides consistent padding, max-width constraints, and breadcrumb navigation.

TWResponsiveCard​

Responsive card component built on Tailwind CSS. Used for dashboard widgets, talent cards, job listings, and settings panels.

ChatModal​

AI Agent chat interface. Connects to the agentChat subscription on background-tasks and renders streaming responses as typed events: ChatProcessing, ChatContextLoaded, ChatChunk, ChatToolCall, ChatToolResult, ChatComplete, and ChatError.

Notification Polling​

Notifications use polling instead of WebSocket subscriptions:

// Poll unread count every 30 seconds
const { data } = useQuery(UNREAD_NOTIFICATION_COUNT, {
  pollInterval: 30000,
});

The document title is updated with the unread badge count. Individual notifications are fetched on demand when the user opens the notification panel.

info

There is no test framework configured for the frontend. The pre-commit hook validates the build (npm run build). All automated testing happens at the backend and background-tasks layers.