Skip to content

Navigation Menu

Sign in
Sign up

Project Structure

Matthew Smith edited this page Dec 13, 2025 · 8 revisions

Backend

Node.js/Express backend API with TypeScript, LangChain, OpenAI integration, and Microsoft Outlook integration for AI-powered email generation.

backend/
├── src/
│ ├── config/
│ │ ├── database.config.ts # MongoDB connection setup and event handling
│ │ └── langchain.config.ts # ChatOpenAI model and email generation prompt template
│ │
│ ├── controllers/
│ │ ├── email.controller.ts # Email generation, tones, audiences, templates endpoints
│ │ ├── preferences.controller.ts # User preferences management (CRUD operations)
│ │ └── outlook.controller.ts # Outlook OAuth, send email, drafts, inbox management
│ │
│ ├── middleware/
│ │ └── auth.middleware.ts # Auth0 JWT validation and user extraction
│ │
│ ├── models/
│ │ ├── user-preferences.model.ts # Mongoose schema for user preferences
│ │ └── outlook-tokens.model.ts # Mongoose schema for Outlook OAuth tokens
│ │
│ ├── routes/
│ │ ├── email.routes.ts # Email-related routes (protected & public)
│ │ ├── preferences.routes.ts # User preferences routes (all protected)
│ │ └── outlook.routes.ts # Outlook integration routes (all protected)
│ │
│ ├── services/
│ │ ├── email.service.ts # Core email generation logic (LangChain + OpenAI)
│ │ ├── user-preferences.service.ts # CRUD operations for MongoDB preferences
│ │ └── outlook.service.ts # Microsoft Graph API integration (OAuth, send, drafts)
│ │
│ └── server.ts # Express server setup and configuration
│
├── .env # Environment variables (not in version control)
├── package.json # Backend dependencies and scripts
└── tsconfig.json # TypeScript configuration

Frontend

Angular 20 application built with TypeScript, featuring a modern UI with Tailwind CSS, dark mode support, and Microsoft Outlook integration.

frontend/
├── .vscode/ # VS Code workspace settings
│ ├── extensions.json
│ ├── launch.json
│ └── tasks.json
│
├── public/ # Static assets (images, logos)
│
├── src/
│ ├── app/
│ │ ├── components/
│ │ │ ├── outlook-callback.component.ts # Outlook OAuth callback handler
│ │ │ └── outlook-integration.component.ts # Outlook connection & email sending UI
│ │ │
│ │ ├── models/
│ │ │ └── email.model.ts # Data models (emails, tones, audiences, templates, signatures)
│ │ │
│ │ ├── services/
│ │ │ ├── email.service.ts # Backend API calls for email generation
│ │ │ ├── preferences.service.ts # User preferences management with MongoDB
│ │ │ ├── theme.service.ts # Light/dark theme management with localStorage
│ │ │ └── outlook.service.ts # Microsoft Outlook OAuth & Graph API integration
│ │ │
│ │ ├── app.component.ts # Core application logic and state management
│ │ ├── app.component.html # Main template (settings modal, email library, signatures, Outlook)
│ │ ├── app.component.css # Component styles, animations, scrollbar customization
│ │ └── app.routes.ts # Angular routing configuration
│ │
│ ├── environments/
│ │ └── environment.ts # Development environment settings (API URL, Auth0, Microsoft)
│ │
│ ├── index.html # Root HTML file
│ ├── main.ts # Application entry point with Auth0 bootstrap
│ └── styles.css # Global styles and Tailwind CSS imports
│
├── .editorconfig # Editor configuration
├── .gitignore # Git ignore patterns
├── angular.json # Angular CLI configuration
├── package.json # Frontend dependencies and npm scripts
├── tailwind.config.js # Tailwind CSS configuration with dark mode
├── tsconfig.json # Root TypeScript configuration
├── tsconfig.app.json # App-specific TypeScript settings
└── tsconfig.spec.json # Test-specific TypeScript settings

Root Directory

2025-AICA/
├── backend/ # Node.js/Express backend
├── frontend/ # Angular 20 frontend
├── .gitignore # Global git ignore patterns
├── LICENSE # MIT License
├── package.json # Monorepo scripts (concurrently run both servers)
└── README.md # Project documentation and setup instructions

Configuration Files

Backend Configuration

