Inspiration

Managing academic institutions often involves multiple disconnected systems for administration, attendance, grading, and student engagement. Existing college management platforms are frequently outdated, difficult to navigate, and lack features that encourage student participation. We built EduCMS to create a modern, centralized, and user-friendly platform that simplifies academic management while enhancing the overall student experience through gamification.

What it does

EduCMS is a modern, full-stack College Management System that provides dedicated portals for Administrators, Faculty, and Students.

Key Features

  • Secure role-based authentication for Admin, Faculty, and Students.
  • Complete management of students, faculty, subjects, departments, and academic records.
  • Attendance tracking with real-time updates.
  • Assignment creation, submission, and evaluation.
  • Marks and CGPA management with performance analytics.
  • Timetable management for efficient scheduling.
  • Gamified Student Leaderboard that rewards students with XP based on attendance and academic performance while maintaining privacy through Anonymous Mode.
  • Fully responsive dashboard with an elegant dark-themed glassmorphism interface optimized for desktop, tablet, and mobile devices.

How we built it

EduCMS was developed using the MERN Stack with a scalable and secure architecture.

Frontend

  • React 18 (Vite)
  • Tailwind CSS
  • Framer Motion
  • Lucide React Icons

Backend

  • Node.js
  • Express.js
  • RESTful APIs

Database

  • MongoDB
  • Mongoose ODM

Security

  • JSON Web Tokens (JWT) for authentication
  • bcrypt for password hashing
  • Role-Based Access Control (RBAC) for secure access management

Challenges we ran into

One of our biggest challenges was designing a dashboard that delivers a seamless experience across different screen sizes. We implemented a responsive layout with an off-canvas sidebar that automatically adapts to smaller devices without compromising usability.

Another challenge was managing authentication and authorization for three different user roles while ensuring secure API access and smooth navigation throughout the application. Efficiently modeling interconnected data such as attendance, marks, assignments, and subjects in MongoDB also required careful schema design.

Accomplishments that we're proud of

  • Successfully built a complete end-to-end College Management System using the MERN stack.
  • Designed a modern, responsive, and visually appealing user interface with smooth animations.
  • Developed an innovative Gamified Student Leaderboard that increases student motivation through XP-based rankings while protecting identities using Anonymous Mode.
  • Implemented secure role-based authentication and authorization.
  • Created a scalable architecture that can be easily extended with future features.

What we learned

This project strengthened our understanding of:

  • Building scalable MERN applications
  • Implementing secure authentication and authorization using JWT
  • Designing efficient MongoDB schemas for interconnected academic data
  • Managing complex state and routing in React
  • Creating responsive and accessible user interfaces with Tailwind CSS
  • Optimizing animations using Framer Motion without sacrificing performance

What's next for EduCMS

We plan to expand EduCMS with several advanced features, including:

  • Real-time notifications for attendance, assignments, and grades using WebSockets.
  • In-app messaging between students and faculty.
  • AI-powered academic performance analysis and personalized learning recommendations.
  • Digital fee management and online payment integration.
  • Badge, achievement, and reward systems for enhanced gamification.
  • Parent portal for monitoring student progress.
  • Mobile application with push notifications.
  • Cloud deployment and analytics dashboard for institutional insights.

Our long-term vision is to transform EduCMS into a complete smart campus platform that makes academic management more efficient, engaging, and accessible for educational institutions.

Built With

Share this project:

Updates

posted an update —

EduCMS is Live: Introducing Gamified Student Dashboards!

Welcome to the first major update for EduCMS! We've been working hard to create a centralized platform that doesn't just manage administrative tasks, but actually makes the academic experience engaging for students.

What's New in this Release?

We have successfully rolled out the core foundation of our application, featuring dedicated, secure portals for Admins, Faculty, and Students.

Here are the highlights of what we've shipped:

Gamified Student Leaderboards

We believe that tracking academic progress shouldn't be boring. We've introduced an "Anonymous Mode" competitive peer ranking system.

  • Students now earn dynamic XP points based on their CGPA and attendance.
  • The leaderboard encourages healthy competition without compromising student privacy.

Responsive Enterprise Design

The dashboard is now fully mobile-responsive!

  • We implemented a sleek dark glassmorphism aesthetic.
  • On smaller screens (under 1024px), the sidebar seamlessly transitions into an off-canvas drawer controlled via a hamburger menu.
  • Data tables and charts now utilize 100% of the screen width on mobile for maximum readability.

Smart UI/UX Integrations

We've integrated Framer Motion to provide buttery-smooth page transitions and interactions, along with skeleton loaders so the app feels incredibly fast even when fetching large datasets.

Under the Hood

For the developers out there, the platform is running smoothly on the MERN stack:

  • Frontend: React 18, Vite, Tailwind CSS v3
  • Backend: Node.js, Express.js, MongoDB (Mongoose)
  • Security: JWT Authentication & bcrypt

We're incredibly proud of how the UI has turned out and can't wait to hear your feedback on the new gamification features.

Stay tuned for more updates, and feel free to check out the GitHub repository!

Log in or sign up for Devpost to join the conversation.

Submission history