میں نے ایک فل اسٹیک اکیڈمک مینجمنٹ سسٹم بنایا
میرا کالج حاضری کے لیے کاغذ کے رجسٹر اور نمبروں کے لیے ایکسل شیٹس استعمال کرتا تھا۔ نوٹس جسمانی بورڈز پر لگے رہتے تھے۔ میری ٹیم نے اس پورے عمل کو ڈیجیٹل کرنے کا فیصلہ کیا۔
ہم نے Student Sphere بنایا۔
یہ سسٹم تین مختلف ڈیش بورڈز استعمال کرتا ہے:
اسٹوڈنٹ ڈیش بورڈ:
- حاضری اور اہلیت دیکھیں
- گریڈز چیک کریں
- اسٹڈی نوٹس ڈاؤن لوڈ کریں
- اسائنمنٹس ڈیجیٹل طور پر جمع کروائیں
- سمسٹر نوٹس دیکھیں
فیکلٹی ڈیش بورڈ:
- حاضری اور نمبر اپ ڈیٹ کریں
- نوٹس اور لیب رپورٹس اپ لوڈ کریں
- اسائنمنٹ کی ڈیڈ لائنز مقرر کریں
- مخصوص سمسٹرز کے لیے نوٹس پوسٹ کریں
- طلباء کی جمع کردہ اسائنمنٹس کا جائزہ لیں
ایڈمن ڈیش بورڈ:
- نئی رجسٹریشنز کی منظوری دیں
- صارف اکاؤنٹس کا انتظام کریں
- پورے سمسٹرز کو پروموٹ کریں
- سسٹم کے اعداد و شمار دیکھیں
- تمام نوٹسز کا انتظام کریں
ٹیکنیکل اسٹیک:
Frontend:
- HTML5, CSS3, اور Vanilla JavaScript
- React یا Vue جیسے کوئی فریم ورکس استعمال نہیں کیے
- تمام صفحات کے لیے ایک ہی CSS فائل
- موبائل سے لے کر 4K اسکرینز تک کے لیے ریسپانسیو ڈیزائن
Backend:
- Node.js اور Express.js v5
- JWT آتھنٹیکیشن
- Bcrypt پاس ورڈ ہیشنگ
- 30 سے زیادہ اینڈ پوائنٹس کے ساتھ REST API
Database اور Deployment:
- MongoDB Atlas
- Frontend Netlify پر ہوسٹ کیا گیا ہے
- Backend Render پر ہوسٹ کیا گیا ہے
- WebView کے ذریعے Java کے ساتھ بنائی گئی Android ایپ
ہمیں دو بڑے تکنیکی چیلنجز کا سامنا کرنا پڑا۔
چیلنج 1: API پرفارمنس
شروع میں فیکلٹی ڈیش بورڈ طلباء کا ڈیٹا لوڈ کرنے کے لیے 46 الگ الگ API کالز کرتا تھا۔ اس کی وجہ سے 14 سیکنڈ کی تاخیر ہوتی تھی۔ میں نے ان انفرادی کالز کو ایک واحد MongoDB $in کوئری سے بدل دیا۔ اس سے لوڈ ہونے کے وقت میں نمایاں کمی آئی۔
چیلنج 2: React کے بغیر سنگل پیج ایپلی کیشن (SPA) ہم نے صرف vanilla JavaScript کا استعمال کرتے ہوئے ایک رول بیسڈ SPA بنایا۔ ہم نے روٹنگ اور اسٹیٹ کا انتظام دستی طور پر (manually) کیا۔ ہم نے موبائل ڈیوائسز پر ہوریزنٹل اسکرولنگ کو ختم کرنے کے لیے CSS میڈیا کوئریز کا استعمال کیا۔
اہم اسباق:
- فریم ورکس کے بغیر کام کرنا آپ کو سکھاتا ہے کہ ویب ٹیکنالوجی اندرونی طور پر کیسے کام کرتی ہے۔
- نئے فیچرز شامل کرنے سے زیادہ اہم پرفارمنس کو بہتر بنانا ہے۔
- ڈیٹا بیس اسکیمہ کے ابتدائی فیصلے پورے پروجیکٹ پر اثر انداز ہوتے ہیں۔
- ڈیپلائمنٹ کے لیے CORS اور انوائرمنٹ ویری ایبلز کا محتاط انتظام ضروری ہے۔
یہ پروجیکٹ رامگووند انسٹی ٹیوٹ آف ٹیکنالوجی، کوڈرما کے پانچ طلباء نے جناب اجے کمار ڈانگی کی رہنمائی میں بنایا ہے۔
Live Website: https://studentsphere0.netlify.app
Frontend GitHub: https://github.com/sumankumarsinghrajput/studentsphere-frontend
Backend GitHub: https://github.com/sumankumarsinghrajput/studentsphere-backend
میں نے اپنے کالج کے لیے ایک فل اسٹیک اکیڈمک مینجمنٹ سسٹم بنایا، یہاں طریقہ کار ہے
کالج کا انتظام سنبھالنا ایک بہت بڑا کام ہے جس میں بہت سے پیچیدہ پہلو شامل ہوتے ہیں۔
مسئلہ (The Problem)
میرے کالج میں، بہت سے انتظامی کام اب بھی دستی (manual) طریقے سے کیے جاتے ہیں۔ کاغذ پر مبنی ریکارڈ رکھنے سے نہ صرف ڈیٹا کو تلاش کرنا مشکل ہو جاتا ہے بلکہ اس میں غلطیوں کا امکان بھی زیادہ ہوتا ہے۔ اس کے علاوہ، طلباء اور اساتذہ کے لیے حقیقی وقت (real-time) میں معلومات تک رسائی حاصل کرنا بھی ایک چیلنج تھا۔
حل (The Solution)
اس مسئلے کو حل کرنے کے لیے، میں نے ایک مکمل ویب ایپلی کیشن بنانے کا فیصلہ کیا جو کالج کے تمام انتظامی کاموں کو ڈیجیٹلائز کر سکے۔ اس سسٹم کا مقصد ڈیٹا کو منظم کرنا، رسائی کو آسان بنانا اور انسانی غلطیوں کو کم کرنا ہے۔
ٹیک اسٹیک (Tech Stack)
اس پروجیکٹ کو تیار کرنے کے لیے میں نے MERN Stack کا استعمال کیا:
- MongoDB: ایک NoSQL ڈیٹا بیس کے طور پر ڈیٹا اسٹور کرنے کے لیے۔
- Express.js: بیک اینڈ ویب فریم ورک کے طور پر۔
- React.js: ایک طاقتور فرنٹ اینڈ لائبریری کے طور پر۔
- Node.js: سرور سائیڈ رن ٹائم انوائرمنٹ کے طور پر۔
اہم خصوصیات (Key Features)
1. صارف کی تصدیق اور سیکیورٹی (User Authentication & Security)
سسٹم میں مختلف کرداروں (roles) کے لیے سیکیورٹی کو یقینی بنانے کے لیے میں نے JWT (JSON Web Tokens) اور bcrypt کا استعمال کیا۔ اس سے یہ یقینی بنتا ہے کہ صرف مجاز صارفین ہی اپنے متعلقہ ڈیٹا تک رسائی حاصل کر سکیں۔
2. ایڈمن ڈیش بورڈ (Admin Dashboard)
ایڈمن کے پاس پورے سسٹم پر مکمل کنٹرول ہوتا ہے۔ وہ درج ذیل کام کر سکتا ہے:
- طالب علموں اور اساتذہ کے اکاؤنٹس بنانا اور مینیج کرنا۔
- نئے کورسز اور شعبہ جات (departments) شامل کرنا۔
- پورے کالج کے ڈیٹا کا جائزہ لینا۔
3. اساتذہ کا ڈیش بورڈ (Faculty Dashboard)
اساتذہ کو اپنے متعلقہ کورسز کے لیے مخصوص اختیارات حاصل ہیں:
- طالب علموں کی حاضری (attendance) لگانا۔
- امتحانات کے نمبر (marks) اپ لوڈ کرنا۔
- تعلیمی مواد اور شیڈول شیئر کرنا۔
4. طالب علم کا ڈیش بورڈ (Student Dashboard)
طالب علموں کے لیے ایک سادہ اور کارآمد انٹرفیس بنایا گیا ہے جہاں وہ:
- اپنی حاضری کی صورتحال دیکھ سکتے ہیں۔
- اپنے امتحانی نتائج (grades) چیک کر سکتے ہیں۔
- اپنے کورسز اور شیڈول کی معلومات حاصل کر سکتے ہیں۔
عمل درآمد (Implementation)
بیک اینڈ (Backend)
میں نے Node.js اور Express.js کا استعمال کرتے ہوئے ایک RESTful API تیار کی۔ ڈیٹا بیس کے ساتھ رابطے کے لیے Mongoose کا استعمال کیا گیا تاکہ ڈیٹا کی ماڈلنگ اور مینجمنٹ آسان ہو سکے۔
فرنٹ اینڈ (Frontend)
فرنٹ اینڈ کے لیے React.js کا استعمال کیا گیا تاکہ ایک تیز رفتار اور انٹرایکٹو یوزر انٹرفیس (UI) بنایا جا سکے۔ ڈیزائننگ کے لیے میں نے Tailwind CSS کا استعمال کیا تاکہ سسٹم جدید اور رسائی کے قابل (responsive) نظر آئے۔
نتیجہ (Conclusion)
اس پروجیکٹ پر کام کرنا میرے لیے ایک بہترین سیکھنے کا تجربہ تھا۔ اس نے مجھے نہ صرف فل اسٹیک ڈویلپمنٹ کے تصورات کو سمجھنے میں مدد دی بلکہ یہ بھی سکھایا کہ کس طرح حقیقی دنیا کے مسائل کو ٹیکنالوجی کے ذریعے حل کیا جا سکتا ہے۔