74 lines
4.3 KiB
Markdown
74 lines
4.3 KiB
Markdown
# 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
|
|
|
|
## 2. Core Components & Structure
|
|
|
|
(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).
|
|
|
|
## 3. State Management (Zustand)
|
|
|
|
* 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`.
|
|
|
|
## 4. API Communication (Apollo Client / AppSync)
|
|
|
|
* 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.
|
|
|
|
## 5. Real-time Updates
|
|
|
|
* 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).
|
|
|
|
## 6. Performance Considerations
|
|
|
|
* **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.
|
|
|
|
## 7. Authentication
|
|
|
|
* 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.
|
|
|
|
## 8. Future Considerations
|
|
|
|
* **UI Testing:** Implement component tests using React Testing Library.
|
|
* **Accessibility:** Ensure components meet WCAG standards.
|
|
* **Internationalization (i18n):** Structure for potential future language support. |