Inspiration

Pakistan is one of the world's fastest-growing digital economies, yet it is also one of the most vulnerable to cyber fraud. Every day, millions of Pakistanis receive phishing calls, fake job offers, fraudulent bank messages, and social media scams. The Federal Investigation Agency (FIA) receives thousands of cybercrime complaints monthly, but most victims never report incidents — either out of shame, lack of awareness, or simply not knowing how to verify a suspicious message.

We asked ourselves: What if every Pakistani had an AI bodyguard in their pocket?

PakSafe was born from a late-night conversation about a family member who lost money to a "prize notification" scam. The idea was simple: build a free, accessible, AI-powered tool that lets anyone — regardless of technical skill — instantly verify if a phone number, message, URL, or image is a scam. No jargon. No complexity. Just scan, get a verdict, and stay safe.

What it does

PakSafe is a comprehensive fraud detection platform with six core capabilities:

  1. Multi-Modal Scam Analysis Users can paste or upload:

Phone numbers — checks against known scammer databases and patterns URLs / Links — detects phishing, fake banking pages, and malicious domains Text messages — analyzes language patterns, urgency tactics, and red flags Screenshots — uses vision AI to read and evaluate scam content from images Each scan returns:

A risk score 0/100 A clear verdict: SAFE, SUSPICIOUS, or HIGH RISK Red flags explaining why it is dangerous Bilingual explanations in English and Urdu An education card teaching the user how to avoid similar scams in the future

  1. Live Scam Intelligence Feed Real-time news from global sources filtered for Pakistan-relevant cybercrime stories. A "LIVE" pulsing indicator shows users the threat landscape is constantly evolving.

  2. Pakistan Scam Heatmap Visualizes scam density across Pakistani cities, helping users understand regional threat patterns and stay alert when traveling or communicating with contacts from high-risk areas.

  3. Scan History (Synced Across Devices) Every scan is saved to a Supabase database tied to the user's account. Log in on your phone, your laptop, or a friend's device — your history follows you. History is private via Row-Level Security (RLS): no user can see another's scans.

  4. Family Protection Users can add family members to a protected list, marking their phone numbers as "safe." If a scammer spoofs a trusted contact's number, PakSafe helps users distinguish the real from the fake.

  5. FIA Complaint Generation One-tap generation of a formatted cybercrime complaint for the Federal Investigation Agency of Pakistan, auto-filled with scan details. Users can copy, share via WhatsApp, or submit directly.

    How we built it

    Architecture PakSafe follows a modern Jamstack architecture:

┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐ │ React + Vite │ ────▶│ Supabase Edge │────▶│ Gemini 2.5 │ │ Tailwind CSS │ │ Functions │ │ Flash (LLM) │ │ shadcn/ui │ │ + PostgreSQL │ │ + Vision │ └─────────────────┘ └──────────────────┘ └─────────────────┘ Frontend:

React 19 + Vite + TypeScript for type-safe, fast development Tailwind CSS for utility-first, responsive styling shadcn/ui for accessible, composable UI primitives (dialogs, cards, buttons, toast notifications) Lucide React for consistent, crisp iconography Framer Motion for subtle animations and transitions Sonner for elegant toast notifications Backend / Data:

Supabase as the backend-as-a-service: PostgreSQL for relational data (scam reports, analysis history, safe numbers, family profiles) Row-Level Security (RLS) policies for strict data privacy Edge Functions (Deno) for serverless AI inference, news aggregation, and complaint generation Auth with email/password + anonymous login support AI / ML:

Gemini 2.5 Flash via Supabase Edge Functions for: Multi-modal scam analysis (text + image) Structured JSON output (risk scores, red flags, bilingual explanations) Dynamic education card generation FIA complaint drafting External Integrations:

The News API for real-time scam-related news Text-to-Speech for Urdu audio explanations (accessibility) Database Schema Highlights profiles ──► user accounts + metadata analysis_history ──► per-user scan logs (RLS-protected) scam_reports ──► community-submitted scam data safe_numbers ──► user-curated whitelist (RLS-protected) family_members ──► protected contacts per user (RLS-protected) All tables enforce per-user isolation via user_id foreign keys and auth.uid() RLS policies. Even database administrators cannot read another user's private scan history without bypassing RLS.

Design System We crafted a dark cybersecurity aesthetic:

