A full-stack user moderation platform for online communities. Users can submit reports against other users, moderators can review them and apply actions, and admins can manage moderator roles.
Live demo: https://moderationtool.saadih.work
- Authentication — register and log in with JWT-based sessions
- Reports — submit reports against other users with a reason and description; view your own submitted reports
- Moderation (Moderator/Admin) — review open reports, apply
WARN,MUTE, orBANactions, update report status (OPEN→REVIEWING→RESOLVED), and view full action history per report - Admin panel (Admin only) — promote any player to moderator by user ID
| Layer | Technology |
|---|---|
| Frontend | React 19, TypeScript, Vite |
| Styling | Tailwind CSS |
| Backend | Spring Boot 4, Java 21 |
| Database | PostgreSQL 16 |
| Auth | Spring Security + stateless JWT (HS256) |
| ORM | Spring Data JPA / Hibernate |
| Containerization | Docker + Docker Compose |
Requires Docker and Docker Compose. Copy .env.example to .env, fill in your secrets, then:
docker compose up --buildTo bootstrap an admin account:
docker compose exec db psql -U postgres -d moderationtool -c \
"UPDATE users SET role = 'ADMIN' WHERE username = 'your-username';"Once you have an admin account you can promote other users to MODERATOR through the Admin panel in the UI.
moderationtool/
├── backend/ # Spring Boot REST API
│ └── src/
│ └── main/java/com/sadih/moderationtool/
│ ├── controller/ # REST endpoints
│ ├── service/ # Business logic
│ ├── model/ # JPA entities & enums
│ ├── dto/ # Request/response shapes
│ ├── repository/ # Spring Data JPA repos
│ └── security/ # JWT filter, Spring Security config
├── frontend/ # React + TypeScript SPA
│ └── src/
│ ├── components/ # AuthView, ReportsView, ModerationView, AdminView
│ ├── api.ts # Typed HTTP client
│ └── types.ts # Shared TypeScript interfaces
├── docker-compose.yml
└── .env.example
- The focus of this project is the backend API — layered architecture, JWT auth, role-based access control, and service-level unit tests. The React frontend is intentionally minimal and exists to demonstrate the API end-to-end.
- Auth tokens are stored in memory only — refreshing the page will require logging in again. This is intentional for simplicity.
- The backend uses
ddl-auto=updatefor schema management, which is suitable for development and small deployments.