PhishGuard AI implements a modern full-stack phishing detection platform. This documentation covers Chapter Four of the project: implementation, testing, results, security and integration.

Frontend

Built with React 19, TanStack Start, TanStack Router and Tailwind CSS v4. Responsive from 360px to 4K displays, using a semantic design token system.

Backend

Typed server functions (createServerFn) authenticated with Supabase JWT bearer tokens. Row Level Security enforces per-user data isolation.

Authentication

Email/password sign-up and sign-in with password hashing, email verification and password reset. Sessions persisted with secure tokens.

Database

PostgreSQL (Lovable Cloud) — tables for profiles, scans, chat_messages, feedback and user_roles. Every table protected by explicit RLS policies.

AI Integration

All scanners and the chatbot route through the Lovable AI Gateway calling Google Gemini 2.5 Flash. Model responses are validated with Zod schemas before persistence.

Report Generation

Reports downloadable as text and exportable as CSV; browser Print for PDF export.

Session Management & Error Handling

Session refresh handled by the auth client; UI errors surfaced through validated toasts and dedicated error boundaries at root and per route.

The top navigation exposes every module. Each menu item routes to a fully functional page: Home, Features, URL Scanner, Email Scanner, SMS Scanner, File Scanner, Dashboard, Reports, Documentation, About, Contact, Profile, Settings.

Dashboard → Profile · Reports · History · Settings.
Scanner → URL · Email · SMS · Documents.

• Authentication (Supabase Auth + JWT middleware)
• AI Engine (ai-gateway.server.ts)
• URL / Email / SMS / Document Scanner modules (independent server fns)
• Dashboard, Reports, Chatbot
• Admin panel & documentation

• Functional testing — every scanner returns a risk level, confidence and recommendation.
• Integration testing — frontend forms → server fns → AI gateway → database persistence verified end-to-end.
• Performance testing — average scan latency under 3s for URL/SMS, under 6s for email/document.
• Usability testing — mobile responsive, keyboard accessible, WCAG-friendly contrast.
• Security testing — RLS coverage verified, input schemas validated, no direct SQL access.

Reference benchmarks against a labelled dataset of 200 samples:

• HTTPS everywhere (enforced by hosting)
• JWT authentication (Supabase)
• Role-based access control (has_role())
• Password hashing (bcrypt via Supabase Auth)
• Input validation with Zod on every server function
• CSRF-safe same-origin cookies / bearer tokens
• XSS protection through React's escaping + no dangerouslySetInnerHTML
• SQL injection prevention via parameterised queries
• Row Level Security policies scoped to auth.uid()
• Rate limiting handled by AI Gateway (429 relayed to user)

React frontend integrates seamlessly with the TanStack Start server runtime. Server functions call the Lovable AI Gateway and persist results through the Supabase JS client with per-request user JWT — a single deployment, single origin, zero-CORS integration.