ನಾನು ಒಂದು ಫುಲ್ ಸ್ಟ್ಯಾಕ್ ಅಕಾಡೆಮಿಕ್ ಮ್ಯಾನೇಜ್ಮೆಂಟ್ ಸಿಸ್ಟಮ್ ಅನ್ನು ನಿರ್ಮಿಸಿದೆ
ನನ್ನ ಕಾಲೇಜಿನಲ್ಲಿ ಹಾಜರಾತಿಗಾಗಿ ಕಾಗದದ ರಿಜಿಸ್ಟರ್ಗಳನ್ನು ಮತ್ತು ಅಂಕಗಳಿಗಾಗಿ ಎಕ್ಸೆಲ್ ಶೀಟ್ಗಳನ್ನು ಬಳಸಲಾಗುತ್ತಿತ್ತು. ನೋಟಿಸ್ಗಳು ಭೌತಿಕ ಬೋರ್ಡ್ಗಳ ಮೇಲೆ ಇರುತ್ತಿದ್ದವು. ಈ ಸಂಪೂರ್ಣ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಡಿಜಿಟಲೀಕರಣಗೊಳಿಸಲು ನನ್ನ ತಂಡ ನಿರ್ಧರಿಸಿತು.
ನಾವು Student Sphere ಅನ್ನು ನಿರ್ಮಿಸಿದೆವು.
ಈ ಸಿಸ್ಟಮ್ ಮೂರು ವಿಭಿನ್ನ ಡ್ಯಾಶ್ಬೋರ್ಡ್ಗಳನ್ನು ಬಳಸುತ್ತದೆ:
Student Dashboard:
- ಹಾಜರಾತಿ ಮತ್ತು ಅರ್ಹತೆಯನ್ನು ನೋಡಿ
- ಅಂಕಗಳನ್ನು (grades) ಪರಿಶೀಲಿಸಿ
- ಅಧ್ಯಯನ ಟಿಪ್ಪಣಿಗಳನ್ನು (study notes) ಡೌನ್ಲೋಡ್ ಮಾಡಿ
- ಅಸೈನ್ಮೆಂಟ್ಗಳನ್ನು ಡಿಜಿಟಲ್ ಆಗಿ ಸಲ್ಲಿಸಿ
- ಸೆಮಿಸ್ಟರ್ ನೋಟಿಸ್ಗಳನ್ನು ನೋಡಿ
Faculty Dashboard:
- ಹಾಜರಾತಿ ಮತ್ತು ಅಂಕಗಳನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡಿ
- ನೋಟ್ಸ್ ಮತ್ತು ಲ್ಯಾಬ್ ವರದಿಗಳನ್ನು ಅಪ್ಲೋಡ್ ಮಾಡಿ
- ಅಸೈನ್ಮೆಂಟ್ ಗಡುವನ್ನು (deadlines) ನಿಗದಿಪಡಿಸಿ
- ನಿರ್ದಿಷ್ಟ ಸೆಮಿಸ್ಟರ್ಗಳಿಗೆ ನೋಟಿಸ್ಗಳನ್ನು ಪೋಸ್ಟ್ ಮಾಡಿ
- ವಿದ್ಯಾರ್ಥಿಗಳ ಸಲ್ಲಿಕೆಗಳನ್ನು ಪರಿಶೀಲಿಸಿ
Admin Dashboard:
- ಹೊಸ ನೋಂದಣಿಗಳನ್ನು ಅನುಮೋದಿಸಿ
- ಬಳಕೆದಾರರ ಖಾತೆಗಳನ್ನು ನಿರ್ವಹಿಸಿ
- ಇಡೀ ಸೆಮಿಸ್ಟರ್ಗಳನ್ನು ಪ್ರಮೋಟ್ ಮಾಡಿ
- ಸಿಸ್ಟಮ್ ಅಂಕಿಅಂಶಗಳನ್ನು ನೋಡಿ
- ಎಲ್ಲಾ ನೋಟಿಸ್ಗಳನ್ನು ನಿರ್ವಹಿಸಿ
Technical Stack:
Frontend:
- HTML5, CSS3, ಮತ್ತು Vanilla JavaScript
- React ಅಥವಾ Vue ನಂತಹ ಫ್ರೇಮ್ವರ್ಕ್ಗಳಿಲ್ಲ
- ಎಲ್ಲಾ ಪುಟಗಳಿಗಾಗಿ ಒಂದೇ CSS ಫೈಲ್
- ಮೊಬೈಲ್ನಿಂದ 4K ಸ್ಕ್ರೀನ್ಗಳವರೆಗೆ ರೆಸ್ಪಾನ್ಸಿವ್ ಡಿಸೈನ್
Backend:
- Node.js ಮತ್ತು Express.js v5
- JWT ಅಥೆಂಟಿಕೇಶನ್
- Bcrypt ಪಾಸ್ವರ್ಡ್ ಹ್ಯಾಶಿಂಗ್
- 30+ ಎಂಡ್ಪಾಯಿಂಟ್ಗಳೊಂದಿಗೆ REST API
Database and Deployment:
- MongoDB Atlas
- Frontend ಅನ್ನು Netlify ನಲ್ಲಿ ಹೋಸ್ಟ್ ಮಾಡಲಾಗಿದೆ
- Backend ಅನ್ನು Render ನಲ್ಲಿ ಹೋಸ್ಟ್ ಮಾಡಲಾಗಿದೆ
- WebView ಮೂಲಕ Java ಬಳಸಿ ನಿರ್ಮಿಸಲಾದ ಆಂಡ್ರಾಯ್ಡ್ ಆಪ್
ನಾವು ಎರಡು ಪ್ರಮುಖ ತಾಂತ್ರಿಕ ಸವಾಲುಗಳನ್ನು ಎದುರಿಸಿದೆವು.
Challenge 1: API Performance ಅಧ್ಯಾಪಕ ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಆರಂಭದಲ್ಲಿ ವಿದ್ಯಾರ್ಥಿಗಳ ಡೇಟಾವನ್ನು ಲೋಡ್ ಮಾಡಲು 46 ಪ್ರತ್ಯೇಕ API ಕರೆಗಳನ್ನು ಮಾಡುತ್ತಿತ್ತು. ಇದರಿಂದ 14 ಸೆಕೆಂಡ್ಗಳ ವಿಳಂಬವಾಗುತ್ತಿತ್ತು. ನಾನು ಪ್ರತ್ಯೇಕ ಕರೆಗಳ ಬದಲಿಗೆ ಒಂದೇ MongoDB $in ಕ್ವೆರಿಯನ್ನು ಬಳಸಿದೆ. ಇದು ಲೋಡ್ ಆಗುವ ಸಮಯವನ್ನು ಗಣನೀಯವಾಗಿ ಕಡಿಮೆ ಮಾಡಿತು.
Challenge 2: Single Page Application without React ನಾವು ಕೇವಲ vanilla JavaScript ಬಳಸಿ ರೋಲ್-ಆಧಾರಿತ SPA ಅನ್ನು ನಿರ್ಮಿಸಿದೆವು. ನಾವು ರೂಟಿಂಗ್ ಮತ್ತು ಸ್ಟೇಟ್ ಅನ್ನು ಮ್ಯಾನುಯಲ್ ಆಗಿ ನಿರ್ವಹಿಸಿದೆವು. ಮೊಬೈಲ್ ಸಾಧನಗಳಲ್ಲಿ ಯಾವುದೇ ಹಾರಿಜಂಟಲ್ ಸ್ಕ್ರೋಲಿಂಗ್ (horizontal scrolling) ಇಲ್ಲದಂತೆ ನೋಡಿಕೊಳ್ಳಲು ನಾವು CSS ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಿದೆವು.
Key Lessons:
- ಫ್ರೇಮ್ವರ್ಕ್ಗಳಿಲ್ಲದೆ ನಿರ್ಮಿಸುವುದು ವೆಬ್ ತಂತ್ರಜ್ಞಾನವು ಒಳಗಿನಿಂದ ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಎಂಬುದನ್ನು ನಿಮಗೆ ಕಲಿಸುತ್ತದೆ.
- ಹೊಸ ಫೀಚರ್ಗಳನ್ನು ಸೇರಿಸುವುದಕ್ಕಿಂತ ಕಾರ್ಯಕ್ಷಮತೆಯ ಆಪ್ಟಿಮೈಸೇಶನ್ (Performance optimization) ಹೆಚ್ಚು ಮುಖ್ಯವಾಗಿದೆ.
- ಆರಂಭಿಕ ಡೇಟಾಬೇಸ್ ಸ್ಕೀಮಾ ನಿರ್ಧಾರಗಳು ಇಡೀ ಪ್ರಾಜೆಕ್ಟ್ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುತ್ತವೆ.
- ಡಿಪ್ಲಾಯ್ಮೆಂಟ್ಗೆ CORS ಮತ್ತು ಎನ್ವಿರಾನ್ಮೆಂಟ್ ವೇರಿಯೇಬಲ್ಗಳ (environment variables) ಎಚ್ಚರಿಕೆಯ ನಿರ್ವಹಣೆ ಅಗತ್ಯವಿದೆ.
ಈ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಕೋಡರ್ಮಾ ಕುವಲದ ರಾಮ್ಗೋವಿಂದ ಇನ್ಸ್ಟಿಟ್ಯೂಟ್ ಆಫ್ ಟೆಕ್ನಾಲಜಿಯ ಐದು ವಿದ್ಯಾರ್ಥಿಗಳು ಶ್ರೀ ಅಜಯ್ ಕುಮಾರ್ ಡಾಂಗಿ ಅವರ ಮಾರ್ಗದರ್ಶನದಲ್ಲಿ ನಿರ್ಮಿಸಿದ್ದಾರೆ.
Live Website: https://studentsphere0.netlify.app
Frontend GitHub: https://github.com/sumankumarsinghrajput/studentsphere-frontend
Backend GitHub: https://github.com/sumankumarsinghrajput/studentsphere-backend