Skip to main content

Technology Stack

A comprehensive overview of the technologies powering ConsultFlow.

Frontend Stack​

Core Framework​

TechnologyVersionPurpose
Next.js14.xReact framework with App Router
React18.xUI component library
TypeScript5.xStatic type checking

Why Next.js 14?

  • App Router for modern routing patterns
  • Server Components for performance
  • Built-in API routes (not used, separate backend)
  • Excellent developer experience
  • Image and font optimization

Styling​

TechnologyPurpose
Tailwind CSSUtility-first CSS framework
Custom CSSAnimations and special effects

Design Decisions:

  • Dark theme primary (#0a0a1a, #16162a)
  • Orange-to-pink gradient accent
  • CSS animations for polish
  • No external component library (custom UI)

UI Libraries​

LibraryPurpose
React FlowNode-based visual workflow builder
Lucide ReactIcon library (consistent, customizable)
React MarkdownRender MOM output

Why React Flow?

  • Mature, well-documented
  • Customizable node types
  • Built-in controls and minimap
  • Handles connections elegantly

HTTP Client​

LibraryPurpose
AxiosHTTP requests to backend

Configured with:

  • Base URL from environment
  • Credentials included (cookies)
  • JSON content type

Backend Stack​

Runtime & Framework​

TechnologyVersionPurpose
Node.js18.x+JavaScript runtime
Express.js4.xWeb framework
TypeScript5.xType safety

Why Express?

  • Minimal and flexible
  • Huge middleware ecosystem
  • Well-understood patterns
  • Easy to extend

Database​

TechnologyVersionPurpose
MongoDB6.x+Document database
Mongoose8.xODM with schema validation

Why MongoDB?

  • Flexible schema for workflows
  • JSON-like documents (natural fit)
  • Easy to scale
  • Great developer experience

Authentication​

TechnologyPurpose
MSAL NodeMicrosoft Authentication Library
express-sessionSession management

Why MSAL?

  • Official Microsoft library
  • Handles token refresh
  • OAuth 2.0 implementation
  • Azure AD integration

AI Integration​

TechnologyPurpose
OpenAI SDKGPT model access

Supports:

  • Standard OpenAI API
  • Azure OpenAI Service
  • Configurable model selection

HTTP Client​

LibraryPurpose
AxiosMicrosoft Graph API calls

With interceptors for:

  • Request/response logging
  • Error handling
  • Token injection

External Services​

Microsoft 365​

ServiceAPIPurpose
Azure ADOAuth 2.0Authentication
OutlookGraph APIEmail sending
CalendarGraph APIEvent creation
TeamsGraph APIChannel messaging

AI Services​

ServicePurpose
OpenAIGPT-3.5/4 for MOM generation
Azure OpenAIEnterprise alternative

Development Tools​

Build & Dev​

ToolPurpose
tsxTypeScript execution (dev)
tscTypeScript compilation
npmPackage management

Code Quality​

ToolPurpose
TypeScriptType checking
ESLintCode linting
PrettierCode formatting

Version Summary​

{
  "frontend": {
    "next": "^14.0.0",
    "react": "^18.2.0",
    "typescript": "^5.3.0",
    "tailwindcss": "^3.4.0",
    "reactflow": "^11.10.0",
    "axios": "^1.6.0",
    "lucide-react": "^0.300.0"
  },
  "backend": {
    "express": "^4.18.0",
    "mongoose": "^8.0.0",
    "@azure/msal-node": "^2.6.0",
    "openai": "^4.20.0",
    "axios": "^1.6.0"
  }
}

Architecture Diagram​

┌─────────────────────────────────────────────────────┐
│                    Frontend                         │
│  Next.js 14 + React 18 + TypeScript + Tailwind     │
│  React Flow (Canvas) + Lucide (Icons)              │
└─────────────────────────────────────────────────────┘
                         │
                         │ HTTP/REST (Axios)
                         │ Session Cookie
                         ▼
┌─────────────────────────────────────────────────────┐
│                    Backend                          │
│  Express.js + TypeScript + Mongoose                │
│  MSAL (Auth) + OpenAI SDK (AI)                     │
└─────────────────────────────────────────────────────┘
         │                              │
         ▼                              ▼
┌─────────────────┐        ┌─────────────────────────┐
│    MongoDB      │        │   External Services     │
│    Database     │        │  - Azure AD             │
│                 │        │  - Microsoft Graph      │
│                 │        │  - OpenAI               │
└─────────────────┘        └─────────────────────────┘