Building LawConnect

LawConnect is a legal practice management platform for law firms and solo practitioners. It combines case and client management, document vault, calendar scheduling, invoicing, and an AI legal assistant — all backed by Supabase with Google Calendar OAuth via Edge Functions.

Live Demo

Dashboard Currently unavailable

What it does

Public landing

Marketing page in Spanish with hero (“La Plataforma Legal del Futuro”), feature cards, and registration CTAs. Highlights six core capabilities: case management, client database, document vault, integrated calendar, AI assistant, and advanced security.

Auth & onboarding

  • Email/password registration and login via Supabase Auth
  • Email confirmation flow (ConfirmEmail)
  • Forgot password and reset password pages
  • Protected routes redirect unauthenticated users to /login

Dashboard

Overview of the practice at a glance:

  • Total cases, active cases, clients, and documents
  • Recent cases list with status and priority badges
  • Quick links to create new cases

Casos (cases)

Full case lifecycle management:

  • List and filter legal cases (Casos)
  • Case detail view (CasoDetalle) with status, priority, client link, and notes
  • Create new cases (NuevoCaso)
  • CaseCard, StatusBadge, and PriorityBadge components

Clientes (clients)

Client CRM with contact details linked to cases and invoices.

Documentos & Bóveda

Secure document storage:

  • Upload and organize legal files in Supabase Storage
  • DocumentViewer for in-app preview
  • Text extraction from PDF and Word files (mammoth, pdf-parse) for AI context
  • Bóveda — dedicated vault view wrapping the documents module

Notas

Rich-text notes with TipTap editor:

  • Mentions and tag suggestions (TagSuggestionList, TagManager)
  • Notes linked to cases and clients
  • NoteViewer for reading formatted content

Calendario

Integrated legal calendar:

  • Event scheduling with tags (event_tags table)
  • Google Calendar sync — OAuth connect/disconnect in settings, token refresh via Supabase Edge Functions
  • CalendarCallback page for OAuth redirect handling
  • Email reminders via send-email-reminder Edge Function

Facturación (billing)

Invoice management module added in the MVP sprint:

  • Create invoices (NuevaFactura) linked to clients
  • Filter by client, status, date range, and search
  • Track payment status: pendiente, pagada, pagada parcialmente
  • Edit partial payments and download invoices

IA Assistant

AI-powered legal chat (AIAssistant):

  • Chat sessions with persistent history in Supabase
  • Context selector — attach case and document context to prompts
  • File upload for direct document analysis
  • Suggested question categories: Análisis, Estrategia, Redacción
  • Usage stats and request limits tracked per user
  • Served via ai-assistant Supabase Edge Function (OpenAI/Claude)

Configuración

Settings panel with tabs:

  • Profile (name, specialty, phone) with avatar crop/upload (ImageCropper)
  • Password change
  • Google Calendar connection status and OAuth setup
  • Avatar storage bucket configuration

Tech stack

LayerChoice
FrameworkReact 18 + TypeScript + Vite
UIRadix UI + Tailwind CSS (Catppuccin-inspired theme)
State / dataTanStack React Query
Auth & DBSupabase (Auth + PostgreSQL + Storage + Edge Functions)
Rich textTipTap (Starter Kit, Link, Mention, Placeholder)
CalendarGoogle Calendar API + googleapis
Documentsmammoth (DOCX), pdf-parse (PDF)
AnimationFramer Motion
ChartsRecharts
FormsReact Hook Form + Zod
DeployNetlify

Supabase Edge Functions

FunctionPurpose
ai-assistantLLM chat with case/document context
google-oauthGoogle Calendar OAuth initiation
google-oauth-refreshToken refresh for calendar sync
send-email-reminderCalendar event email reminders

Database migrations

Sequential schema: profiles → clients & cases → documents, notes & tags → calendar system → AI chat system → facturas → Google Calendar tokens → event tags → avatar URLs → image storage.

Development process

Initial scaffold

project bootstrap from the Bolt/Vite template and first working version with Supabase connection, auth pages, and core layout (sidebar, header, protected routes).

ChatBot functionality

Funcionamiento ChatBot — implemented the AI legal assistant chat flow, connecting the frontend to Supabase Edge Functions for LLM responses with session persistence.

MVP sprint

MVP delivery included:

  • Billing & Google configFacturacion page, facturas table migration, Google Calendar OAuth setup docs and Edge Functions
  • Edge Functions 2 — expanded serverless functions for OAuth refresh and email reminders
  • sistema MVP — full MVP feature set: dashboard stats, case/client CRUD, documents, notes, calendar, configuration
  • Calendar & avatar fixes — validated Google Calendar on hosted Netlify, fixed profile photo upload errors
  • AI improvement test — refined AI assistant response quality and context handling

Deployed to lawconnectv1.netlify.app.

Blog

recent-work

Building Smartclic Demo

Modern landing page for a Mexican web development agency — React 19, Vite, Tailwind v4, GSAP scroll, 3D viewer, and bilingual ES/EN.

Read more →

Smartclic Demo

Landing page for a Mexican web agency — React 19, Tailwind v4, GSAP scroll, 3D viewer, and bilingual ES/EN.

How it was built →
border-home1