मी एक फुल स्टॅक अकॅडेमिक मॅनेजमेंट सिस्टम तयार केली

माझ्या कॉलेजमध्ये हजेरीसाठी कागदी रजिस्टर्स आणि गुणांसाठी एक्सेल शीट्स वापरल्या जात होत्या. सूचना फिजिकल बोर्डांवर लावत असत. माझ्या टीमने ही संपूर्ण प्रक्रिया डिजिटल करण्याचा निर्णय घेतला.

आम्ही Student Sphere तयार केले.

ही प्रणाली तीन वेगवेगळ्या डॅशबोर्ड्सचा वापर करते:

Student Dashboard:

• हजेरी आणि पात्रता पहा
• ग्रेड्स तपासा
• अभ्यासाच्या नोट्स डाउनलोड करा
• असाइनमेंट्स डिजिटल पद्धतीने सबमिट करा
• सेमिस्टरच्या सूचना पहा

Faculty Dashboard:

• हजेरी आणि गुण अपडेट करा
• नोट्स आणि लॅब रिपोर्ट्स अपलोड करा
• असाइनमेंटसाठी डेडलाईन्स सेट करा
• विशिष्ट सेमिस्टरसाठी सूचना पोस्ट करा
• विद्यार्थ्यांच्या सबमिशनचे पुनरावलोकन करा

Admin Dashboard:

• नवीन नोंदणी मंजूर करा
• युजर अकाउंट्स व्यवस्थापित करा
• संपूर्ण सेमिस्टर प्रमोट करा
• सिस्टमची आकडेवारी पहा
• सर्व सूचना व्यवस्थापित करा

Technical Stack:

Frontend:

• HTML5, CSS3, आणि Vanilla JavaScript
• React किंवा Vue सारखे कोणतेही फ्रेमवर्क वापरलेले नाही
• सर्व पेजेससाठी एकच CSS फाईल
• मोबाईलपासून 4K स्क्रीनपर्यंत रिस्पॉन्सिव्ह डिझाइन

Backend:

• Node.js आणि Express.js v5
• JWT authentication
• Bcrypt password hashing
• 30+ endpoints सह REST API

Database and Deployment:

• MongoDB Atlas
• Frontend Netlify वर होस्ट केले आहे
• Backend Render वर होस्ट केले आहे
• WebView द्वारे Java वापरून Android ॲप तयार केले आहे

आम्हाला दोन मोठ्या तांत्रिक आव्हानांचा सामना करावा लागला.

Challenge 1: API Performance सुरुवातीला फॅकल्टी डॅशबोर्ड विद्यार्थ्यांचा डेटा लोड करण्यासाठी ४६ वेगळ्या API कॉल्स करत असे. यामुळे १४ सेकंदांचा विलंब होत असे. मी वैयक्तिक कॉल्सच्या जागी एकच MongoDB $in क्वेरी वापरली. यामुळे लोड होण्याचा वेळ लक्षणीयरीत्या कमी झाला.

Challenge 2: Single Page Application without React आम्ही केवळ Vanilla JavaScript वापरून रोल-बेस्ड SPA तयार केले. आम्ही राउटिंग आणि स्टेट (state) मॅन्युअली व्यवस्थापित केले. मोबाईल डिव्हाइसेसवर हॉरिझॉन्टल स्क्रोलिंग होणार नाही याची खात्री करण्यासाठी आम्ही CSS मीडिया क्वेरीज वापरल्या.

Key Lessons:

• फ्रेमवर्कशिवाय काम केल्यामुळे वेब तंत्रज्ञान अंतर्गत (under the hood) कसे कार्य करते हे समजते.
• नवीन फीचर्स जोडण्यापेक्षा परफॉर्मन्स ऑप्टिमायझेशन अधिक महत्त्वाचे आहे.
• डेटाबेस स्कीमाबाबतचे सुरुवातीचे निर्णय संपूर्ण प्रकल्पावर परिणाम करतात.
• डिप्लॉयमेंटसाठी CORS आणि एन्व्हायरनमेंट व्हेरिएबल्सचे काळजीपूर्वक व्यवस्थापन आवश्यक असते.

हा प्रकल्प श्री. अजय कुमार डांगी यांच्या मार्गदर्शनाखाली रामगोविंद इन्स्टिट्यूट ऑफ टेक्नॉलॉजी, कोडरमा येथील पाच विद्यार्थ्यांनी तयार केला आहे.

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

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

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

मी माझ्या कॉलेजसाठी एक फुल-स्टॅक शैक्षणिक व्यवस्थापन प्रणाली (Academic Management System) तयार केली. ती कशी केली ते पहा.

माझ्या कॉलेजमध्ये, अनेक शैक्षणिक प्रक्रिया अजूनही मॅन्युअल पद्धतीने किंवा जुन्या पद्धतीच्या सॉफ्टवेअरद्वारे हाताळल्या जातात. यामुळे डेटा व्यवस्थापित करणे, विद्यार्थ्यांची उपस्थिती तपासणे आणि निकाल जाहीर करणे यांसारख्या गोष्टींमध्ये खूप वेळ लागतो आणि चुका होण्याची शक्यताही जास्त असते. या समस्येवर उपाय म्हणून, मी एक फुल-स्टॅक (full-stack) शैक्षणिक व्यवस्थापन प्रणाली विकसित केली.

समस्या विधान (Problem Statement)

माझ्या कॉलेजमध्ये मी खालील समस्या अनुभवल्या:

