Assistant Route Architecture
The Assistant route is a comprehensive job search dashboard that integrates multiple data sources and services. It provides a unified interface for managing emails, calendar events, job searches, and resume optimization. The architecture follows a layered approach with clear separation between UI components, state management, data hooks, and API services.
Architecture Overview
Rendering diagram…
💡 Use mouse wheel to zoom, drag to pan, pinch on touch devices, or use the controls in the top-right corner. Double-click to zoom in.
Key Components
- AssistantLayout: Root layout component that wraps the entire assistant route with providers and shell structure.
- AssistantContext: Central state management using React Context API, managing authentication, tab state, and coordinating data hooks.
- Data Hooks: Custom React hooks that encapsulate data fetching logic for Gmail, Calendar, Jobs, and Resume functionality.
- Tab Pages: Parallel routes using Next.js parallel routes feature (@tabs) for seamless tab navigation without full page reloads.
Data Flow
- Authentication: OAuth flow handled through NextAuth with Google, using popup-based authentication for seamless user experience.
- Data Synchronization: Each hook manages its own loading state and provides sync functions that call respective API routes.
- API Integration: All external API calls are routed through Next.js API routes, providing a secure server-side proxy layer.
- State Updates: Context provider aggregates all hook states and exposes them through a unified interface to tab components.
Technical Highlights
- • Uses Next.js App Router with parallel routes for efficient tab navigation
- • Implements React Context API for global state management without external libraries
- • Custom hooks pattern for reusable data fetching and state management logic
- • Server-side API routes provide secure access to external services (Google APIs, OpenAI)
- • OAuth popup flow with message-based communication for authentication state updates
- • Type-safe implementation using TypeScript throughout the entire stack