Skip to content

feat: project finalized #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexYooDev merged 1 commit into from
May 25, 2026
Merged

feat: project finalized #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file removed TactixAI_Performance_Report_AlexYoo.pdf
View file
Open in desktop
Binary file not shown.
10 changes: 10 additions & 0 deletions frontend/.env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
# API endpoints
VITE_DEV_BASE_URL=http://localhost:8000
VITE_PROD_BASE_URL=https://tactixai-api-production.up.railway.app # Replace with live api server base url
VITE_PROD_WS_BASE_URL=wss://tactixai-api-production.up.railway.app # Replace with live websocket base url

# Runtime mode: 'DEV' uses VITE_DEV_BASE_URL, anything else uses VITE_PROD_BASE_URL
VITE_MODE='DEV'

# JWT storage key
VITE_TOKEN_KEY='TOKEN_KEY' # Authentication Token of your choice
244 changes: 137 additions & 107 deletions frontend/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,95 +1,146 @@
# 🔴 TactixAI. — Cyber Threat Negotiation Training Platform
# 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 — Group 34, QUT
> A GenAI-powered chatbot platform for simulating real-world ransomware negotiation scenarios.
> Built for **FlameTree Cyber** | IFN735 Industry Project — TigerByte(Group 34), QUT

---

## 📌 Project Overview
## Live Demo

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.
[https://tactix-ai.vercel.app/](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, Reviewer, Admin)
- 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.

---

## Demo Link

[Click to navigate](https://tactix-ai.vercel.app/)

---

## 🛠 FE Tech Stack
## Tech Stack

| Layer | Technology |
|---|---|
| Framework | React 19 + TypeScript |
| Build Tool | Vite |
| Styling | Tailwind CSS v3 |
| Routing | React Router DOM v6 |
| State Management | Context API |
| 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 |

---

## 🚀 Getting Started
## Local Development

### Prerequisites

- Node.js `v20+`
- npm `v9+`

### Installation
### 1. Clone and install

```bash
# 1. Clone the repository
git clone https://github.com/your-org/tactix_ai-client.git
cd tactix_ai-client

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

# 3. Set up environment variables
cp .env.example .env
```

### Environment Variables
### 2. Configure environment

```bash
# .env
VITE_API_URL=http://localhost:5173 # Backend API base URL
VITE_USE_MOCK=true # true = use mock auth (no backend needed)
cp .env.example .env
```

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

### 3. Run dev server

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

### Build for Production
> In `DEV` mode, API requests are proxied through Vite to `VITE_DEV_BASE_URL`. The proxy strips the `/api` prefix before forwarding.

---

## Production Build

```bash
# 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

```bash
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:

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

---

## Running Tests

```bash
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.

---

## 🔐 Dev Test Accounts
## Test Accounts

When `VITE_USE_MOCK=true`, use these credentials (any password):
Use these credentials against the live or local backend:

| Email | Role | Access |
|---|---|---|
Expand All @@ -98,84 +149,74 @@ When `VITE_USE_MOCK=true`, use these credentials (any password):

---

## 📁 Folder Structure
## Folder Structure

```
src/
├── api/ # Axios API calls (1:1 with backend endpoints)
│ ├── client.ts # Axios instance + JWT interceptor
│ ├── auth.api.ts
│ ├── user.api.ts (to be added)
│ └── chat.api.ts (to be added)
│
├── components/
│ ├── ui/ # Generic, reusable primitives (no page-specific logic)
│ │ ├── Logo.tsx # Brand logo used across all pages
│ │ ├── StatsCard.tsx # Metric display card
│ │ ├── DifficultyBadge.tsx
│ │ └── PanelHeader.tsx # Reusable panel/section header
│ ├── admin/ # Admin dashboard tab components
│ │ ├── OverviewTab.tsx
│ │ ├── AnalyticsTab.tsx
│ │ └── UsersTab.tsx
│ ├── forms/ # Form components
│ │ └── SubmitForm.tsx
│ ├── layout/ # App shell (Navbar, Sidebar, AppLayout)
│ └── guards/ # RBAC route protection
│ ├── ProtectedRoute.tsx
│ └── RoleGuard.tsx
│
├── context/ # Global state (Context API)
│ └── AuthContext.tsx
│
├── hooks/ # Custom hooks
│ ├── useAuth.ts
│ └── useRBAC.ts (to be added)
│
├── pages/ # One file per route
│ ├── auth/ # Login, Register
│ ├── learner/ # Learner Dashboard, Chat
│ ├── admin/ # Admin Dashboard, User Management
│ └── common/ # Unauthorized, NotFound
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
│
├── router/
│ ├── AppRouter.tsx # All route declarations
│ └── routes.ts # Route path constants
│
├── types/ # Shared TypeScript types
├── utils/ # Token helpers, formatters
└── styles/ # Global CSS
├── vercel.json
├── vite.config.ts
└── package.json
```

---

## 🌿 Git Branching Strategy
## Git Branching Strategy

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

**Branch naming convention:**
**Branch naming:**
```
feature/epic-3-auth-scaffold
feature/epic-4-admin-dashboard
feature/epic-5-RBAC
feature/epic-7-performance-analysis
fix/login-redirect
```

**Commit message format:**
```
feat: new feature
fix: bug fix
chore: config / dependency changes
docs: documentation only
feat: new feature
fix: bug fix
chore: config / dependency changes
docs: documentation only
```

---

## 👥 Team — Group 34
## Team — TigerByte(Group 34)

| Name | Role | Responsibility |
|---|---|---|
Expand All @@ -188,19 +229,8 @@ docs: documentation only

---

## 🗺 MVP Roadmap

| MVP | Target Week | Scope |
|---|---|---|
| **MVP 1** | Week 4 | Auth + RBAC + Mock Chat + Admin Basics |
| **MVP 2** | Week 8 | AI Integration + Scenario Config + Tracking |
| **MVP 3** | Week 10-12 | Full Analytics + Reports + Final Delivery |

---

## 📄 License
## License

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

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