TactixAI — Cyber Threat Negotiation Training Platform

A GenAI-powered chatbot platform for simulating real-world ransomware negotiation scenarios. Built for FlameTree Cyber | IFN735 Industry Project — TigerByte(Group 34), QUT

---

Live Demo

https://tactix-ai.vercel.app/

---

Project Overview

Tactix AI is a web-based training platform that allows security professionals to practice ransomware negotiation in a safe, AI-driven environment. Learners engage with realistic threat actor personas, receive performance feedback, and build negotiation skills aligned with cybersecurity best practices.

Key capabilities:

• Role-based access control (Learner, Admin)
• AI-powered threat actor simulation with configurable personas and scenarios
• Session tracking, performance metrics, and downloadable reports

This repository contains the frontend client application.

---

Tech Stack

Layer	Technology
Framework	React 19 + TypeScript
Build Tool	Vite 8
Styling	Tailwind CSS v4
Routing	React Router DOM v7
State Management	Context API + React Query
Form Handling	React Hook Form + Zod
HTTP Client	Axios
WebSocket	react-use-websocket
Icons	lucide-react
Testing	Jest + Testing Library
Deployment	Vercel

---

Local Development

Prerequisites

• Node.js v20+
• npm v9+

1. Clone and install

git clone https://github.com/your-org/tactix_ai.git
cd tactix_ai/frontend
npm install

2. Configure environment

cp .env.example .env

Then edit .env and fill in the values. See .env.example for descriptions of each variable.

3. Run dev server

npm run dev
# → http://localhost:5173

In DEV mode, API requests are proxied through Vite to VITE_DEV_BASE_URL. The proxy strips the /api prefix before forwarding.

---

Production Build

# Type-check and compile
npm run build

# Preview the built output locally
npm run preview

The output is written to dist/. This is the directory Vercel deploys.

---

Deployment — Vercel

Auto-deploy

Pushes to main automatically trigger a Vercel deployment. No manual steps required.

Manual deploy via CLI

npm install -g vercel
vercel --prod

Vercel environment variables

Set these in the Vercel project dashboard under Settings → Environment Variables:

Variable	Value
VITE_DEV_BASE_URL	http://localhost:8000
VITE_PROD_BASE_URL	https://tactixai-api-production.up.railway.app
VITE_PROD_WS_BASE_URL	wss://tactixai-api-production.up.railway.app
VITE_MODE	PROD
VITE_TOKEN_KEY	FLAMETREE_TOKEN_KEY

SPA routing

vercel.json rewrites all routes to index.html so React Router handles client-side navigation:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

---

Running Tests

npm run test          # run all tests once
npm run test:watch    # watch mode

Tests are located in src/__tests__/ and cover reducers, hooks, forms, and schemas.

---

Test Accounts

Use these credentials against the live or local backend:

Email	Role	Access
admin@test.com	Admin	User management, admin dashboard
learner@test.com	Learner	Training sessions, chat, dashboard

---

Folder Structure

frontend/
├── public/
├── src/
│   ├── api/                  # Axios API calls (1:1 with backend endpoints)
│   │   ├── client.ts         # Axios instance + JWT interceptor
│   │   ├── auth.api.ts
│   │   ├── admin.api.ts
│   │   └── learner.api.ts
│   │
│   ├── components/
│   │   ├── ui/               # Reusable primitives (no page-specific logic)
│   │   ├── admin/            # Admin dashboard tab components
│   │   ├── learner/          # Learner-specific components
│   │   ├── layout/           # App shell (AppLayout)
│   │   └── guards/           # RBAC route protection
│   │
│   ├── context/              # Global state (AuthContext, ScenarioContext, StatsContext)
│   ├── hooks/                # Custom hooks + reducers
│   ├── mocks/                # Static mock data for development
│   ├── pages/
│   │   ├── auth/             # Login, ForgotPassword, SetPassword
│   │   ├── learner/          # Dashboard, Scenarios, Chat, Performance, Profile
│   │   └── admin/            # Admin Dashboard, Learner Details, Chat History
│   │
│   ├── router/
│   │   ├── AppRouter.tsx     # Route declarations
│   │   └── routes.ts         # Route path constants
│   │
│   ├── schemas/              # Zod validation schemas
│   ├── types/                # Shared TypeScript types
│   ├── utils/                # Token helpers, formatters, parsers
│   └── config.ts             # Env-aware API base URL config
│
├── vercel.json
├── vite.config.ts
└── package.json

---

Git Branching Strategy

main                          ← production (auto-deploys to Vercel)
└── feature/<epic>-<task>     ← feature branches merged via PR

Branch naming:

feature/epic-3-auth-scaffold
feature/epic-7-performance-analysis
fix/login-redirect

Commit message format:

feat:   new feature
fix:    bug fix
chore:  config / dependency changes
docs:   documentation only

---

Team — TigerByte(Group 34)

Name	Role	Responsibility
Alex Yoo	Full-stack Developer	Frontend, System Architecture
Sam Chien	Full-stack Developer	Python/FastAPI, Backend Services
Neal Liu	Database Engineer	PostgreSQL Schema, Migrations
Chris Lee	AI Engineer	Decision Tree Model, Dataset
Summer Cheung	UI Designer	Figma Prototypes, Design System
Zoie Leung	QA / Personas	Threat Actor Personas, Performance Metrics

---

License

Developed as part of IFN735 Industry Project at Queensland University of Technology (QUT) in collaboration with FlameTree Cyber.

© 2026 TigerByte(Group 34) — All rights reserved.