AntiRagging 🛡️

Rapid incident reporting, evidence preservation, and real‑time response coordination for campus safety.

AntiRagging is a full‑stack platform that empowers university students, security guards, and administrators to collaboratively maintain a safe campus environment. Students can discreetly report incidents with photo evidence, guards receive instant alerts and can respond in seconds, and administrators get a bird's‑eye view with analytics and guard management — all in real time.

---

Overview

AntiRagging solves the critical gap between incident occurrence and institutional response. When a student witnesses or experiences harassment, they can file a detailed report (anonymously if preferred) that instantly notifies on‑duty guards and administrators. The platform preserves evidence (photos, timestamps, GPS location) for investigations and provides a complete audit trail from report to resolution.

The system is built as a monorepo with three distinct sub‑projects:

Directory	Purpose	Tech Stack
backend/	REST API + WebSocket server	Node.js, Express, MongoDB, Socket.io
web/	Admin & Guard dashboard	React + Vite, Tailwind CSS, Zustand, Recharts
mobile/	Student reporting app	React Native + Expo

---

Tech Stack

Backend

Technology	Purpose
Node.js (18+)	Runtime
Express	HTTP server & routing
MongoDB + Mongoose	Database & ODM
Socket.io	Real‑time bidirectional communication
JWT (jsonwebtoken)	Authentication tokens
bcryptjs	Password hashing
Cloudinary	Image/evidence upload hosting
Nodemailer	Email notifications (SMTP)
Twilio	SMS notifications
Multer	File upload middleware

Web Dashboard

Technology	Purpose
React 19	UI framework
Vite 8	Build tool & dev server
Tailwind CSS 4	Utility‑first styling
React Router 7	Client‑side routing
Zustand	State management
Recharts	Data visualization (charts)
Socket.io‑client	Real‑time updates
Axios	HTTP client
React Hot Toast	Toast notifications
Lucide React	Icon library

Mobile App

Technology	Purpose
React Native (0.85)	Cross‑platform mobile framework
Expo SDK 56	Development & build toolchain
React Navigation	Screen navigation (stack + tabs)
Axios	HTTP client
Socket.io‑client	Real‑time updates
Expo Location	GPS tracking
Expo Image Picker	Camera/gallery evidence capture
Expo Notifications	Push notifications
React Native Maps	Map view for guard tracking

---

Features

🔐 Incident Reporting (Mobile + Web)

• File detailed reports with title, description, severity level, and type
• Capture and upload photo/video evidence via camera or gallery
• Automatic GPS location tagging
• Anonymous reporting option
• View and track your own incident history

🆘 SOS Emergency Button (Mobile)

• One‑tap emergency alert to all on‑duty guards
• Sends live GPS coordinates and triggers high‑severity alert
• Real‑time notification to admin dashboard with critical priority

⚡ Real‑time Alerts (WebSocket)

• New incidents appear instantly on guard and admin dashboards
• Incident status changes update in real time (assigned → in‑progress → resolved)
• Guard location tracking updates on admin map view
• Toast notifications for critical alerts

👮 Guard Management & Tracking

• Add, edit, and remove security personnel
• Assign zones and shifts to each guard
• Track guard availability status: Available / On Duty / Off Duty
• View live guard locations on a map (admin)

📊 Admin Dashboard & Analytics

• High‑level stats: total incidents, resolution rate, active guards, avg response time
• Data visualizations: severity distribution (bar), status distribution (pie), incidents over time (line)
• Hotspot locations ranked by incident frequency
• Full incident triage: assign guards, update status, add timeline notes

🔑 OTP‑based Authentication

• Admin login: email + password
• Guard login: phone + PIN
• Student login: university email + password
• Role‑based routing and access control

---

Project Structure

