DEV Community

Pradeep Ravisankar
Pradeep Ravisankar

Posted on

My Journey Building a Student Attendance Management System (MERN + DevOps)

Hey everyone ๐Ÿ‘‹, Iโ€™m Pradeep, and I recently completed and deployed my Student Attendance Management System using the MERN stack. This blog is about my journey โ€” from an idea to a live production app with CI/CD pipelines, Docker, and cloud deployment.

๐ŸŒฑ Where It Started

Like most students, I saw how messy attendance tracking can be in real life. Manual registers, spreadsheets, and no clear visibility for students. Thatโ€™s when I thought โ€” why not build a modern attendance management system thatโ€™s secure, responsive, and production-ready?

๐Ÿ› ๏ธ Tech Stack

I decided to go with the MERN stack for flexibility and scalability:

Frontend: React + Tailwind CSS (clean UI, responsive, dark mode support)

Backend: Node.js + Express (API-driven, JWT authentication)

Database: MongoDB + Mongoose (flexible schema design)

Auth & Security: JWT, bcrypt, input sanitization

Deployment & DevOps: Docker, GitHub Actions, Render (backend), Netlify (frontend)

โœจ Features I Built

๐Ÿ‘ฉโ€๐Ÿซ Teacher

Add / delete students

Mark and update attendance

View records in a dynamic table

๐ŸŽ“ Student

Secure login

View personal attendance records

Track percentage progress

๐Ÿ›ก๏ธ Admin

Role-based access control

Protected routes for teacher dashboards

๐Ÿ”’ Security First

Instead of hardcoding secrets, I made sure to use environment variables for both frontend (Netlify) and backend (Render). That way, credentials like MongoDB URI and JWT keys are never exposed.

๐Ÿš€ Deployment Journey

This was my favorite part โ€” taking the project live.

CI/CD pipeline with GitHub Actions

Build Docker images โ†’ Push to Docker Hub

Backend auto-deployed on Render via webhook

Frontend auto-deployed on Netlify

The best part? Every new commit automatically triggers builds & deployments.

๐ŸŽฅ Demo Access

Want to try it out?

Teacher ID: t001 | Password: abc@123

Student ID: std_1 | Password: linus@123

๐Ÿ‘‰ Live Demo Link

๐Ÿ“Œ Lessons I Learned

Building is one thing, but deploying securely is where the real learning happens.

Docker + GitHub Actions + Render + Netlify = a professional-grade pipeline.

Writing clean code is important, but thinking about scalability, auth, and security is just as crucial.

Top comments (0)