𝗜 𝗕𝘂𝗶𝗹𝘁 𝗮 𝗙𝘂𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 𝗔𝗰𝗮𝗱𝗲𝗺𝗶𝗰 𝗠𝗮𝗻𝗮𝗴𝗲𝗺𝗲𝗻𝘁 𝗦𝘆𝘀𝘁𝗲𝗺
મારા કોલેજમાં હાજરી માટે કાગળના રજિસ્ટર અને માર્કસ માટે એક્સેલ શીટ્સનો ઉપયોગ થતો હતો. નોટિસ ભૌતિક બોર્ડ પર લગાવવામાં આવતી હતી. મારી ટીમે આ સમગ્ર પ્રક્રિયાને ડિજિટાઇઝ કરવાનો નિર્ણય લીધો.
અમે 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+ એન્ડપોઇન્ટ્સ સાથે REST API
Database and Deployment:
- MongoDB Atlas
- Frontend Netlify પર હોસ્ટ કરેલ છે
- Backend Render પર હોસ્ટ કરેલ છે
- WebView દ્વારા Java સાથે બનાવેલ Android એપ
અમે બે મુખ્ય ટેકનિકલ અવરોધોનો સામનો કર્યો.
Challenge 1: API Performance શરૂઆતમાં, faculty dashboard દ્વારા વિદ્યાર્થીનો ડેટા લોડ કરવા માટે 46 અલગ-અલગ API કોલ્સ કરવામાં આવતા હતા. આના કારણે 14 સેકન્ડનો વિલંબ થતો હતો. મેં વ્યક્તિગત કોલ્સને બદલે એક સિંગલ MongoDB $in ક્વેરીનો ઉપયોગ કર્યો. આનાથી લોડ ટાઈમમાં નોંધપાત્ર ઘટાડો થયો.
Challenge 2: React વગર Single Page Application અમે ફક્ત vanilla JavaScript નો ઉપયોગ કરીને role-based SPA બનાવ્યું. અમે રૂટિંગ અને સ્ટેટને મેન્યુઅલી મેનેજ કર્યું. મોબાઈલ ઉપકરણો પર ઝીરો હોરિઝોન્ટલ સ્ક્રોલિંગ સુનિશ્ચિત કરવા માટે અમે CSS media queries નો ઉપયોગ કર્યો.
Key Lessons:
- ફ્રેમવર્ક વગર કામ કરવાથી તમને સમજાય છે કે વેબ ટેકનોલોજી અંદરથી કેવી રીતે કામ કરે છે.
- નવા ફીચર્સ ઉમેરવા કરતાં પરફોર્મન્સ ઓપ્ટિમાઇઝેશન વધુ મહત્વનું છે.
- ડેટાબેઝ સ્કીમાના વહેલા નિર્ણયો સમગ્ર પ્રોજેક્ટ પર અસર કરે છે.
- ડિપ્લોયમેન્ટ માટે CORS અને એન્વાયરમેન્ટ વેરિયેબલ્સનું સાવચેતીપૂર્વક મેનેજમેન્ટ જરૂરી છે.
આ પ્રોજેક્ટ શ્રી અજય કુમાર ડાંગીના માર્ગદર્શન હેઠળ કોડરમાની Ramgovind Institute of Technology ના પાંચ વિદ્યાર્થીઓ દ્વારા બનાવવામાં આવ્યો હતો.
Live Website: https://studentsphere0.netlify.app
Frontend GitHub: https://github.com/sumankumarsinghrajput/studentsphere-frontend
Backend GitHub: https://github.com/sumankumarsinghrajput/studentsphere-backend
મેં મારા કોલેજ માટે ફૂલ-સ્ટેક એકેડેમિક મેનેજમેન્ટ સિસ્ટમ બનાવી - અહીં તેની રીત છે
તમારી કોલેજ માટે કંઈક ઉપયોગી બનાવવું એ શીખવા માટેનો એક ઉત્તમ માર્ગ છે. મેં એક એકેડેમિક મેનેજમેન્ટ સિસ્ટમ બનાવવાનું નક્કી કર્યું જે કોલેજના વહીવટી કાર્યોને સરળ બનાવે.
ટેક સ્ટેક (Tech Stack)
આ પ્રોજેક્ટ માટે મેં MERN સ્ટેકનો ઉપયોગ કર્યો છે:
- MongoDB: ડેટાબેઝ તરીકે.
- Express.js: બેકએન્ડ ફ્રેમવર્ક તરીકે.
- React: યુઝર ઇન્ટરફેસ બનાવવા માટે.
- Node.js: રનટાઇમ એન્વાયરમેન્ટ તરીકે.
મુખ્ય વિશેષતાઓ (Key Features)
આ સિસ્ટમમાં ત્રણ મુખ્ય ભૂમિકાઓ (roles) છે:
1. એડમિન (Admin)
- વિદ્યાર્થીઓ અને ફેકલ્ટી ઉમેરવા અને મેનેજ કરવા.
- કોર્સ અને વિભાગોનું સંચાલન કરવું.
- સમગ્ર સિસ્ટમ પર નિયંત્રણ રાખવું.
2. ફેકલ્ટી (Faculty)
- વિદ્યાર્થીઓની હાજરી (attendance) લેવી.
- માર્કસ અને ગ્રેડ અપલોડ કરવા.
- કોર્સ મટિરિયલ શેર કરવું.
3. વિદ્યાર્થી (Student)
- પોતાની હાજરી જોવી.
- માર્કસ અને ગ્રેડ ચેક કરવા.
- કોર્સની વિગતો જોવી.
ડેટાબેઝ ડિઝાઇન (Database Design)
મેં ડેટાને વ્યવસ્થિત રાખવા માટે MongoDB નો ઉપયોગ કર્યો. મુખ્ય કલેક્શન્સ (collections) માં નીચેનાનો સમાવેશ થાય છે:
Users: યુઝર પ્રોફાઇલ અને રોલ માટે.Courses: કોર્સની વિગતો માટે.Attendance: હાજરીના રેકોર્ડ માટે.Grades: વિદ્યાર્થીઓના પરિણામો માટે.
અમલીકરણ (Implementation)
બેકએન્ડ (Backend)
મેં RESTful API બનાવવા માટે Node.js અને Express.js નો ઉપયોગ કર્યો. સુરક્ષા માટે, મેં JWT (JSON Web Tokens) નો ઉપયોગ કરીને ઓથેન્ટિકેશન (authentication) અમલમાં મૂક્યું છે.
ફ્રન્ટએન્ડ (Frontend)
યુઝર ઇન્ટરફેસ માટે React નો ઉપયોગ કરવામાં આવ્યો છે. સ્ટેટ મેનેજમેન્ટ માટે મેં Context API નો ઉપયોગ કર્યો છે અને સ્ટાઇલિંગ માટે Tailwind CSS નો ઉપયોગ કર્યો છે.
પડકારો (Challenges)
સૌથી મોટો પડકાર ડેટાબેઝમાં વિદ્યાર્થીઓ, કોર્સ અને ફેકલ્ટી વચ્ચેના જટિલ સંબંધોને હેન્ડલ કરવાનો હતો. મેં આ માટે MongoDB ના રિલેશનલ મોડેલિંગનો ઉપયોગ કર્યો.
નિષ્કર્ષ (Conclusion)
આ પ્રોજેક્ટ મારા માટે શીખવાનો એક અદભૂત અનુભવ હતો. તેણે મને ફૂલ-સ્ટેક ડેવલપમેન્ટના વાસ્તવિક ઉપયોગો સમજવામાં મદદ કરી.