Frontend Architecture: WasaPrecruit MVP

This document provides a high-level overview of the WasaPrecruit frontend application architecture, built with React and TypeScript.

1. Overview

The frontend is a Single Page Application (SPA) designed to provide a real-time, multi-pane chat interface for recruiters.

Framework: React (v18+)
Language: TypeScript
Build Tool: Vite
Key Libraries:
- UI Components: Material UI (MUI) or Chakra UI
- State Management: Zustand
- API Communication: Apollo Client (for GraphQL/AppSync)
- Routing: React Router

(Refer to docs/project-structure.md for the detailed directory layout within ui/)

main.tsx / App.tsx: Entry point, sets up routing, providers (Apollo, Zustand, Theme).
pages/: Top-level views corresponding to routes (e.g., LoginPage, ChatDashboardPage).
layouts/: Structural components defining the overall page layout (e.g., DashboardLayout with sidebar and main content area).
features/: Self-contained modules representing major application features:
- chat/: Components related to the conversation list, message display, message input area.
- aspirant/: Components for displaying the aspirant's profile data (from form/system).
- auth/: Login forms, authentication logic integration (with Cognito).
components/: Generic, reusable UI elements (Buttons, Inputs, Modals, etc.) used across features.
hooks/: Custom React hooks for shared logic (e.g., useAuth, useRealtimeUpdates).
services/: API interaction layer. Contains GraphQL query/mutation/subscription definitions and functions for interacting with the AppSync backend via Apollo Client.
store/: Zustand stores for managing global or feature-specific state.
types/: Frontend-specific TypeScript types, potentially importing/extending from packages/common-types.
styles/: Global CSS, theme configuration (e.g., MUI theme overrides).

Use Zustand for managing global state (e.g., authenticated user, connection status) and potentially complex feature state.
Create separate stores for different domains (e.g., useAuthStore, useConversationStore).
Leverage middleware as needed (e.g., persistence, logging).
Simpler component state can be managed with useState or useReducer.

Configure Apollo Client to connect to the AWS AppSync endpoint.
Use Apollo hooks (useQuery, useMutation, useSubscription) within components or the services/ layer to interact with the GraphQL API.
Handle loading and error states gracefully.
Leverage Apollo cache for optimistic UI updates and minimizing redundant requests where appropriate.

Use Apollo Client's useSubscription hook to subscribe to relevant AppSync subscriptions (onNewMessage, onAspirantUpdate, onNewConversation).
Update the local state (Zustand store or component state) when new data arrives via subscriptions.
Ensure efficient updates, especially for the message list (potentially using virtualization libraries like react-window or react-virtualized if lists become very long).

Code Splitting: Leverage Vite's automatic code splitting to load code only when needed.
Lazy Loading: Use React.lazy and Suspense for lazily loading components/pages.
Memoization: Use React.memo, useMemo, useCallback to prevent unnecessary re-renders.
List Virtualization: Implement for potentially long lists (conversations, messages) to ensure UI responsiveness.
Bundle Size Analysis: Regularly analyze bundle size to identify optimization opportunities.

Integrate with AWS Cognito using AWS Amplify UI components or a custom implementation using Amplify Auth library.
Secure routes requiring authentication.
Manage user sessions and tokens.

UI Testing: Implement component tests using React Testing Library.
Accessibility: Ensure components meet WCAG standards.
Internationalization (i18n): Structure for potential future language support.