-
Notifications
You must be signed in to change notification settings - Fork 1
Frontend Architecture
overthelex edited this page May 17, 2026
·
3 revisions
The web frontend (lexwebapp) is built with React 19, Vite, TailwindCSS 3, and follows a modern architecture with Zustand for state management and TanStack Query for server-side data fetching.
| Technology | Purpose |
|---|---|
| React 19 | UI framework |
| Vite | Build tool and dev server |
| TailwindCSS 3 | Utility-first CSS |
| Zustand | Client-side state management |
| TanStack Query | Server-side state and caching |
| React Router | URL-based navigation |
| TypeScript | Type safety |
| Vitest | Unit testing |
lexwebapp/src/
├── components/ # Reusable UI components
│ ├── ui/ # Base component library (buttons, modals, cards)
│ ├── admin/ # Admin dashboard widgets
│ ├── attorney/ # Attorney onboarding, pending invitations
│ ├── audit/ # Audit trail components
│ ├── billing/ # Billing components (TopUp, Statistics, B2B)
│ ├── charts/ # Chart and visualization components
│ ├── chat/ # Chat interface (DecisionsTab, DocumentsTab, PromptManager)
│ ├── clients/ # Client management, conflict check
│ ├── consultation/ # Consultation session components
│ ├── contracts/ # Contract management components
│ ├── encryption/ # Document encryption panel
│ ├── invoices/ # Invoice rendering components
│ ├── legislation/ # ChangeFeed, DiffViewer
│ ├── matters/ # Matter management, holds, documents
│ ├── message/ # AssistantMessage rendering
│ ├── onboarding/ # User onboarding flows
│ ├── organization/ # Organization management
│ ├── right-panel/ # Right side panel (evidence, results)
│ ├── seo/ # SEO meta and structured data
│ ├── sidebar/ # Navigation sidebar
│ ├── support/ # Support and help components
│ ├── team/ # Team management components
│ ├── time/ # Time tracking components
│ ├── video-call/ # Video call UI
│ └── DocumentViewerModal/ # Document preview
├── pages/ # Route-level page components (90+)
├── stores/ # Zustand state stores
├── services/ # API client layer
│ ├── api/ # API service classes (Auth, MCP, SSE, etc.)
│ ├── base/ # BaseService abstraction
│ ├── crypto/ # E2EE encryption services
│ └── upload/ # Upload queue and backpressure management
├── i18n/ # Internationalization (TypeScript locale modules)
├── lib/ # TanStack Query config, utilities
├── content/legal/ # Legal documents (markdown)
└── utils/ # Helpers (toast notifications, etc.)
| Store | Purpose |
|---|---|
accessGateStore |
Feature access gating and restrictions |
chatStore |
Chat messages, conversation state, tool results |
clientMatterStore |
Client and matter management |
consentStore |
Cookie/consent preferences |
consultationStore |
Consultation management state |
decisionsSearchStore |
Court decision search state |
encryptionStore |
Encryption state for vault documents |
localeStore |
Language/locale selection |
onboardingStore |
Attorney onboarding flow |
settingsStore |
User preferences |
timerStore |
Time tracking timers |
uiStore |
UI state (sidebar, modals, panels) |
undoStore |
Undo/redo support |
uploadStore |
Document upload queue and progress |
videoCallStore |
Video call session state |
workflowStore |
Workflow management |
Used for all server-side data fetching with configured stale times. API calls go through the service layer which wraps backend HTTP endpoints.
-
ChatPage-- Main AI chat interface -
DocumentsPage-- Document management with upload, grid/table views, folder navigation -
LoginPage-- Auth with Google OAuth, Diia, password, WebAuthn -
ProfilePage-- User profile, API tokens, security settings -
HistoryPage-- Conversation history
-
DecisionsSearchPage-- Court decision search -
LegislationMonitoringPage-- Track legislation changes -
LegislationStatisticsPage-- Legislation analytics -
LegalCodesLibraryPage-- Browse legal codes with article viewer -
CourtPracticeAnalysisPage-- Court practice analytics -
CaseAnalysisPage-- Individual case analysis -
HistoricalAnalysisPage-- Historical legislation analysis (timeline, comparison, statistics) -
VotingAnalysisPage-- Parliament voting analysis (factions, regions, history) -
JudgesPage-- Judge information and efficiency analytics -
PersonDetailPage-- Judge dossier, lawyer profile detail -
LegalInitiativesPage-- Legislative initiatives tracking -
EUComparisonPage-- EU legal framework comparison
-
MattersPage/MatterDetailPage-- Legal matter management -
ClientsPage/ClientDetailPage-- Client management -
ClientMessagingPage-- Secure client messaging -
ConsultationsPage/ConsultationDetailPage-- Consultations with E2EE -
ContractsPage-- Contract management -
InvoicesPage-- Invoice management -
TimeEntriesPage-- Time tracking -
WorkflowsPage/WorkflowSetDetailPage-- Workflow automation
-
AttorneySearchPage-- Find attorneys -
AttorneyDetailPage-- Attorney public profile -
AttorneyProfilePage-- Attorney self-profile management -
AttorneyClientsPage-- Attorney's client list -
LawyersPage-- Lawyer directory
-
BillingDashboard-- Balance, top-up, statistics -
PaymentSuccessPage/PaymentErrorPage-- Payment results -
ReferralPage/ReferralLanding-- Referral program
-
BlogPage-- Blog with articles and paper reader -
NewsPage-- Legal news feed -
LexNewsPage-- Platform news -
CISOAcademyPage-- CISO training content -
DeveloperDocsPage-- Developer documentation -
MCPConnectPage-- MCP connection setup
-
AdminOverviewPage-- Dashboard overview -
AdminUsersPage-- User management -
AdminBillingPage-- Billing admin (subscriptions, organizations, pricing tiers) -
AdminCostsPage-- API cost tracking (cohorts, transactions, per-user) -
AdminMonitoringPage-- Court data monitoring, scraper jobs, document completeness -
AdminInfrastructurePage-- Infrastructure health, upload pipeline, cost realtime -
AdminTerminalPage-- Admin terminal -
AdminConfigPage-- System configuration -
AdminLimitsPage-- Rate limits and quotas -
AdminServicePricingPage-- Service pricing management -
AdminContainersPage-- Container status -
AdminPGMonitoringPage-- PostgreSQL monitoring -
AdminBulkScrapePage-- Bulk scraping management -
AdminDataSourcesPage-- Data source configuration -
AdminDBComparePage-- Database comparison tool -
AdminOpenDataCatalogPage-- Open data catalog management -
AdminSessionReplayPage-- Session replay -
AdminUserActivityPage-- User activity tracking -
AdminZOStatsPage-- Legacy stats
-
TermsPage,PrivacyPolicyPage,OfferPage,DpaPage -
AttorneyOfferPage,DeveloperOfferPage,MarketplaceRulesPage -
AiTransparencyPage,AiUsagePolicyPage,RefundPolicyPage,AupPage AbuseReportPage
-
DataSourcesPage-- General data sources overview -
UADataSourcesPage,DEDataSourcesPage,EEDataSourcesPage -
FRDataSourcesPage,NLDataSourcesPage,UKDataSourcesPage,USDataSourcesPage
-
ProductPage-- Product landing -
AboutPage/TeamPage/CareerPage-- Company info -
InvestorDeckPage/InvestorLetterPage/UKInvestorPage-- Investor materials -
VerifyEmailPage/ResetPasswordPage-- Auth flows
| Locale | Language | Status |
|---|---|---|
uk |
Ukrainian | Primary -- all UI text |
en |
English | Full translation |
de |
German | Full translation |
es |
Spanish | Added via geo-based auto-detection |
Translations are managed as TypeScript modules in src/i18n/:
-
app-i18n.ts-- General application strings -
legal-i18n.ts-- Legal terminology -
matters-i18n.ts-- Matters and case management -
profile-i18n.ts-- Profile and settings -
toast-i18n.ts-- Toast notification messages -
misc-i18n.ts-- Miscellaneous strings -
locales.ts-- Login page and base locale config
Locale management via localeStore with automatic detection based on user geography.
A companion mobile app at mobile/ with features: auth, billing, chat, consultation, decisions, documents, legislation, matters, profile, time tracking. Built with Flutter and Riverpod.
cd lexwebapp
npm run dev # Vite dev server (port 5173)
npm run build # Production build
npm run test # Vitest
npm run test:coverage # Vitest with coverage
npm run lint