Primary palette: Deep navy (#0a1628), glassmorphism cards (bg-white/5 backdrop-blur-sm), neon-blue accents (#3b82f6) Risk visualization: Animated circular progress rings with color-coded severity (green $\leq 33$, amber $34$–$66$, red $> 66$) Minimal aesthetic: Generous whitespace, restrained shadows, clean typography with Montserrat for headings and system fonts for body text Accessibility-first: WCAG AA contrast ratios, keyboard navigation, screen-reader labels

Challenges we ran into

  1. The localStorage Privacy Trap Initially, scan history was stored in localStorage. This created three problems:

No sync: history vanished when users switched devices No privacy: anyone using the same browser saw all scans No persistence: clearing cache wiped everything Solution: Migrated to a user-scoped database table with Supabase RLS. Every scan is now tied to auth.uid(), fetched per-user, and survives across sessions and devices. The migration required:

Adding user_id, scam_category, and result JSONB columns Rewriting RLS policies from USING (true) (public) to USING (user_id = auth.uid()) (private) Replacing localStorage.getItem("paksafe_history") with authenticated Supabase queries Adding a "Sign In to View History" state for unauthenticated visitors

  1. News Feed Staleness The initial news API endpoint (/v1/news/top) returned articles from 1,000+ days ago with no date filtering. Sorting by published_on failed because the API returned published_at, causing random ordering.

Solution: Switched to /v1/news/all with published_after filter (last 30 days), corrected the sort field to published_at, and added a showAllNews toggle so users control article quantity.

  1. Safe Numbers Shared Across All Users The first implementation of "Safe Numbers" stored data globally — every user saw everyone else's safe contacts, creating a privacy leak.

Solution: Mirrored the history migration pattern. Added user_id to the safe_numbers table, rewrote RLS policies, and updated the frontend to query only the current user's data. Now each user has a private whitelist.

  1. Real-Time Auth State Across Pages After adding login/signup, navigation between pages lost auth context on hard refreshes. The AuthContext was not rehydrating from Supabase sessions correctly.

Solution: Implemented onAuthStateChange listener in AuthContext to synchronize React state with Supabase's session lifecycle. Added getSession() call on mount to handle page refreshes gracefully.

Accomplishments that we're proud of

Zero-to-Production in Record Time Built a full-stack, AI-powered cybersecurity platform — database, auth, Edge Functions, multi-modal AI, real-time news, and responsive UI — as a lean team.

Privacy by Design Every piece of user data is scoped, encrypted at rest, and protected by RLS. We did not bolt privacy on; we architected it from the ground up. Scan history, safe numbers, and family data are invisible to other users and even to most admins.

Bilingual Accessibility Every explanation is generated in both English and Urdu, with optional text-to-speech for Urdu. This is critical for Pakistan, where English proficiency varies widely and Urdu is the lingua franca.

Community Impact Feature The FIA Complaint Generator turns a technical scan into a government-ready document. This bridges the gap between detecting fraud and reporting it — a friction point that stops most victims from seeking justice.

Family-Centric Design The Family Protection module recognizes that scammers often target the elderly and less tech-savvy relatives. By letting users build a protected-contact list, PakSafe extends its shield beyond the individual to the household.

Glassmorphism + Cybersecurity Aesthetic We invested heavily in visual cohesion — glassmorphism cards, neon-blue accents, animated shield icons, and a consistent dark theme across every page. The result feels like a premium threat intelligence dashboard, not a basic web form.

What we learned

Technical Lessons RLS is non-negotiable for user data. A single USING (true) policy is a data breach waiting to happen. We learned to treat RLS as part of the schema design, not an afterthought. Edge Functions decouple AI from the frontend. Running Gemini via Supabase Edge Functions keeps API keys secure, handles JSON parsing server-side, and lets us iterate on prompts without redeploying the client. Multi-modal AI is surprisingly robust. Gemini 2.5 Flash accurately reads scam text from low-resolution screenshots, detects urgency language patterns, and generates structured risk assessments from unstructured inputs. Database migrations need backward compatibility. Adding user_id as nullable first, then backfilling, then enforcing non-null, prevents downtime during schema evolution. Product Lessons Accessibility beats complexity. A grandmother in rural Punjab should be able to paste a message and get a clear "DANGER" or "SAFE" result in 3 seconds. Every feature we added was tested against this bar. Trust is visual. Users judge a security tool by its polish. The circular risk score, pulsing "LIVE" indicators, and glassmorphism design signal "this is serious software" before a single word is read. Localization is a feature, not a translation. Generating Urdu explanations with culturally relevant examples (e.g., referencing Easypaisa scams, fake NADRA messages) makes the AI feel native, not translated. Team Lessons Deferred decisions accumulate debt. The localStorage shortcut seemed harmless on day one but required a full migration rewrite later. We learned to ask: "Will this scale to 10,000 users?" Design systems save time. Defining glass-card, neon-blue, and text-neon-blue as Tailwind utilities early on meant every new page was themed automatically.

What's next for PakSafe

Community Scam Database Let users report new scam numbers/messages directly from the app. Aggregate reports into a crowdsourced threat intelligence feed, visible on the heatmap and intelligence feed.

WhatsApp Integration A WhatsApp bot that forwards suspicious messages to PakSafe and returns a risk score instantly. This meets users where they already are — Pakistan's most-used messaging app.

Push Notifications Alert users when a new scam trend is detected in their city or when a family member's safe number is flagged in a new spoofing campaign.

Urdu Voice Interface Full voice-based interaction in Urdu: speak a message, get a verbal risk assessment. Critical for users with limited literacy or visual impairment. PakSafe for Every South Asian Country Localize the platform for India, Bangladesh, and Sri Lanka. Each country gets its own scam taxonomy, regulatory body integration (e.g., India's CERT-In), and language support.

Open Threat Intelligence API Release a public API for researchers, banks, and telcos to query PakSafe's scam database, accelerating the fight against fraud across the region.

Built With

Share this project:

Updates