A research-oriented prototype dashboard that demonstrates how reporters can receive timely feedback and visible evidence of impact on the issues they submit.
This project is inspired by Designing Fictions for Collective Civic Reporting of Privacy Harms and is intended as a demo for research discussion.

Build a reporter-facing dashboard that:

• Lists submitted tickets and their status.
• Shows a timeline of actions (e.g., Received → In Review → Responded).
• Displays sample automated + human comments.
• Provides a visual impact feed simulating outcomes (e.g., ad removed, advertiser warned).

Includes an Admin/Mock Reviewer panel to simulate reviewer actions and generate live feedback messages.

• Reporter Dashboard

  • Submit a ticket (synthetic data, no real backend storage).
  • View status updates in real-time via WebSockets.
  • Timeline of actions with both automated + human reviewer notes.
  • Toggle for anonymized summaries.

• Admin Panel

  • See list of pending tickets.
  • Update ticket status (Received, In Review, Responded).
  • Add feedback messages (auto-generated or custom).
  • Trigger impact events (ad removed, advertiser warned).

• Impact Feed

  • Live simulation of positive outcomes from submitted reports.

• Frontend: Next.js (React, TypeScript, TailwindCSS)
• Backend: Node.js + Express
• Database: PostgreSQL (synthetic sample data seeded)
• Real-time: WebSockets (socket.io)
• Hosting (Free Tier):
  • Frontend → Vercel
  • Backend + DB → Render / Railway / Supabase

reporter-dashboard/
├── client/ # Next.js frontend
│ ├── app/ # App Router pages
│ ├── components/ # UI components
│ ├── lib/ # Utilities (WebSocket client, API helpers)
│ └── styles/ # Global Tailwind styles
│
├── server/ # Node.js backend
│ ├── index.js # Express + Socket.io server
│ ├── routes/ # Ticket + admin routes
│ ├── db/ # Prisma ORM setup (Postgres)
│ └── utils/ # Helper functions (mock data, anonymizer)
│
├── prisma/ # Schema + migrations
│ └── schema.prisma
│
├── .env.example # Example env vars
├── package.json
└── README.md

git clone https://github.com/Swaraj-Patil/reporter-dashboard.git
cd reporter-dashboard

Copy .env.example → .env and fill in values:

DATABASE_URL="postgresql://user:password@localhost:5432/reporterdb"
NEXT_PUBLIC_WS_URL="http://localhost:4000"

# frontend
cd client
npm install

# backend
cd ../server
npm install

cd ..
npx prisma migrate dev --name init
npx prisma db seed

# start backend
cd server
npm run dev

# in new terminal, start frontend
cd client
npm run dev

• Frontend → http://localhost:3000
• Backend → http://localhost:4000

(to be added after recording demo walk-through)

• Timely Feedback → Immediate updates through live WebSockets.
• Visible Benefits → Simulated "impact feed" showing real-world consequences.
• Transparency & Control → Anonymized summaries toggle for privacy.

This directly addresses participant expectations from the BEST study.

PRs and suggestions are welcome. This is a research prototype — feel free to adapt for academic demos.

MIT