AraLEX — Legal Practice Management

Next.jsTypeScriptSupabaseTanStack QueryTailwind CSSshadcn/uiZustandRechartsView Live

A legal practice management platform for immigration law firms — covering the full client journey from lead intake through case (matter) management, tasks, team collaboration, and unified communications. Built on Next.js 16 and React 19 with Supabase Auth, served from static seed data over 86 route handlers with no external database.

AraLEX is a legal practice management platform built for immigration law firms. It covers the full client journey — from lead intake (WhatsApp, voice, manual) through case ("matter") management, document checklists, task boards, team collaboration, and a unified communications + mail hub — behind real authentication via Supabase.

It's a single Next.js 16 deployment with a feature-module architecture (src/features/*), a TanStack Query data layer over an Axios client, and a self-contained backend: 86 versioned route handlers serve deterministic seed data, so the whole product runs on Vercel with no external database.

System Architecture

Client-rendered feature views fetch through TanStack Query; route handlers return seeded JSON. Supabase Auth gates the shell and role-restricts admin areas.

drag nodes · click to highlight · scroll to zoom

Domain Model

The client → lead → matter pipeline sits at the centre, with tasks, communications, and notifications around it.

drag nodes · click to highlight · scroll to zoom

Highlights

  • Leads → matters pipeline — capture leads by channel, qualify through a funnel, and convert to matters that carry a visa category, stage lifecycle, and auto-generated document checklist.
  • Dashboard analytics — revenue, active-matter, and conversion KPIs with time-ranged charts.
  • Kanban tasks — drag-and-drop board with WIP-limited funnels (@dnd-kit).
  • Unified communications & mail — multi-channel threads (WhatsApp, voice, email) with AI summaries, plus an integrated Outlook-style inbox.
  • Team & roles — invite/manage members with ADMIN / ADVISOR / ASSISTANT access, gated by a RoleGuard.

Tech

Next.js 16 (App Router) · React 19 · TypeScript · Tailwind v4 + shadcn/ui · TanStack Query · Zustand · Supabase Auth (PKCE/OAuth) · Recharts. Light-only theme on a #8C875C accent; deployed on Vercel.