MERN Student Risk Management System (Attendance and Marks)

Clean Architecture (Client + Server)

This repository is organized for easy deployment:

• client/ → React + Vite frontend
• server/ → Node.js + Express API

Backend API is modular and beginner-friendly:

• server/controllers/ for business logic
• server/routes/ for endpoint mapping
• server/middelware/ for auth and error handling
• server/model/ for Mongoose models

---

Environment Variables

Backend (server/.env)

Copy from server/.env.example:

PORT=5000
DB_URL=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
CLIENT_URL=http://localhost:5173

Frontend (client/.env)

Copy from client/.env.example:

VITE_API_URL=http://localhost:5000

Only frontend API base URL is required on client side.

---

Run Locally

1. Start backend

cd server
npm install
npm run dev

Backend runs on PORT from env.

2. Start frontend

cd client
npm install
npm run dev

Vite proxy is enabled for /api during local development.

3. Production build check

cd client
npm run build

---

Deployment Guide

Backend on Render

1. Create a new Web Service from this GitHub repo.
2. Root directory: server
3. Build command: npm install
4. Start command: npm start
5. Add env vars from server/.env.example.
6. Deploy and copy the Render backend URL.

Frontend on Vercel

1. Import this repo into Vercel.
2. Keep root deploy config from vercel.json.
3. Add env var:

• VITE_API_URL=https://your-render-backend-url

4. Redeploy frontend.

After setting VITE_API_URL, frontend API calls will use deployed backend.

---

Overview

A Full-Stack Student Attendance Management System built with the MERN stack.
It enables teachers to manage students, track attendance, and enforce role-based access control with a modern, responsive UI.

---

Demo Credentials

Use the following credentials to explore the application:

Teacher Login

• ID: t001
• Password: abc@123

Student Login

• ID: std_1
• Password: linus@123

These demo accounts are provided only for testing purposes.

---

⚡ Technical Highlights

• Built with MERN Stack (MongoDB, Express.js, React, Node.js)
• Secured with bcrypt for password hashing & JWT for authentication
• Input validation handled using express-validator
• Styled with Tailwind CSS for responsive and modern UI design
• Version controlled with Git & GitHub for collaboration and source management

---

Deployment Workflow

This project follows a professional-grade CI/CD pipeline:

flowchart LR
    A[Commit to GitHub] --> B[GitHub Actions]
    B --> C[Build Docker Image]
    C --> D[Push to Docker Hub]
    D --> E[Render Webhook]
    E --> F[Render Backend Deploy]
    A --> G[Netlify Build & Deploy]
    G --> H[Frontend Live]

Loading

Flow

• Commit pushed → GitHub Actions runs
• Backend: Docker image built → pushed to Docker Hub → Render auto-deploys via webhook
• Frontend: Netlify auto-builds & deploys React app

---

Environment Variables

Both frontend (Netlify) and backend (Render) use environment variables for sensitive data (MongoDB URI, JWT secrets, API keys).
➡️ No secrets are exposed in the codebase.

---

Tech Stack

• Frontend: React, Tailwind CSS, React Router DOM
• Backend: Node.js, Express.js
• Database: MongoDB + Mongoose
• Authentication: JWT, bcrypt
• Validation & Security: express-validator, sanitization
• Deployment: GitHub Actions, Docker, Docker Hub, Render, Netlify

---

Features

Teacher

• Add / delete students
• Mark and update attendance
• View student records in a dynamic table

Student

• Secure login
• View personal attendance records
• Track attendance percentage

---

Project Journey – Student Management System (Commit by Commit)

This project documents my journey of building a Full-Stack Student Management Application step by step, commit by commit.
The app enables teachers to manage attendance and students to view their records securely.

---

Commit 1 – Initial Setup

• Bootstrapped the project using Vite for fast frontend development.

---

Commit 2 – Git Configuration

• Added .gitignore to exclude unnecessary project files.

---

