# Project Case Study: COLLEGE CMS

> Built by Gyanranjan Priyam (https://www.priyam.tech)
> Tech Stack: React 19, TypeScript, Node.js, MongoDB, TailwindCSS, Express, Socket.io
> Timeline: 2025 | Category/Company: Enterprise

- Canonical URL: https://www.priyam.tech/projects/cms
- Live Demo: https://cms-gyanranjanpriyam.netlify.app/
- Source Code: https://github.com/Gyanranjan-Priyam/cms
- 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


--- 

## Feature Breakdown

### Dashboard & UI
- 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

### Student Portal
- Personalized academic dashboard
- Payment history with receipt downloads
- Real-time notifications via Socket.io
- Mobile-optimized responsive interface

### Admin Suite
- 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

### Finance Management
- 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

### Auth & Security
- JWT authentication with refresh tokens
- Role-based access control
- Comprehensive server-side validation
- CORS and environment-based configuration


--- 

## Architecture & Tech Stack

- **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)


---

## Author & Creator

- Developer: Gyanranjan Priyam
- Portfolio: https://www.priyam.tech
- GitHub: https://github.com/gyanranjan-priyam
- LinkedIn: https://linkedin.com/in/gyanranjan-priyam
- Twitter: https://x.com/gr_priyam