# AGENTS.md — Africa Alert PWA > **Audience.** This file is the single source of truth for any AI coding agent (or human contributor) working in this repository. Read it end-to-end before making changes. > > **Status.** Living document. Update it in the same PR that changes the architecture, the coding standards, or the team-agent roster. --- ## 1. Project Overview ### 1.1 Purpose **Africa Alert** is a Progressive Web App (PWA) school-management system for African schools. It unifies the four stakeholders of a school — **administrators, teachers, students, and parents** — into one role-aware interface, and ships with offline support so it works in low-connectivity environments (the primary deployment context is Zimbabwe, based on the Paynow payment-gateway integration at `https://www.paynow.co.zw`). ### 1.2 Key Business Goals | Goal | What it means in code | |---|---| | **Unified school operations** | One app for student records, classes, attendance, fees, messaging, calendar, exams, payroll, inventory, hostel, transport, and front-office. | | **Offline-first PWA** | The React client must install and run without a network. A local SQLite mirror keeps working data available offline; a sync engine reconciles to Supabase when online. | | **Role-based experience** | Four user roles (admin / teacher / student / parent) with distinct dashboards, navigation, and permissions. | | **Cashless fee collection** | Integration with **Paynow Zimbabwe** (Ecocash, Visa, etc.) so parents can pay fees online. | | **Easy deployment** | One-command `docker-compose up` for non-technical school operators. | ### 1.3 High-Level Architecture ``` ┌─────────────────────────────────────────────────────────────────────┐ │ Africa Alert System │ └─────────────────────────────────────────────────────────────────────┘ Browser / Mobile PWA ┌──────────────────────────────────────────┐ │ React 18 + Vite + TypeScript │ │ - React Router 6 (role-gated routes) │ │ - Zustand stores (auth, api, exams, …) │ │ - Axios HTTP client │ │ - vite-plugin-pwa (service worker) │ │ - Recharts, Lucide icons │ └──────────────┬───────────────────────────┘ │ /api/* (Vite dev proxy :3001) ▼ ┌──────────────────────────────────────────┐ ┌─────────────────────┐ │ Node.js 20 + Express API (port 3001) │ sync │ Supabase (Postgres)│ │ - JWT auth (jsonwebtoken) │ ◀────▶ │ api.next_gen. │ │ - bcrypt password hashing │ 30 s │ techarvest.co.zw │ │ - 12 controllers (one per module) │ └─────────────────────┘ │ - SQLite (better-sqlite3) local mirror │ ▲ │ - SyncEngine (push/pull, server-wins) │ ───────────────┘ │ - Paynow integration │ - Multer file uploads └──────────────────────────────────────────┘ │ ▼ ./data/school.db (SQLite, persistent volume in Docker) All in one container via multi-stage Dockerfile + docker-compose. ``` **Architectural style.** A classic **three-tier monolith** (React SPA → Express REST → SQLite) with a **bidirectional sync adapter** to a managed Postgres (Supabase) for backup and cross-device replication. There is no microservice decomposition; modules are Express `Router()` instances mounted under `/api/`. --- ## 2. Technology Stack ### 2.1 Frontend (`client/`) - **Language:** TypeScript 5.3+ - **Framework:** React 18.2 (function components + hooks) - **Build tool:** Vite 5 (`vite.config.ts`) - **Routing:** react-router-dom 6 - **State management:** Zustand 4 (with `persist` middleware for auth) - **HTTP client:** Axios 1 - **Charts:** Recharts 2 - **Icons:** lucide-react - **PWA:** vite-plugin-pwa (Workbox runtime caching, autoUpdate) ### 2.2 Backend (`server/`) - **Runtime:** Node.js 20 (Alpine in Docker) - **Framework:** Express 4 - **Storage:** SQLite via `better-sqlite3` 12 (WAL mode, `foreign_keys = ON`) - **Auth:** `jsonwebtoken` 9 (HS256, 7-day expiry) + `bcryptjs` 2 - **CORS:** `cors` 2 (currently wide-open; see §6 Security) - **Uploads:** `multer` 1.4 - **Cloud sync:** `@supabase/supabase-js` 2 - **IDs:** `uuid` 9 (for sync `uid` columns) - **Dev loop:** `nodemon` 3 ### 2.3 Database - **Primary (local):** SQLite (single file at `server/data/school.db`, mode WAL). - **Replica (cloud):** Supabase Postgres. Push/pull through the Supabase REST API. - **Schema source of truth:** `server/src/database/init.js` (CREATE TABLE IF NOT EXISTS — see §10 for migration plan). - **Soft-delete + sync metadata on every table:** ```sql last_synced_at DATETIME, sync_status TEXT DEFAULT 'pending' CHECK(sync_status IN ('synced','pending','conflict')), is_deleted INTEGER DEFAULT 0 ``` ### 2.4 Infrastructure - **Containerization:** Docker (multi-stage `Dockerfile` — `client-build` → `server-build` → `production`) + Docker Compose v3.8. - **Base image:** `node:20-alpine`. - **Persistent volumes:** `./data` (SQLite) and `./uploads` (file uploads). - **Ports:** 3000 (static client via `npx serve`), 3001 (API). - **Entrypoint:** `docker-entrypoint.sh` — runs DB init on first boot, then launches API + static server. ### 2.5 DevOps - **CI/CD:** *None configured.* Recommended: GitHub Actions — see §13. - **Backups:** Manual `cp -r data data-backup-…` (documented in `DOCKER_README.md`). No automation. - **Monitoring / health check:** *Not implemented.* Recommended: `/api/health` endpoint, see §13. - **Secrets management:** Currently via `docker-compose.yml` env block (with a **hardcoded fallback secret** — see §6). Recommended: Docker secrets or a `.env` file with `dotenv` (NOT committed). ### 2.6 AI/ML Components - *None.* No ML models, embeddings, or AI services are integrated. The system is purely transactional. If you add AI features (e.g. attendance anomaly detection, grade prediction), add a new sub-section here. --- ## 3. Team AI Agents These are the persistent agent roles this repo expects AI agents to assume. Each role is scoped so two agents can work in parallel without stepping on each other. ### 3.1 Architect Agent **Owns:** `client/src/App.tsx`, `client/vite.config.ts`, `server/src/index.js`, `docker-compose.yml`, `Dockerfile`, `docker-entrypoint.sh`, `AGENTS.md`. **Responsibilities:** - System architecture and module boundaries. - Scalability (SQLite → Postgres migration, sync sharding, multi-tenant tenancy). - Security review (authn, authz, secrets, CORS, rate limiting, payload validation). - Design decisions and ADRs (architecture-decision records — see §11). - Cross-cutting concerns: error handling, logging, observability. **Out of scope:** Implementing feature CRUD — that's the Backend / Frontend agents. ### 3.2 Backend Agent **Owns:** `server/src/**` (controllers, services, middleware, db), `server/package.json`. **Responsibilities:** - Express API development. - Business logic, validation, transactions. - Database schema and migrations (when extracted from `init.js`). - Sync engine correctness (push/pull ordering, conflict resolution). - Backend testing (Jest / Vitest + supertest, once set up — see §13). - Paynow integration and webhook security. **Out of scope:** React UI, deployment infrastructure. ### 3.3 Frontend Agent **Owns:** `client/src/**` (components, pages, stores, hooks), `client/package.json`, `client/vite.config.ts`, PWA manifest, service-worker config. **Responsibilities:** - UI / UX implementation. - Accessibility (WCAG 2.1 AA — semantic HTML, focus management, ARIA only when needed). - State management (Zustand stores) and API caching. - Offline / service-worker behavior (Workbox strategies, runtime caching). - Frontend testing (Vitest + React Testing Library, once set up — see §13). - Form validation and user-facing error handling. **Out of scope:** Server endpoints, DB schema. ### 3.4 DevOps Agent **Owns:** `Dockerfile`, `docker-compose.yml`, `docker-entrypoint.sh`, `.github/` or `.gitlab/` (when created), CI/CD pipelines, backup scripts, deployment docs. **Responsibilities:** - CI/CD pipelines (lint → typecheck → test → build → deploy). - Container hardening (non-root user, healthcheck, multi-stage size optimization). - Infrastructure-as-code (when promoted beyond Docker Compose). - Monitoring / observability (logs, metrics, traces). - Backups (automated SQLite snapshots + restore drills). - Secrets management (`.env`, Docker secrets, vault). **Out of scope:** Application logic. ### 3.5 QA Agent **Owns:** `tests/` (once created), test plans, regression suites, performance baselines. **Responsibilities:** - Test plans for each user role (admin / teacher / student / parent). - Automated test suite (unit + integration + e2e — Playwright recommended for e2e). - Regression testing on every PR. - Performance testing (especially the exam timer and bulk attendance endpoints). - Accessibility audits (axe-core, manual screen-reader checks). **Out of scope:** Writing new feature code; QA flags defects, the owning agent fixes them. ### 3.6 Documentation Agent **Owns:** `README.md`, `DOCKER_README.md`, `IMPLEMENTATION_SUMMARY.md`, `SCREENS.md`, this file, OpenAPI/Swagger specs (when added), ADRs in `docs/adr/`. **Responsibilities:** - Keep `README.md` in sync with the running app. - Maintain `SCREENS.md` as the canonical UI map (it currently lists screens and the permissions matrix — keep that current as features land). - Generate / curate API documentation (OpenAPI from route comments or a `swagger-jsdoc` setup). - Architecture diagrams (use Mermaid in `.md` files — they render in GitHub / GitLab). - Runbooks for common operations (DB reset, sync repair, backup restore). **Out of scope:** Writing the code that the docs describe; that is owned by the implementing agent. --- ## 4. Coding Standards ### 4.1 Naming Conventions | Layer | Convention | Example | |---|---|---| | React components | PascalCase, file matches export | `AdminDashboard.tsx` exports `AdminDashboard` | | Hooks | `useX` camelCase | `useAuthStore` | | Zustand stores | camelCase, `use` prefix | `useExamsStore` | | TypeScript types / interfaces | PascalCase | `interface User { … }` | | Express controllers | camelCase + `.controller.js` | `exams.controller.js` | | Express services | camelCase + `.service.js` | `syncEngine.js` (existing convention) — keep aligned | | Database columns | snake_case | `first_name`, `sync_status` | | Environment variables | SCREAMING_SNAKE_CASE | `JWT_SECRET`, `SUPABASE_URL` | | Branches | `feature/` or `fix/` | `feature/online-exams`, `fix/login-redirect` | ### 4.2 Folder Organization - All **backend** code under `server/src/`. Subfolders: `controllers/`, `services/`, `database/`, `middleware/`, `routes/` (when split out). - All **frontend** code under `client/src/`. Subfolders: `components/`, `pages/`, `store/`, `hooks/`, `utils/`, `services/`. - **Role-specific** pages live under `client/src/pages//` (admin / teacher / student / parent). Cross-role pages stay at `client/src/pages/`. - **Shared modules** (e.g. an `Avatar` used by every role) go in `client/src/components/`, never in a role subfolder. - **Database artifacts** (`init.js`, future migrations) live in `server/src/database/`. Do not scatter SQL across controllers. ### 4.3 Commit Message Format Use **Conventional Commits**: ``` ():