Tech Stack

🛠️ Tech Stack

Technologies used across all three subprojects, and why each was chosen.

---

→ Navigation: Home · Architecture · Features

---

Frontend (Client + Admin)

Technology	Version	Role
React	18	Component model for both the chat UI and the admin dashboard
TypeScript	5	Static types across all packages for safer, more maintainable code
Vite	5	Lightning-fast dev server and production build tool for both frontend apps
TailwindCSS	3	Utility-first styling applied throughout the client and admin UI

Why Vite?

Vite uses native ES modules during development, meaning there's no bundling step — changes appear in the browser almost instantly. It also handles the API proxy configuration that keeps local CORS from becoming a problem.

Why TypeScript?

All three packages share types via their respective types.ts files. Catching type mismatches between the API response shapes and the UI components at compile time prevents entire categories of runtime bugs.

---

Backend (Server)

Technology	Version	Role
Node.js	20 LTS	JavaScript runtime for the Express server
Express	4	Lightweight HTTP framework for the proxy API
SQLite	3	Embedded database for conversation IDs and feedback ratings

Why SQLite?

No database server to run or configure. The data/database.db file is created automatically on first run. For the scale of this project — storing conversation IDs and simple ratings — SQLite is the right tool: simple, reliable, and zero-ops.

Why Express?

The server's job is small and well-defined: proxy Direct Line requests, store conversation IDs, and expose a few admin endpoints. Express is a perfect fit — minimal boilerplate, huge ecosystem, and fast to iterate on.

---

AI & Integration

Technology	Role
Microsoft Copilot Studio	The AI agent that understands and responds to student questions, built on a curated TAMK knowledge base
Azure Bot Framework Direct Line API	WebSocket-based channel that connects the Node.js server to Copilot Studio in real time

How Direct Line works

Direct Line is Azure's API for connecting custom clients to Bot Framework bots. It provides:

• A REST API to start conversations and send messages
• A WebSocket stream for receiving bot responses in real time
• Short-lived tokens so the DIRECT_LINE_SECRET stays server-side

---

Developer Tooling

Tool	Role
concurrently	Runs client + server + admin in a single terminal session via npm run dev
ESLint	Linting for both frontend projects
GitHub Actions	CI/CD — automatic deployment to the VM on every push to main

---

Infrastructure (Production)

Component	Technology
VM	CSC Pouta — standard.small, Ubuntu 22.04
Web server	Nginx — reverse proxy for both services
Process manager	PM2 — keeps Node.js alive, restarts on crash
SSL	Let's Encrypt — auto-renews every 90 days

For full production details see 🌍 Deployment.

---

Technology Decision Summary

Problem                         → Solution chosen
─────────────────────────────────────────────────────
Keep Azure secret off browser   → Node.js proxy (Express)
Real-time bot responses         → Direct Line WebSocket
Fast frontend iteration         → Vite + React
Persistent local state          → sessionStorage
Store feedback & conversations  → SQLite (zero-config)
Style the UI quickly            → TailwindCSS
Type safety across the stack    → TypeScript everywhere
One-command local dev           → concurrently
Continuous deployment           → GitHub Actions + PM2

---

→ Next: 🌍 Deployment · 🔌 API Reference