antiragging/
├── backend/                          # Express API server
│   ├── middleware/
│   │   ├── adminAuth.js              # Admin role verification
│   │   ├── auth.js                   # JWT authentication
│   │   ├── guardAuth.js             # Guard role verification
│   │   ├── upload.js                # Multer file upload config
│   │   └── validate.js              # Request validation
│   ├── models/
│   │   ├── Admin.js                 # Admin schema (name, email, password)
│   │   ├── Evidence.js              # Evidence schema (file URL, type, incidentId)
│   │   ├── Guard.js                 # Guard schema (name, phone, pin, status, zones)
│   │   ├── Incident.js              # Incident schema (title, severity, status, location, evidence)
│   │   ├── OTP.js                   # OTP schema for phone verification
│   │   ├── NotificationLog.js       # Notification audit log
│   │   └── Student.js               # Student schema (name, email, rollNo, campus)
│   ├── routes/
│   │   ├── authRoutes.js            # POST /auth/login, /auth/verify-otp
│   │   ├── incidentRoutes.js        # CRUD incidents, respond, assign
│   │   ├── guardRoutes.js           # Guard CRUD, status management
│   │   ├── evidenceRoutes.js        # Upload evidence files
│   │   └── adminRoutes.js           # Analytics, guard oversight
│   ├── services/
│   │   ├── cloudinaryService.js     # Cloudinary image upload
│   │   ├── emailService.js          # Nodemailer email dispatch
│   │   ├── smsService.js            # Twilio SMS dispatch
│   │   └── guardLocator.js          # Nearest guard calculation
│   ├── socket/
│   │   └── alertSocket.js           # Socket.io event handlers
│   ├── uploads/                     # Temporary file storage
│   ├── .env.example                 # Environment config template
│   └── server.js                    # App entry point
│
├── web/                             # React + Vite web dashboard
│   ├── public/                      # Static assets
│   ├── src/
│   │   ├── components/
│   │   │   ├── Sidebar.jsx          # Role‑based navigation sidebar
│   │   │   ├── Header.jsx           # Top bar with user dropdown
│   │   │   ├── DataTable.jsx        # Reusable table (search, sort, paginate)
│   │   │   ├── IncidentCard.jsx     # Incident feed card
│   │   │   ├── StatusBadge.jsx      # Color‑coded status chips
│   │   │   ├── LoadingSpinner.jsx   # Animated loader
│   │   │   └── EmptyState.jsx       # Empty state placeholder
│   │   ├── pages/
│   │   │   ├── LoginPage.jsx        # Role‑based login (admin/guard/student)
│   │   │   ├── AdminDashboard.jsx   # Overview stats & incident triage
│   │   │   ├── AdminGuardManagement.jsx  # Guard CRUD with modals
│   │   │   ├── AdminAnalytics.jsx   # Charts & hotspot analysis
│   │   │   ├── GuardDashboard.jsx   # Incident feed & status toggle
│   │   │   ├── StudentDashboard.jsx # Student incident history
│   │   │   ├── IncidentDetailPage.jsx # Full incident view
│   │   │   └── NotFoundPage.jsx     # 404 page
│   │   ├── hooks/
│   │   │   ├── useAuth.js           # Auth state selector
│   │   │   └── useSocket.js         # WebSocket event listener
│   │   ├── store/
│   │   │   ├── authStore.js         # Auth state (Zustand)
│   │   │   ├── incidentStore.js     # Incident state (Zustand)
│   │   │   └── guardStore.js        # Guard state (Zustand)
│   │   ├── services/
│   │   │   ├── api.js               # Axios instance with interceptors
│   │   │   └── socket.js            # Socket.io client management
│   │   ├── router.jsx               # Route definitions & guards
│   │   ├── App.jsx                  # Root layout component
│   │   └── main.jsx                 # Entry point
│   ├── index.html
│   ├── vite.config.js
│   ├── tailwind.config.js
│   └── package.json
│
└── mobile/                          # React Native + Expo app
    ├── assets/                      # App icons & splash
    ├── src/
    │   ├── components/              # Shared UI components
    │   ├── navigation/              # Stack & tab navigators
    │   ├── screens/                 # Screen views (report, SOS, history)
    │   ├── services/                # API & socket clients
    │   └── utils/                   # Helpers & constants
    ├── app.json
    └── package.json

---

Getting Started

Prerequisites

