The latest articles on DEV Community by Pradeep Ravisankar (@pradeep_ravisankar). https://dev.to/pradeep_ravisankar https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3455690%2F0ff7fe41-5460-4ab5-a606-ab7de7769af0.png https://dev.to/pradeep_ravisankar en Pradeep Ravisankar Sun, 24 Aug 2025 10:12:30 +0000 https://dev.to/pradeep_ravisankar/my-journey-building-a-student-attendance-management-system-mern-devops-5f8g https://dev.to/pradeep_ravisankar/my-journey-building-a-student-attendance-management-system-mern-devops-5f8g <p>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.</p> <h2> 🌱 Where It Started </h2> <p>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?</p> <p>🛠️ Tech Stack</p> <p>I decided to go with the MERN stack for flexibility and scalability:</p> <p>Frontend: React + Tailwind CSS (clean UI, responsive, dark mode support)</p> <p>Backend: Node.js + Express (API-driven, JWT authentication)</p> <p>Database: MongoDB + Mongoose (flexible schema design)</p> <p>Auth &amp; Security: JWT, bcrypt, input sanitization</p> <p>Deployment &amp; DevOps: Docker, GitHub Actions, Render (backend), Netlify (frontend)</p> <h2> ✨ Features I Built </h2> <p>👩‍🏫 Teacher</p> <p>Add / delete students</p> <p>Mark and update attendance</p> <p>View records in a dynamic table</p> <p>🎓 Student</p> <p>Secure login</p> <p>View personal attendance records</p> <p>Track percentage progress</p> <p>🛡️ Admin</p> <p>Role-based access control</p> <p>Protected routes for teacher dashboards</p> <h2> 🔒 Security First </h2> <p>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.</p> <h2> 🚀 Deployment Journey </h2> <p>This was my favorite part — taking the project live.</p> <p>CI/CD pipeline with GitHub Actions</p> <p>Build Docker images → Push to Docker Hub</p> <p>Backend auto-deployed on Render via webhook</p> <p>Frontend auto-deployed on Netlify</p> <p>The best part? Every new commit automatically triggers builds &amp; deployments.</p> <h2> 🎥 Demo Access </h2> <p>Want to try it out?</p> <p>Teacher ID: t001 | Password: abc@123</p> <p>Student ID: std_1 | Password: linus@123</p> <p>👉 <a href="https://student-attandance-management-system.netlify.app/" rel="noopener noreferrer">Live Demo Link</a></p> <p>📌 Lessons I Learned</p> <p>Building is one thing, but deploying securely is where the real learning happens.</p> <p>Docker + GitHub Actions + Render + Netlify = a professional-grade pipeline.</p> <p>Writing clean code is important, but thinking about scalability, auth, and security is just as crucial.</p> webdev mern mongoose