# I Built a Full Stack Academic Management System for My College — Here's How

Suman Kumar Singh — Mon, 15 Jun 2026 04:08:43 +0000

I Built a Full Stack Academic Management System

for My College — Here's How

For my B.Tech final year project, me and my team
built Student Sphere — a complete academic
management system that connects Students, Faculty,
and Administrators on one platform.

🌐 Live Website: https://studentsphere0.netlify.app

The Problem We Were Solving

Our college (like most colleges in India) was
managing everything manually:

📋 Attendance → Paper registers
📝 Marks → Excel sheets
📢 Notices → Physical board
📁 Assignments → Physical handouts
📊 Reports → Manual entry

We thought — why not build a system that
digitalizes all of this?

So we did. 💪

What We Built

Student Sphere has 3 role-based dashboards:

👨‍🎓 Student Dashboard

View attendance percentage with eligibility status
Check marks and grade card (A+ to F)
Download study notes uploaded by faculty
Submit assignments and lab reports digitally
View notices targeted to their semester

👩‍🏫 Faculty Dashboard

Update attendance and marks (bulk or individual)
Upload notes, assignments, lab reports
Set due dates and control submission windows
Post notices to specific semesters or all students
View all student submissions

🛡️ Admin Dashboard

Approve or reject new registrations
Manage all students and faculty accounts
Bulk promote entire semesters with undo
View system-wide statistics
Manage all notices

Tech Stack

Frontend

HTML5, CSS3, Vanilla JavaScript
Zero frameworks — no React, no Vue, no Bootstrap
Single CSS file (~2400 lines) for all 7 pages
Dark and Light theme toggle
Fully responsive — mobile to 4K

Backend

Node.js + Express.js v5
JWT authentication (7 day expiry)
bcrypt password hashing (12 salt rounds)
REST API with 30+ endpoints
Role-based access control middleware

Database

MongoDB Atlas (cloud hosted)
Mongoose ODM
3 collections: Users, Data, Notices

Deployment

Frontend → Netlify (auto deploy from GitHub)
Backend → Render (auto deploy from GitHub)
Database → MongoDB Atlas free tier

Mobile

Android app built with Android Studio (Java)
WebView wrapper
APK available on GitHub Releases

The Interesting Technical Challenges

Challenge 1 — Faculty Page Was Taking 25 Seconds to Load

When the faculty dashboard loaded, it was making
46 separate API calls — one for each student.

Each call: 300ms × 46 students = 14+ seconds

The Fix:

I added a bulk endpoint on the backend:

Javascript
router.post('/bulk', protect(), async (req, res) => {
const { emails } = req.body;
const dataArr = await Data.find({
email: { $in: emails }
});
const result = {};
dataArr.forEach(d => { result[d.email] = d; });
res.json(result);
});

One MongoDB $in query instead of 46 individual
queries. Load time dropped from 25 seconds to
2-3 seconds.

Challenge 2 — Role Based Single Page Application

Without React

All three dashboards are single HTML files with
multiple hidden sections. Clicking sidebar items
runs this:

javascript
function switchSec(id) {
document.querySelectorAll('.section')
.forEach(s => s.classList.remove('active'));
document.getElementById('sec-' + id)
.classList.add('active');
}

No React. No router. Just vanilla JavaScript.
Feels like an SPA — no page reloads.

Challenge 3 — Mobile Tables

On mobile, HTML tables require horizontal scrolling
which is terrible UX. I converted all tables to
card layout at 640px using only CSS:

css
@media (max-width: 640px) {
.table-wrap thead tr { display: none; }
.table-wrap tbody tr {
display: block;
border: 1px solid var(--border2);
border-radius: 8px;
margin-bottom: 12px;
padding: 14px;
}
.table-wrap tbody td {
display: flex;
justify-content: space-between;
padding: 6px 0;
border-bottom: 1px solid var(--border);
}
.table-wrap tbody td[data-label]::before {
content: attr(data-label);
font-size: 0.71rem;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
}
}

Zero horizontal scrolling. Everything fits
perfectly on mobile.

Challenge 4 — JWT Auth Without Framework

javascript
// Middleware
const protect = (role) => async (req, res, next) => {
const token = req.headers.authorization?.split(' ')[1];
if (!token)
return res.status(401).json({ msg: 'No token' });

const decoded = jwt.verify(token, process.env.JWT_SECRET);
const user = await User.findById(decoded.id);

if (!user.isApproved)
return res.status(403).json({
code: 'PENDING_APPROVAL'
});

if (role && user.role !== role)
return res.status(403).json({ msg: 'Forbidden' });

req.user = user;
next();
};

Every protected route passes through this
middleware before any data is returned.

Project Structure

Frontend/
├── index.html
├── login.html
├── register.html
├── student.html
├── faculty.html
├── admin.html
├── about-dev.html
├── css/
│ └── style.css
└── js/
├── utils.js
├── auth.js
├── api.js
├── main.js
├── student.js
├── faculty.js
└── admin.js

Backend/
├── server.js
├── middleware/auth.js
├── models/
│ ├── User.js
│ ├── Data.js
│ └── Notice.js
└── routes/
├── auth.js
├── users.js
├── data.js
└── notices.js




---

## The Team

Built by 5 B.Tech students from
**Ramgovind Institute of Technology, Koderma**
under the guidance of **Mr. Ajay Kumar Dangi** 
(H.O.D, CSE Department)

| Name | Role |
|---|---|
| Suman Kumar Singh | Full Stack Developer |
| Abhinav Anand | UI / UX Designer |
| Aman Kumar Vikarn | Backend Developer |
| Sachin Mandal | Database Management |
| Suman Das | Testing & QA |

---

## Links

🌐 Live Website: https://studentsphere0.netlify.app

💻 Frontend GitHub: 
https://github.com/sumankumarsinghrajput/studentsphere-frontend

🔧 Backend GitHub: 
https://github.com/sumankumarsinghrajput/studentsphere-backend

📱 Android APK: Available on GitHub Releases

---

## What I Learned

- Building a complete full stack app from scratch 
  without any frontend framework teaches you how 
  things actually work under the hood
- Performance optimization matters more than 
  features — 25 second load time kills UX no 
  matter how good the features are
- Database schema design decisions made early 
  affect everything later
- Deployment is not just uploading files — 
  CORS, environment variables, security headers, 
  sitemap, robots.txt — all matter

---

If you have any questions about the tech stack, 
implementation, or challenges we faced — 
drop them in the comments below! 👇

Happy to help anyone building something similar.

\#webdev \#javascript \#nodejs \#mongodb 
\#fullstack \#opensource \#beginners

---

DEV Community: Suman Kumar Singh