• Node.js 18 or higher
• npm 9 or higher
• MongoDB 6+ (local or Atlas connection)
• Cloudinary account (for evidence image uploads)
• Twilio account (for SMS notifications — optional)
• SMTP credentials (for email notifications — optional)
• Expo CLI (npm install -g expo-cli) — for mobile development

Clone & Install

# Clone the repository
git clone https://github.com/your-org/antiragging.git
cd antiragging

# Install backend dependencies
cd backend
npm install

# Install web dashboard dependencies
cd ../web
npm install

# Install mobile app dependencies
cd ../mobile
npm install

Configure Environment

Copy the example environment file and fill in your credentials:

cd backend
cp .env.example .env

Edit .env with your values (see Environment Variables section below).

Run Backend Server

cd backend
npm start           # or: node server.js

The API server starts on http://localhost:3000 (or the PORT you configured).

Run Web Dashboard

cd web
npm run dev          # starts Vite dev server on port 5173 by default

For production:

cd web
npx vite build       # builds to dist/
npx vite preview     # serves the build on port 4173

Run Mobile App

cd mobile
npx expo start       # starts Expo dev server

Scan the QR code with the Expo Go app on your phone, or press a for Android emulator / i for iOS simulator.

---

API Overview

Authentication

Method	Endpoint	Description
POST	/api/auth/login	Login — accepts { email, password, role } or { phone, pin, role }
POST	/api/auth/verify-otp	Verify OTP for phone login (guard)
POST	/api/auth/logout	Invalidate session

Incidents

Method	Endpoint	Description
GET	/api/incidents	List all incidents (admin/guard)
GET	/api/incidents/my-incidents	List current student's incidents
GET	/api/incidents/:id	Get single incident details
POST	/api/incidents	Create new incident
PATCH	/api/incidents/:id/status	Update incident status
POST	/api/incidents/:id/assign	Assign guard to incident
POST	/api/incidents/:id/respond	Guard accepts/responds to incident

Evidence

Method	Endpoint	Description
POST	/api/evidence/upload	Upload evidence file (image/video)
DELETE	/api/evidence/:id	Remove evidence

Guards

Method	Endpoint	Description
GET	/api/guards	List all guards
POST	/api/guards	Add new guard
PATCH	/api/guards/:id	Update guard details
DELETE	/api/guards/:id	Remove guard
PATCH	/api/guards/status	Update own status (guard)
GET	/api/guards/locations	Get live guard locations (admin)

Admin

Method	Endpoint	Description
GET	/api/admin/analytics	Dashboard analytics (stats, charts, hotspots)

---

Environment Variables

Variable	Description	Default
PORT	API server port	3000
NODE_ENV	Environment mode	development
MONGO_URI	MongoDB connection string	mongodb://localhost:27017/anti-ragging
JWT_SECRET	JWT signing key	(must change in production)
CLOUDINARY_CLOUD_NAME	Cloudinary cloud name	—
CLOUDINARY_API_KEY	Cloudinary API key	—
CLOUDINARY_API_SECRET	Cloudinary API secret	—
SMTP_HOST	SMTP server host	smtp.mailtrap.io
SMTP_PORT	SMTP server port	2525
SMTP_USER	SMTP username	—
SMTP_PASS	SMTP password	—
EMAIL_FROM	From address for emails	no-reply@antiragging.edu
TWILIO_ACCOUNT_SID	Twilio account SID	—
TWILIO_AUTH_TOKEN	Twilio auth token	—
TWILIO_PHONE_NUMBER	Twilio SMS number	—

Web Environment Variables

Create web/.env:

VITE_API_URL=http://localhost:3000/api
VITE_SOCKET_URL=http://localhost:3000

---

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Please ensure:

• Code follows the existing style (ESLint configs are in each sub‑project)
• New components are properly typed/documented
• Tests pass (run npm test in the relevant sub‑project)
• API changes are reflected in the route files and documented in this README

---

License

Distributed under the MIT License. See LICENSE for more information.

---

AntiRagging — Building safer campuses, one report at a time.