CampusConnect 🚀 — Connected Campus Community Hub & Helpdesk

CampusConnect is a full-stack MERN (MongoDB, Express, React, Node.js) web application designed to streamline student communication, enhance event management, handle claims, and coordinate complaint resolutions within a campus.

The portal features role-based authorization (Student, Faculty, and Admin) and integrates highly interactive, Awwwards-inspired design aesthetics and 3D WebGL visualizations to deliver a premium user experience.

---

✨ Key Features

💻 3D Visuals & Awwwards-Inspired Interactions

• 3D Particle Network (Hero Section): Built using vanilla Three.js in a responsive WebGL Canvas, a floating, rotating connection grid that reacts dynamically to mouse coordinate movement.
• 3D Card Hover Tilt: Interactive 3D tilt transformations (using custom use3DTilt hook) bound to cards on the landing page, following mouse moves with smooth perspective physics.
• Cursor Glow Backdrop: A soft, custom radial backdrop layer sitewide that follows cursor coordinate changes smoothly.
• SVG Scroll Progress: A top-anchored indicator bar that fills from 0% to 100% as the viewport scrolls.
• Shimmer Skeletons: Replaced standard loading circles with modern shimmering wireframe components across discussion boards, event cards, and lost listings.

👥 User Modules & Authentication

• Role-Based Auth (JWT): Dedicated views and control states for Students, Faculty, and Administrators.
• Discussion Forum: Upvoting entries, adding replies/comments, search keyword queries, and marking items as resolved.
• Campus Events Calendar: Live scheduling grids with custom date listings and an event creation modal.
• Lost & Found Tracker: Report missing belongings, claim items with alert popups, and toggle list states.
• Complaints Portal: Allows students to report issues anonymously (generating safe, random Tracking IDs to search and check status in real-time).
• Admin Moderator Dashboard: Counters aggregate DB totals in real-time. Admins can view/update user permissions, delete entries, and respond to complaints directly.

---

🛠️ Tech Stack

• Frontend: React 18, React Router v6, TailwindCSS, Three.js, React Icons
• Backend: Node.js, Express, Nodemon, Express Async Handler
• Database: MongoDB (Mongoose Schema Modelling)
• Auth: JSON Web Tokens (JWT) + Bcrypt Password Hashing

---

📁 Project Structure

campus-connect/
├── backend/                  # Express API Server
│   ├── config/               # DB connections & variables
│   ├── controllers/          # Mongoose database query controllers
│   ├── middleware/           # Protect routes, role validations, error handlers
│   ├── models/               # MongoDB models (User, Forum, Event, LostFound, Complaint)
│   ├── routes/               # API endpoints registration
│   └── server.js             # Express startup file
├── frontend/                 # Vite + React Client
│   ├── src/
│   │   ├── components/       # Reusable layouts & routing wrappers
│   │   ├── context/          # Auth Context State Providers
│   │   ├── hooks/            # use3DTilt hook
│   │   ├── pages/            # View pages (Forum, Events, LostFound, Dashboard, etc.)
│   │   ├── index.css         # Global Tailwind classes & shimmer keyframe definitions
│   │   └── main.jsx          # Entry point
│   ├── package.json          # React configuration & dependencies (Vite, Three.js)
│   └── vite.config.js
├── .env                      # API Port and Database URI configuration
├── .gitignore                # Protects modules and secrets from commits
└── README.md

---

🚀 Setup & Installation

1. Prerequisites

Ensure you have the following installed on your machine:

• Node.js (v16.0.0 or higher)
• MongoDB Community Server running locally (port 27017), or a MongoDB Atlas cloud database.

2. Installation

1. Clone the repository:

   git clone https://github.com/your-username/campusconnect.git
   cd campusconnect

2. Install all dependencies concurrently for both backend and frontend:

   npm run install-all

3. Environment Variables

Create a file named .env in the root directory and configure the variables:

NODE_ENV=development
PORT=5000
MONGO_URI=mongodb://localhost:27017/campusconnect
JWT_SECRET=your_jwt_secret_phrase

(Note: If using MongoDB Atlas, replace MONGO_URI with your cluster URL).

4. Running the App

Start both the API backend server and the frontend client concurrently with hot reloading:

npm run dev

• Frontend client: http://localhost:5173
• Backend API server: http://localhost:5000

---

🔌 API Endpoints Reference

Authentication & Users

• POST /api/users - Register a student
• POST /api/users/login - Authenticate & obtain JWT
• GET /api/users/profile - Fetch current user detail
• GET /api/users/stats - Fetch database statistics counts (Admin only)

Discussion Forum

• GET /api/forum - Query posts with search keywords & pagination
• POST /api/forum - Submit a new topic discussion
• PUT /api/forum/:id/upvote - Upvote a forum topic
• POST /api/forum/:id/replies - Comment on a topic discussion
• PUT /api/forum/:id/resolve - Toggle resolve flag

Campus Events

• GET /api/events - Get event listings
• POST /api/events - Submit a new event (Faculty / Admin only)
• DELETE /api/events/:id - Remove an event (Faculty / Admin only)

Lost & Found

• GET /api/lost-found - Fetch lost/found reports
• POST /api/lost-found - File a new lost/found report item
• PUT /api/lost-found/:id/resolve - Toggle item as resolved/recovered

Complaints

• POST /api/complaints - File a complaint (supports anonymous submission)
• GET /api/complaints/track/:trackingId - Query a ticket status using Tracking ID
• PUT /api/complaints/:id - Update status or attach comments (Admin only)