Log inSign up
project logo

Izuhbel

watchly

Public
Remixed
Community Safety Intelligence & Incident Verification Platform
Edit with AI
1 Branch
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
index.ts
README.md

Watchly — Community Safety Intelligence Platform

A premium enterprise civic-tech platform for residential communities in Nigeria to report, verify, manage, and monitor local security incidents through community collaboration.

Features

  • Authentication — Login & Register with split-screen branding
  • Dashboard — Safety score gauge, stats, active incidents, urgent alerts, activity feed
  • Incident Feed — Searchable, filterable, sortable incident cards with confidence meters
  • Incident Details — Timeline, evidence gallery, location map, admin updates, verification actions
  • Report Incident — Multi-step flow (Category → Details → Location → Evidence → Review → Confirmation)
  • Alerts — Urgent, verified, notices, and resolved alerts with pinning
  • Analytics — Monthly trends, category breakdown, risk areas, community safety scores
  • Communities — Directory with safety scores and member counts
  • Members — Table with roles, status, and activity metrics
  • Reports — Export-ready report types
  • Settings — Community, notifications, security, and preferences tabs
  • Help — FAQ and support

Design System

  • Primary: #5B3FD9 (Deep Purple) · Secondary: #1D2433 (Dark Navy)
  • Background: #F8F9FC · Font: Inter
  • Rounded corners (16px), soft shadows, 8-point spacing
  • Status chips, priority badges, confidence meters, progress bars

Tech Stack

  • React 18 (client-side SPA)
  • Hono server (Val Town)
  • Twind (Tailwind CSS at runtime)
  • Inter font via Google Fonts

Architecture

index.ts              ← Hono backend (serves frontend)
frontend/
  index.html          ← HTML shell (Twind + Inter + React)
  index.tsx           ← React entrypoint
  components/
    App.tsx            ← Root: routing + auth + layout
    Sidebar.tsx        ← Navigation sidebar
    TopBar.tsx         ← Search, community selector, notifications, profile
    Dashboard.tsx      ← Safety overview with charts
    IncidentFeed.tsx   ← Filterable incident list
    IncidentDetails.tsx← Timeline, evidence, map, actions
    ReportIncident.tsx ← Multi-step report form
    Analytics.tsx      ← Charts and risk analysis
    SimplePages.tsx    ← Communities, Alerts, Members, Reports, Settings, Help
    ui.tsx             ← Shared component library
    icons.tsx          ← Inline SVG icon set
  data/
    mockData.ts        ← Realistic Nigerian incident data