𝗜 𝗕𝘂𝗶𝗹𝘁 𝗮 𝗙𝘂𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 𝗔𝗰𝗮𝗱𝗲𝗺𝗶𝗰 𝗠𝗮𝗻𝗮𝗴𝗲𝗺𝗲𝗻𝘁 𝗦𝘆𝘀𝘁𝗲𝗺

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

대학을 위한 풀스택 학사 관리 시스템을 구축했습니다. 그 과정을 소개합니다

대학 시절, 저는 학사 기록, 출석, 학생 정보를 수동으로 관리하는 것이 얼마나 비효율적인지 목격했습니다. 종이 서류와 수동 데이터 입력에 소요되는 엄청난 시간은 교육 기관의 생산성을 저하시키는 주요 원인이었습니다. 이러한 문제를 해결하고자 저는 직접 풀스택 학사 관리 시스템을 구축하기로 결심했습니다.

이 글에서는 제가 어떤 기술을 사용했는지, 어떤 기능을 구현했는지, 그리고 이 프로젝트를 통해 무엇을 배웠는지 공유하고자 합니다.

기술 스택

이 견고한 애플리케이션을 구축하기 위해 저는 MERN 스택을 선택했습니다.

  • MongoDB: 학생, 교수, 강의 데이터를 저장하기 위한 NoSQL 데이터베이스입니다.
  • Express.js: Node.js를 위한 웹 애플리케이션 프레임워크입니다.
  • React.js: 동적인 사용자 인터페이스를 구축하기 위한 프론트엔드 라이브러리입니다.
  • Node.js: Chrome의 V8 엔진으로 구축된 JavaScript 런타임 환경입니다.

또한, 스타일링을 위해 Tailwind CSS를 사용하였고, 인증을 위해 **JWT (JSON Web Tokens)**를 도입했습니다.

주요 기능

시스템은 세 가지 명확한 사용자 역할에 따라 설계되었습니다: 관리자(Admin), 교수(Teacher), 그리고 학생(Student).

1. 관리자 (Admin)

관리자는 시스템의 전체적인 제어권을 가집니다.

  • 사용자 관리: 학생 및 교수를 추가, 수정 또는 삭제할 수 있습니다.
  • 강의 및 학과 관리: 새로운 강의를 개설하고 학과 정보를 관리합니다.
  • 대시보드: 대학 전체의 통계 및 사용자 현황을 한눈에 파악할 수 있습니다.

2. 교수 (Teacher)

교수는 자신의 강의와 관련된 학사 업무를 수행합니다.

  • 출석 관리: 담당 학생들의 출석을 체크하고 기록합니다.
  • 성적 관리: 학생들의 시험 점수 및 최종 성적을 업로드하고 관리합니다.
  • 학생 명단 확인: 자신이 담당하는 강의의 학생 목록을 조회합니다.

3. 학생 (Student)

학생은 자신의 학업 정보를 확인하는 데 집중합니다.

  • 프로필 및 출석 조회: 자신의 개인 정보와 출석률을 확인할 수 있습니다.
  • 성적 확인: 과목별 성적 및 학업 성취도를 실시간으로 확인합니다.
  • 강의 정보: 수강 중인 강의의 상세 내용과 일정을 조회합니다.

구현 상세 내용

백엔드 (Backend)

백엔드는 Node.js와 Express를 사용하여 구축되었습니다. 데이터의 구조를 정의하기 위해 Mongoose를 사용하여 MongoDB 스키마를 설계했습니다.

예를 들어, 사용자 모델은 다음과 같은 구조를 가집니다:

const userSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true },
  role: { type: String, enum: ['admin', 'teacher', 'student'], required: true },
});

보안을 위해 모든 API 엔드포인트에 JWT 인증 미들웨어를 적용했습니다. 이를 통해 사용자는 자신의 역할(Role)에 허용된 기능에만 접근할 수 있도록 엄격히 제한했습니다.

프론트엔드 (Frontend)

프론트엔드는 React를 기반으로 한 싱글 페이지 애플리케이션(SPA)입니다. 사용자 경험을 극대화하기 위해 다음과 같은 전략을 사용했습니다.

  • Tailwind CSS: 빠르고 일관된 UI 디자인을 위해 사용했습니다.
  • Context API: 사용자 인증 상태(Auth State)와 같은 전역 데이터를 관리하기 위해 사용했습니다.
  • React Router: 역할에 따른 페이지 접근 제어(Protected Routes)를 구현했습니다.

도전 과제 및 배운 점

이 프로젝트를 진행하며 가장 어려웠던 점은 데이터베이스 스키마 설계였습니다. 학생, 교수, 강의, 출석, 성적 간의 복잡한 관계를 효율적으로 연결하면서도 데이터 무결성을 유지하는 것이 쉽지 않았습니다.

또한, 인증 및 인가(Authentication & Authorization) 흐름을 구현하면서 보안의 중요성을 깊이 깨달았습니다. 단순히 로그인하는 것을 넘어, 각 사용자의 권한에 따라 API 호출을 어떻게 안전하게 차단할 것인지에 대한 고민이 많았습니다.

결론

이 프로젝트는 단순히 코드를 작성하는 것을 넘어, 실제 세상의 문제를 기술로 어떻게 해결할 수 있는지 배우는 소중한 경험이었습니다. 풀스택 개발의 전체 흐름을 이해하고, 프론트엔드와 백엔드가 어떻게 유기적으로 상호작용하는지 체득할 수 있었습니다.

앞으로 이 시스템을 더욱 발전시켜, 더 많은 기능을 추가하고 성능을 최적화할 계획입니다.