I Built a Full Stack Academic Management System
My college used paper registers for attendance and Excel sheets for marks. Notices stayed on physical boards. My team decided to digitize this entire process.
We built Student Sphere.
The system uses three distinct dashboards:
Student Dashboard:
- View attendance and eligibility
- Check grades
- Download study notes
- Submit assignments digitally
- View semester notices
Faculty Dashboard:
- Update attendance and marks
- Upload notes and lab reports
- Set assignment deadlines
- Post notices to specific semesters
- Review student submissions
Admin Dashboard:
- Approve new registrations
- Manage user accounts
- Promote entire semesters
- View system statistics
- Manage all notices
Technical Stack:
Frontend:
- HTML5, CSS3, and Vanilla JavaScript
- No frameworks like React or Vue
- Single CSS file for all pages
- Responsive design for mobile to 4K screens
Backend:
- Node.js and Express.js v5
- JWT authentication
- Bcrypt password hashing
- REST API with 30+ endpoints
Database and Deployment:
- MongoDB Atlas
- Frontend hosted on Netlify
- Backend hosted on Render
- Android app built with Java via WebView
We faced two major technical hurdles.
Challenge 1: API Performance The faculty dashboard initially made 46 separate API calls to load student data. This caused a 14 second delay. I replaced individual calls with a single MongoDB $in query. This reduced load times significantly.
Challenge 2: Single Page Application without React We built a role-based SPA using only vanilla JavaScript. We managed routing and state manually. We used CSS media queries to ensure zero horizontal scrolling on mobile devices.
Key Lessons:
- Building without frameworks teaches you how web technology works under the hood.
- Performance optimization is more important than adding new features.
- Early database schema decisions impact the entire project.
- Deployment requires careful management of CORS and environment variables.
This project was built by five students from Ramgovind Institute of Technology, Koderma, under the guidance of Mr. Ajay Kumar Dangi.
Live Website: https://studentsphere0.netlify.app
Frontend GitHub: https://github.com/sumankumarsinghrajput/studentsphere-frontend
Backend GitHub: https://github.com/sumankumarsinghrajput/studentsphere-backend