A secure and feature-rich Student Management System built using Node.js, Express, MongoDB, JWT Authentication, Bootstrap, and Vanilla JavaScript. It includes authentication, CRUD operations, image upload & cleanup, live searching, pagination, validation, and rate-limiting.
Admin can Register → Auto Login → Redirect to Dashboard.
Login with username & password.
JWT stored in LocalStorage, expires in 1 hour.
Logout clears token and redirects to login page.
Add Student: First Name, Last Name, Email, Phone, Gender, Profile Picture.
View Student: Single student record in a dynamic modal.
Edit Student: Auto-fill form → Update details dynamically.
Delete Student: Confirm box → Deletes student & image from server.
Profile picture upload with Multer.
On Update → Old image deleted, replaced by new image.
On Delete → Student’s profile picture also removed.
Live Search (by first name, last name, email).
Pagination without any npm package (custom logic in Vanilla JS).
JWT Authentication Middleware for protected routes.
Rate Limiting (via express-rate-limit):
Max 30 requests per minute per IP.
Prevents brute force / spam attacks.
Validates first name, last name, email, phone, gender, etc.
Automatically removes uploaded file if validation fails.
HTML5
Bootstrap 5
Vanilla JavaScript
Node.js
Express.js
MongoDB + Mongoose
JWT (JSON Web Tokens)
bcrypt.js (Password Hashing)
Multer (File Uploads)
express-validator (Form Validation)
express-rate-limit (Rate Limiting)
dotenv (Environment Config)
cors (Cross-Origin Resource Sharing)
auth.js → Verifies JWT before accessing /api/students.
RateLimiter → Blocks abusive requests (max 30/min).
Validation → Checks all input fields, deletes invalid uploads.
Error Handler → Handles MulterError (invalid file uploads) & generic server errors.
- bcryptjs: ^3.0.2
- cors: ^2.8.5
- dotenv: ^17.2.2
- express: ^5.1.0
- express-rate-limit: ^8.1.0
- express-validator: ^7.2.1
- jsonwebtoken: ^9.0.2
- mongoose: ^8.18.0
- multer: ^2.0.2
- nodemon: ^3.1.10
STUDENT-CRUD/ │
├── backend/ # Backend (Node.js + Express + MongoDB)
│ ├── config/
│ │ └── database.js # MongoDB connection setup
│ ├── middleware/ │ │ └── auth.js # JWT authentication middleware
│ ├── models/ │ │ ├── student.model.js # Student schema & model
│ │ └── user.model.js # User/Admin schema & model
│ ├── routes/
│ │ ├── student.routes.js # Student CRUD routes
│ │ └── user.routes.js # User authentication routes
│ ├── uploads/ # Stores uploaded profile pictures
│ ├── .env # Environment variables (PORT, DB, JWT secret)
│ ├── index.js # Entry point (server setup, middlewares, routes)
│ ├── package.json # Backend dependencies & scripts
│ └── package-lock.json
│
├── frontend/ # Frontend (HTML + Bootstrap + Vanilla JS)
│ ├── Authentication/
│ │ ├── authentication.js # Auth logic (login, register, logout)
│ │ ├── login.html # Login page
│ │ └── register.html # Register page
│ ├── index.html # Dashboard / Students listing page
│ └── index.js # Handles student CRUD, search, pagination
│
├── README.md # Project documentation
└── .vscode/ # VS Code settings
git clone https://github.com/asim249/Students-Management-App.git cd Student-Mangment-App
cd backend npm install
Create a .env file in backend root:
PORT=3000 MONGO_URI=mongodb://localhost:27017/studentdb JWT_SECRET_KEY=your_secret_key
npm start
Open frontend/index.html in browser (use Live Server or directly).
| Method | Endpoint | Description |
|---|---|---|
| POST | /api/users/register |
Register new admin |
| POST | /api/users/login |
Login & receive JWT |
| POST | /api/users/logout |
Logout user |
| Method | Endpoint | Description |
|---|---|---|
| GET | /api/students |
Get all students (with search + pagination) |
| GET | /api/students/:id |
Get single student |
| POST | /api/students |
Add new student (with image) |
| PUT | /api/students/:id |
Update student (replace image if provided) |
| DELETE | /api/students/:id |
Delete student + image |
Developed by Asim Mir
GitHub: asim249
This project is licensed under the MIT License.