FineGuard Docs
All you need to know about this Fine Guard i.e fine management system
Overview
Fine Guard is a platform made by a series reason and it got so much apprications for other devs and from even the facelty of my clg cause they got a good solution for the manual fine taking system
The Origin Story
I once spent 9 hours standing in a queue just to pay a fine at my institution — a problem that never needed to exist.
It never born from any kind of the youtube tutorial it build from the real problem which I face
In 2026 May when I have my exams I have to pay my fine and then I have to collect the exam roll no simple ya ? Na
I stand in a line for more than 9 hrs to just pay the fine that's where I find the problem
I came back home and do some research about how many clg have fine management system and it was really low. and then I deicde to build a system for my clg even I don't care if they use it or not I just wanna build cuz that's what I do
"If nobody builds the solution, the problem just becomes someone else's 9-hour wait.
Tech Stack
Frontend
Next.js 15
App Router & SSR
React 19
UI Framework
Tailwind CSS
Utility-First CSS
Shadcn UI
Premium Components
Backend
Node.js
Runtime
MongoDB
NoSQL Database
Mongoose
ODM
JWT & Bcrypt
Security
Animations
Framer Motion
Advanced Animations
CSS Transitions
Smooth Effects
Tailwind Animate
Built-in Animations
Custom SVG Motion
Vector Animations
Fonts & Styling
Poppins
Modern Sans-serif
Serif
Elegant Typography
System Fonts
Performance
Variable Fonts
Dynamic Weights
Tools & Services
TypeScript
Type Safety
ESLint
Code Quality
Git & GitHub
Version Control
Vercel
Deployment
System Architecture
Complete project structure designed for scalability, maintainability, and clean separation of concerns.
Frontend Layer
Components, pages, and UI logic with Next.js app router for optimal performance.
Backend Layer
API routes, MongoDB schemas, and server-side logic for data management.
Security
Middleware validation, JWT tokens, and Bcrypt password hashing.
Type Safety
Full TypeScript support with dedicated types for Students and Teachers.
Core Features
Student Dashboard
View fines, payment history, and receive notifications.
Teacher Dashboard
Manage student fines, view reports, and clear fines.
Real-time Notifications
Instant updates on fine status and payment confirmations.
Contribution
If you want to build or contribute to FineGuard
Feel free to contribute, report issues, or reach out if you need help getting started.
Local Development Setup
1. Clone the repository
Clone the source code from GitHub.
git clone https://github.com/tanishtirpathi/Fine-system.git
cd Fine-system2. Install dependencies
Install all required packages.
npm install
# or
yarn
pnpm install
bun install3. Configure environment variables
Create a local environment file.
cp .sample.env .env.local4. Set your college branding
Open lib/college-brand.ts and update the COLLEGE object with your institution's details.
5. Start the development server
Launch the app locally.
npm run devEnvironment Configuration
Create a .env.local file in the project root and add:
# MongoDB connection string
MONGODB_URI=mongodb+srv://<user>:<pass>@cluster0.mongodb.net/fineguard
# Environment mode
NODE_ENV=development
# JWT signing secret
JWT_SECRET=your-super-secret-key-here