π Community Issue Reporting Platform (CIRP) β Community Problem Reporting System
π Features
User Portal (Reporter)
π Submit new reports (title, description, category, location)
π View all submitted reports
πΌοΈ Optional: Upload image (placeholder logic supported)
π View the status of each report (Pending β In Progress β Resolved)
π Track creation timeline
Admin Portal
π View all reports from users
π§ Update report status (workflow-based)
ποΈ Delete or archive reports
π Monitor report trends and categories
ποΈ Filter reports by status/category
Super Admin Portal (Optional for Expansion)
π Manage admin accounts
ποΈ Full control over system settings
π― Access logs and maintenance tools
π‘οΈ Configure security & roles
π οΈ Tech Stack
Frontend: Next.js 15 (App Router), React, TailwindCSS
Backend: NestJS (Controllers β Services β Repositories)
Database: PostgreSQL
Authentication (optional): JWT (Admin login)
Realtime Updates (optional): Socket.io
Deployment: Vercel (Frontend), Supabase / Railway / Render (Backend)
Language: TypeScript
π¦ Quick Start
Prerequisites
Node.js 18+
PostgreSQL installed locally or cloud database
(Optional) Docker for easy setup
Installation
- Clone repository & install dependencies:
npm install
- Configure environment variables:
cp .env.example .env
Then edit .env with your database credentials:
DATABASE_URL=postgres://user:password@localhost:5432/irp JWT_SECRET=your_secret_key PORT=3000
- Set up PostgreSQL database:
manually run SQL from database/schema.sql
- Run backend server:
npm run start:dev- Run frontend server:
npm run dev
Then open: π http://localhost:3000/
π Project Structure
issue-reporting-platform/
Next.js App Router with Serverless API + Layered (ControllerβService) Architecture
βββ app/
β βββ admin/
β β βββ (admin-related pages and components)
β βββ dashboard/
β β βββ components/
β β β βββ api.ts
β β βββ (dashboard-related pages and components)
β βββ [[...sign-in]]/
β β βββ page.tsx
β βββ [[...sign-up]]/
β β βββ page.tsx
β βββ components/
β β βββ EnhancedQRCode.tsx
β β βββ FeaturesSection.tsx
β β βββ HeroSection.tsx
β β βββ Navbar.tsx
β β βββ TestimonialCarousel.tsx
β βββ hooks/
β β βββ useProfileStatus.ts
β βββ types/
β β βββ (type definitions)
β βββ layout.tsx
β βββ page.tsx
βββ backend/
β βββ controllers/
β β βββ services/
β β βββ db/
β β βββ utils/
β βββ db/
β βββ services/
β βββ types/
β βββ utils/
βββ components/
β βββ (Global reusable components if any)
βββ hooks/
β βββ (Global reusable hooks if any)
βββ lib/
β βββ supabaseClient.ts
βββ public/
β βββ (Static assets like images, fonts, etc.)
βββ .env.example
βββ .gitignore
βββ api.rest
βββ eslint.config.mjs
βββ next.config.ts
βββ package.json
βββ postcss.config.mjs
βββ README.md
βββ tsconfig.json
ποΈ Database Schema
reports
Column Type Description
-- Create reports table
CREATE TABLE reports (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
user_id TEXT NOT NULL,
title TEXT NOT NULL,
description TEXT NOT NULL,
category TEXT NOT NULL,
location TEXT NOT NULL,
image_url TEXT,
status TEXT NOT NULL DEFAULT 'pending',
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
-- Enable RLS
ALTER TABLE reports ENABLE ROW LEVEL SECURITY;
-- Policy: Users can view all reports (public read)
CREATE POLICY "Anyone can view reports"
ON reports FOR SELECT
USING (true);
-- Policy: Users can insert their own reports
CREATE POLICY "Users can insert their own reports"
ON reports FOR INSERT
WITH CHECK (auth.uid()::text = user_id);
-- Policy: Users can update their own reports
CREATE POLICY "Users can update their own reports"
ON reports FOR UPDATE
USING (auth.uid()::text = user_id)
WITH CHECK (auth.uid()::text = user_id);
-- Policy: Users can delete their own reports
CREATE POLICY "Users can delete their own reports"
ON reports FOR DELETE
USING (auth.uid()::text = user_id);
-- Optional: Create index on user_id for faster queries
CREATE INDEX reports_user_id_idx ON reports(user_id);
CREATE INDEX reports_created_at_idx ON reports(created_at DESC);
See database/schema.sql for full schema.
π Authentication (Bonus Feature)
User Roles
-
User (Reporter) β Create & view reports
-
Admin β Manage reports
-
Super Admin β Manage admins + full control
JWT-based login for Admin (optional enhancement).
π§ API Endpoints
POST /api/report
Create a new report
GET /api/report
Fetch all reports
GET /api/report/:id
Fetch single report by ID
PATCH /api/report/:id/status
Update report status
DELETE /api/report/:id
Delete or archive report
All responses return structured JSON.
π’ Deployment
Frontend (Next.js) β Deploy to Vercel
vercel
Add environment variables to Vercel dashboard
Backend (NextJS) β Deploy to Render / Railway / Supabase
Add environment variables
Connect PostgreSQL instance
Build & deploy
π Development Timeline
β Week 1: Project scaffolding, DB design, backend modules
π Week 2: API development, frontend pages
β³ Week 3: Admin panel + workflows
β³ Week 4: Testing, optimization, documentation, deployment
π¨βπ» Author
Ugwoke Levi Soromto (Levibliz)
GitHub: (Add your GitHub link here)
Email: levisoromto1m@gmail.com
Built with NestJS & Next.js | Powered by PostgreSQL