File Purpose
backend/.env Environment variables (OpenAI API key, Auth0 credentials, MongoDB URI, Microsoft credentials, server config)
backend/package.json Backend dependencies (Express, LangChain, Auth0, MongoDB, Mongoose, Axios) and scripts
backend/tsconfig.json TypeScript compiler options for Node.js backend

Frontend Configuration

File Purpose
frontend/angular.json Angular CLI project configuration
frontend/package.json Frontend dependencies (Angular, Auth0, Lucide icons) and scripts
frontend/tsconfig.json Root TypeScript configuration
frontend/tsconfig.app.json App-specific TypeScript settings
frontend/tsconfig.spec.json Test-specific TypeScript settings
frontend/tailwind.config.js Tailwind CSS customization with dark mode
frontend/.editorconfig Code editor formatting rules

Root Configuration

File Purpose
package.json Monorepo scripts for running both servers concurrently
.gitignore Files and folders excluded from version control

Key Features by Directory

Backend Architecture

  • RESTful API with Express.js
  • JWT Authentication via Auth0
  • MongoDB Integration with Mongoose for user data persistence
  • AI Integration using LangChain and OpenAI GPT-4o-mini
  • Custom Prompt Engineering for professional email generation
  • Microsoft Outlook Integration via Microsoft Graph API with OAuth 2.0
  • User Preferences System with CRUD operations for tones, audiences, templates, saved emails, and signatures
  • Outlook Token Management with automatic token refresh
  • Request Validation and error handling middleware
  • Health Check endpoint for monitoring

Frontend Architecture

  • Standalone Angular 20 components
  • Reactive State Management with RxJS observables and BehaviorSubjects
  • Auth0 Integration for secure authentication
  • Microsoft Outlook Integration with OAuth flow and email sending
  • Tailwind CSS for responsive, modern UI design with dark mode
  • Theme Service with localStorage persistence
  • Lucide Icons for consistent iconography
  • Real-time Validation and error feedback
  • Custom Tone, Audience, Template & Signature support with dynamic inputs
  • Settings Modal for managing user preferences
  • Email Library for saving and organizing generated emails with favorites
  • Signature Management with default signature support
  • Outlook Send Dialog for sending emails directly through Outlook

Authentication Flow

  1. Frontend initiates Auth0 login via redirect
  2. User authenticates with Auth0 (Google, Microsoft, GitHub, Apple, email/password)
  3. Auth0 returns JWT access token
  4. Frontend stores token in memory and includes it in API requests
  5. Backend validates JWT via Auth0 middleware
  6. Protected endpoints require valid authentication
  7. User preferences are loaded from MongoDB upon authentication

AI Email Generation Flow

  1. User inputs email request with selected tone, audience, and optional signature
  2. Frontend validates input and sends request to backend with JWT token
  3. Backend authenticates request via Auth0 middleware
  4. Backend formats prompt using LangChain template
  5. OpenAI GPT-4o-mini generates professional email
  6. Backend returns formatted email to frontend
  7. Frontend applies selected signature (if any) to the generated email
  8. Frontend displays email with copy-to-clipboard and save-to-library functionality
  9. User can save email to MongoDB-backed library for future reference

Outlook Integration Flow

  1. User clicks "Connect Outlook" in settings
  2. Frontend redirects to Microsoft OAuth consent page
  3. User authorizes AICA to access their Outlook account
  4. Microsoft redirects back with authorization code
  5. Frontend sends code to backend with JWT token
  6. Backend exchanges code for access and refresh tokens via Microsoft Graph API
  7. Backend stores encrypted tokens in MongoDB linked to user's Auth0 ID
  8. User can now send AI-generated emails directly through Outlook
  9. Backend automatically refreshes tokens when they expire

User Preferences & Persistence

  • MongoDB Database stores all user preferences per Auth0 user ID
  • Customizable Tones (max 8) - Add, edit, delete custom communication styles
  • Customizable Audiences (max 8) - Add, edit, delete recipient types
  • Custom Templates (max 8) - Create reusable email prompts
  • Saved Email Library (max 8) - Store AI-generated and manually added emails with favorites
  • Email Signatures (max 8) - Create multiple signatures with default selection
  • Outlook Connection - Persistent OAuth tokens for seamless email sending
  • Reset to Defaults - Restore factory settings while preserving authentication

Clone this wiki locally

AltStyle によって変換されたページ (->オリジナル) /