VOOZH about

URL: https://dev.to/skrajput/-i-built-a-full-stack-academic-management-system-for-my-college-heres-how-2fnh

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

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

---