Case Study

Enterprise Document & AI Assistant Platform

Building a production-grade document management system combined with real-time AI assistance for a financial institution.

Role

Sole/Lead Frontend Engineer

Status

Production

Context

Internal, NDA

The Problem

  • ●Manage institutional documents under strict departmental access rules — who can see what was determined by role and department.
  • ●Route documents through workflows — uploaders would submit, approvers would review, admins would manage. The wrong person seeing the wrong document was a real regulatory risk.
  • ●Query documents conversationally through AI — and crucially, get back not just answers but exact source citations. Users needed to verify where the AI pulled its information from.

My Approach

Role-Based Access Control

The permission-aware UI layer was the backbone. Rather than hardcoding different screens for different roles, the interface showed what users could see and do based on their role and department.

  • • Uploaders: Submit documents, see pending approvals
  • • Approvers: Review, annotate, approve/reject submissions
  • • Admins: Full visibility, manage users and workflows

Real-Time AI Chat Interface

The AI assistant streamed responses token-by-token via Server-Sent Events rather than waiting for a full response.

  • • Partial messages arriving continuously (SSE)
  • • Handling interrupted or dropped connections mid-stream
  • • Rendering markdown-formatted content as it arrived
  • • Debouncing and batching updates to avoid excessive re-renders

Closing the Loop: Source Citations

Answers came with cited references to the actual documents they were drawn from. An in-app document viewer opened directly to the cited section.

  • • Parse AI citations for document ID and page/section
  • • Open document viewer with viewport jumped to cited location
  • • Highlight cited text within the document for clarity
  • • Maintain back navigation to return to chat context

Enterprise Authentication

Integrated Azure AD/MSAL for enterprise single sign-on, managing token lifecycles across the app.

Observability & Monitoring

Integrated Azure Application Insights with automatic route tracking, AJAX/request tracking, and CORS-correlated request tracing.

  • • Automatic page view and performance metrics
  • • Request/response header tracking for end-to-end tracing
  • • Custom events for feature usage and user flows
  • • Real error tracking with full stack context

The Hardest Challenge

The hardest part wasn't the streaming itself — it was keeping the UI state consistent when a stream could be slow, interrupted, or arrive out of order relative to user actions.

  • →User scrolls to another part of the chat while an answer is still streaming
  • →Network delays cause messages to arrive out of chronological order
  • →User asks a follow-up question before the first answer finishes
  • →Connection drops mid-stream and needs to resume or rollback

Technology Stack

Frontend

  • ·React 18
  • ·TypeScript
  • ·Vite
  • ·Tailwind CSS
  • ·Framer Motion

State & Forms

  • ·React Query
  • ·React Hook Form
  • ·Zod

Authentication

  • ·MSAL (Azure AD)
  • ·Token Management

Real-Time

  • ·Server-Sent Events (SSE)
  • ·WebSocket
  • ·Fallback polling

Security

  • ·RBAC
  • ·Permission-aware UI
  • ·Confirmation gates

Monitoring

  • ·Azure Application Insights
  • ·React plugin
  • ·CORS correlation

Outcome

✓Zero unintended access incidents — Role-based controls worked reliably in production

✓Reliable streaming under real-world conditions — State machine approach handled network delays and interruptions gracefully

✓Improved approval workflow velocity — Staff moved through documents faster with clearer permission states

✓Visibility into production behavior — Insights integration gave the team early warning of issues

Key Learnings

Permission-driven UI design
Never hardcode screens around roles. Let the role data drive the interface. This scales better, prevents accidental leaks, and is easier to audit.

State machines for streaming data
Treat streaming responses as state transitions, not just append-to-array. This prevents UI glitches and makes the system more testable.

Build observability from day one
Production code in regulated environments needs visibility. Instrument early; the cost of adding it later is much higher.

Cite your sources (for users and for code)
Making the AI assistant's reasoning visible didn't just satisfy regulatory requirements — it made the product more useful and trustworthy.

This project is confidential. Company name, internal URLs, and proprietary details have been withheld.