Commit 3 – TailwindCSS Setup

• Installed @tailwindcss/vite.
• Imported Tailwind into index.css.
• Configured vite.config.js with Tailwind plugin.

---

Commit 4 – Core Components (Login & Teacher Dashboard)

• Created Login component with role toggle (student/teacher), input fields, and submit button.
• Built Teacher component to display students’ attendance in a table format.
• Faced a challenge: dates were stored in an array, attendance as {date: status}.
• Solved it by mapping dates and matching keys.
• Designed a scrollable table with fixed student info + scrollable attendance.

---

Commit 5 – Editable Attendance

• Made attendance editable using <input>.
• Used immutable state updates for data consistency.

---

Commit 6 – Add Students & Student Dashboard

• Added AddStudent page for teachers.
• Created Student page to view attendance percentage and details.

---

Commit 7 – Routing & Attendance Percentage

• Installed React Router DOM.
• Setup navigation routes.
• Implemented attendance percentage calculation.
• Added logout functionality.

---

Commit 8 – Backend Setup

• Initialized Express.js server.
• Configured to listen on port 5000.

---

Commit 9 – CORS & Login API

• Installed CORS for client-server communication.
• Created login API route.
• Used FormData + Fetch API for requests.

---

Commit 10 – Fetch Student Data

• Implemented GET API to fetch student data as JSON.

---

Commit 11 – Attendance Update

• Displayed attendance in Teacher Dashboard using useEffect.
• Added PUT API for updating attendance immutably.

---

Commit 12 – Add Student API

• Implemented POST API for adding students.
• Converted FormData into objects using Object.entries().

---

Commit 13 – MongoDB Integration

• Connected Express server to MongoDB (Mongoose).
• Secured DB credentials using .env.

---

Commit 14 – Schema & Models

• Defined Mongoose schema with validation.
• Created Student model.

---

Commit 15 – Add & Fetch Students

• Added students to DB using .save().
• Fetched using .find().

---

Commit 16 – Authentication

• Implemented auth for teacher/student.
• Compared entered password with DB.

---

Commit 17 – Auto Student ID Generation

• Auto-generated IDs (std_001, std_002).
• Used MongoDB $inc counter.

---

Commit 18 – Enhanced UI

• Popup after student creation (Add another OR Back).

---

Commit 19 – Sync Teacher Dashboard with DB

• Teacher Dashboard fetches live data.
• Updates synced with DB via findOneAndUpdate().

---

Commit 20 – Error Handling

• Displayed total student count.
• Error alerts for wrong passwords.

---

Commit 21 – Student Deletion

• Enabled multi-delete via checkboxes.
• Used Promise.all() to handle DB deletions.

---

Commit 22 – Student Authentication

• Verified student login using DB check.

---

Commit 23 – Dynamic Student Dashboard

• Passed student ID via useNavigate.
• Fetched correct student data with useLocation.

---

Commit 24 – Password Hashing

• Integrated bcrypt for password hashing.
• Verified login with hash comparison.

---

Commit 25 – JWT Authentication

• Implemented JWT tokens.
• Middleware to verify tokens before accessing routes.

---

Commit 26 – Role-Based Access

• Restricted teacher dashboard to teacher role only.

---

Commit 27 – NoSQL Injection Protection

• Used express-validator (escape(), trim()).
• Sanitized all inputs before DB save.

---

Commit 28 – Final UI Enhancements

• Added dark mode.
• Attendance styling:
  • ✅ Present → Green
  • ❌ Absent → Red

---

Final Thoughts

This project evolved from a simple CRUD app into a secure, scalable, production-ready MERN application.

It demonstrates:

• Building & securing full-stack apps
• Real-world CI/CD with Docker + GitHub Actions + Render + Netlify
• Strong focus on security, scalability, and clean UI/UX

This project showcases both my technical expertise (MERN stack, DevOps, security) and my ability to deliver a professional-grade deployment pipeline.