• डेटा विखुरलेला असणे: विद्यार्थ्यांची माहिती वेगवेगळ्या फाईल्स किंवा कागदपत्रांमध्ये विखुरलेली असते.
• वेळेचा अपव्यय: उपस्थिती नोंदवणे आणि निकाल तयार करणे यांसारख्या कामांसाठी खूप वेळ आणि श्रम लागतात.
• पारदर्शकतेचा अभाव: विद्यार्थ्यांना त्यांचे निकाल किंवा उपस्थिती त्वरित आणि सहजपणे पाहता येत नाही.

उपाय (The Solution)

मी एक वेब-आधारित प्रणाली तयार केली जी सर्व शैक्षणिक डेटा एकाच ठिकाणी सुरक्षितपणे साठवते आणि विविध वापरकर्त्यांना (Users) त्यांच्या गरजेनुसार माहिती प्रदान करते. ही प्रणाली प्रशासक, प्राध्यापक आणि विद्यार्थी या तिन्ही स्तरांवर कार्य करते.

तंत्रज्ञान स्टॅक (Tech Stack)

या प्रकल्पासाठी मी MERN स्टॅक वापरला आहे:

• Frontend: React.js (वापरकर्ता इंटरफेससाठी)
• Backend: Node.js आणि Express.js (सर्व्हर-साइड लॉजिक आणि API साठी)
• Database: MongoDB (डेटा साठवण्यासाठी)
• Authentication: JSON Web Tokens (JWT) (सुरक्षित लॉगिनसाठी)

मुख्य वैशिष्ट्ये (Key Features)

प्रणालीमध्ये तीन मुख्य भूमिका (Roles) आहेत:

१. प्रशासक (Admin)

• फॅकल्टी आणि विद्यार्थ्यांची खाती तयार करणे आणि व्यवस्थापित करणे.
• संपूर्ण प्रणालीवर नियंत्रण ठेवणे.
• कोर्सेस आणि विभागांची माहिती व्यवस्थापित करणे.

२. प्राध्यापक (Faculty)

• विद्यार्थ्यांची उपस्थिती नोंदवणे.
• विद्यार्थ्यांचे गुण (Marks) अपलोड करणे.
• विद्यार्थ्यांच्या प्रगतीवर लक्ष ठेवणे.

३. विद्यार्थी (Student)

• स्वतःची उपस्थिती पाहणे.
• स्वतःचे निकाल आणि गुण तपासणे.
• प्रोफाइल माहिती पाहणे.

डेटाबेस स्कीमा (Database Schema)

मी 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', 'faculty', 'student'], required: true },
});

const studentSchema = new mongoose.Schema({
  user: { type: mongoose.Schema.Types.ObjectId, ref: 'User' },
  rollNo: { type: String, required: true },
  class: { type: String, required: true },
});

const attendanceSchema = new mongoose.Schema({
  student: { type: mongoose.Schema.Types.ObjectId, ref: 'Student' },
  date: { type: Date, default: Date.now },
  status: { type: String, enum: ['present', 'absent'], required: true },
});

अंमलबजावणी (Implementation)

प्रमाणीकरण (Authentication)

सुरक्षेसाठी, मी JWT चा वापर केला आहे. जेव्हा एखादा वापरकर्ता लॉगिन करतो, तेव्हा सर्व्हर एक टोकन तयार करतो, जे पुढील सर्व विनंत्यांसाठी (requests) वापरले जाते.

const login = async (req, res) => {
  const { email, password } = req.body;
  const user = await User.findOne({ email });
  if (user && (await bcrypt.compare(password, user.password))) {
    const token = jwt.sign({ id: user._id, role: user.role }, process.env.JWT_SECRET);
    res.json({ token, role: user.role });
  } else {
    res.status(401).json({ message: 'Invalid credentials' });
  }
};

API डिझाइन

मी RESTful API डिझाइन केले आहेत जे फ्रंटएंड आणि बॅकएंडमधील संवाद सुलभ करतात. उदाहरणार्थ:

• POST /api/auth/login - लॉगिनसाठी.
• GET /api/students - विद्यार्थ्यांची यादी मिळवण्यासाठी.
• POST /api/attendance - उपस्थिती नोंदवण्यासाठी.

फ्रंटएंड (Frontend)

React आणि Axios चा वापर करून, मी एक रिस्पॉन्सिव्ह युजर इंटरफेस तयार केला आहे. Context API चा वापर करून मी संपूर्ण ॲप्लिकेशनमध्ये युजरचा डेटा आणि ऑथेंटिकेशन स्टेट व्यवस्थापित केले आहे.

आव्हाने आणि शिकवण (Challenges and Learnings)

या प्रकल्पादरम्यान मला अनेक गोष्टी शिकायला मिळाल्या:

• State Management: React मध्ये डेटा व्यवस्थापित करणे आव्हानात्मक होते, त्यासाठी मी Context API चा वापर केला.
• Error Handling: बॅकएंड आणि फ्रंटएंड दोन्ही ठिकाणी त्रुटी (errors) व्यवस्थित हाताळणे आणि वापरकर्त्याला योग्य संदेश देणे महत्त्वाचे आहे.
• Security: पासवर्ड सुरक्षित ठेवण्यासाठी bcrypt चा वापर करणे आणि टोकन व्यवस्थापन करणे.

निष्कर्ष (Conclusion)

ही प्रणाली कॉलेजमधील प्रशासकीय कामांचा ताण कमी करण्यास आणि डेटा व्यवस्थापन अधिक कार्यक्षम करण्यास मदत करू शकते. भविष्यात, मी यामध्ये 'पेमेंट गेटवे' (Payment Gateway) आणि 'रिअल-टाइम नोटिफिकेशन सिस्टम' (Real-time Notification System) सारखी वैशिष्ट्ये जोडण्याचा विचार करत आहे.