My Role: Full Stack Developer — Designed and built the complete system from database schema to deployment, handling both frontend and backend architecture.
Overview
A full-stack College Management System built for modern educational institutions. It handles everything from student lifecycle to finance — role-based dashboards, real-time analytics, payment gateway integrations, and attendance tracking, all wrapped in a dark/light theme UI with smooth animations.
The admin suite supports multi-role access (Admin, Finance, Faculty), student record management across branches and departments, digital attendance, grade recording, and transcript generation. The finance module provides advanced payment filtering, Excel exports, QR-based UPI payments, and dual payment gateway support with Cashfree and Razorpay.
The student portal gives each user a personalized dashboard with academic progress, payment history with receipt downloads, and real-time notifications via Socket.io. The entire frontend is built with React 19 and TypeScript using Vite, with Framer Motion animations and Recharts for interactive data visualization.
Key Highlights
Multi-role dashboard system (Admin, Finance, Faculty, Student)
Dual payment gateway integration — Cashfree and Razorpay
Real-time updates across the platform via Socket.io
Advanced finance filtering with Excel export functionality
Dynamic QR-based UPI payment generation
Auto-collapsing sidebar with hover-to-expand animations
Session management with automatic timeout and warning modals
Dark/Light theme with system preference detection
Features
- Auto-collapsing sidebar with tooltip navigation
- Dark/Light theme with system preference detection
- Interactive Recharts analytics
- Session timeout with warning modals
- Framer Motion transitions throughout
- Personalized academic dashboard
- Payment history with receipt downloads
- Real-time notifications via Socket.io
- Mobile-optimized responsive interface
- Multi-role management (Admin, Finance, Faculty)
- Student lifecycle and record management
- Branch and department hierarchy control
- Digital attendance tracking with analytics
- Grade recording and transcript generation
- Advanced payment filtering (branch, semester, type, status, date)
- Excel export with custom formatting
- Cashfree and Razorpay gateway integration
- Dynamic QR code UPI payments
- Revenue tracking with interactive dashboards
- JWT authentication with refresh tokens
- Role-based access control
- Comprehensive server-side validation
- CORS and environment-based configuration
Tech Stack
| Layer | Technology |
|---|---|
| Frontend | React 19 + TypeScript (Vite 7) |
| Styling | Tailwind CSS 4 + Framer Motion |
| Backend | Node.js 20+ / Express.js 5 |
| Database | MongoDB 6 + Mongoose 8 |
| Authentication | JWT with refresh mechanism |
| Payments | Cashfree + Razorpay |
| Real-time | Socket.io |
| Charts | Recharts |
| Data Export | XLSX |
| Icons | Lucide React |
| Deployment | Vercel (frontend) + Railway (backend) |
Project Structure
Screenshots
