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

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

Kolejim için full-stack bir akademik yönetim sistemi inşa ettim - işte nasıl yaptığım

Giriş

Kolejlerdeki akademik süreçleri yönetmek genellikle karmaşık ve zaman alıcıdır. Manuel olarak tutulan kayıtlar, hata payını artırır ve verimliliği düşürür. Bu sorunu çözmek ve süreçleri otomatize etmek amacıyla, kendi kolejim için kapsamlı bir Akademik Yönetim Sistemi geliştirmeye karar verdim.

Bu yazıda, bu projeyi nasıl inşa ettiğimi, hangi teknolojileri kullandığımı ve karşılaştığım zorlukları paylaşacağım.

Teknoloji Yığını (Tech Stack)

Bu projeyi geliştirirken modern, ölçeklenebilir ve performanslı bir yapı kurmak için MERN stack kullanmaya karar verdim:

  • MongoDB: Esnek veri yapısı sayesinde öğrenci, öğretmen ve ders bilgilerini depolamak için NoSQL veritabanı olarak kullanıldı.
  • Express.js: Node.js üzerinde çalışan, hızlı ve minimalist bir web framework'ü olarak backend tarafında görev yaptı.
  • React.js: Kullanıcı dostu, dinamik ve hızlı bir arayüz (UI) oluşturmak için frontend tarafında tercih edildi.
  • Node.js: Sunucu tarafı mantığını yürütmek ve API uç noktalarını (endpoints) yönetmek için kullanıldı.

Temel Özellikler

Sistem, üç ana kullanıcı rolüne göre özelleştirilmiş paneller içeriyor:

1. Yönetici (Admin) Paneli

Yöneticiler sistemin genel kontrolüne sahiptir:

  • Kullanıcı Yönetimi: Öğretmen ve öğrenci hesaplarını oluşturma, güncelleme veya silme.
  • Ders ve Bölüm Yönetimi: Yeni dersler ekleme ve bunları ilgili bölümlere atama.
  • Sistem Gözetimi: Tüm akademik verilerin genel görünümü.

2. Öğretmen Paneli

Öğretmenler kendi akademik sorumluluklarını yönetebilir:

  • Yoklama Yönetimi: Öğrencilerin ders devamlılığını takip etme.
  • Not Girişi: Sınav ve ödev sonuçlarını sisteme işleme.
  • Ders Takibi: Kendisine atanan derslerin içeriğini ve programını yönetme.

3. Öğrenci Paneli

Öğrenciler kendi akademik durumlarını takip edebilir:

  • Not Görüntüleme: Sınav sonuçlarını ve genel başarı durumunu takip etme.
  • Devamsızlık Takibi: Derslere katılım durumunu kontrol etme.
  • Ders Programı: Güncel ders programına erişim.

Uygulama Süreci ve Teknik Detaylar

Kimlik Doğrulama ve Yetkilendirme (Authentication & Authorization)

Güvenliği sağlamak için JSON Web Tokens (JWT) kullandım. Kullanıcılar giriş yaptığında bir token oluşturulur ve bu token, kullanıcının rolüne (Admin, Teacher, Student) göre yetkilendirilmesini sağlar. Şifrelerin güvenliği için ise bcrypt kütüphanesi ile hashing işlemi uygulandı.

Örnek bir middleware yapısı şu şekilde görünüyor:

const authMiddleware = (roles) => {
  return (req, res, next) => {
    const token = req.header('Authorization');
    if (!token) return res.status(401).json({ message: 'Erişim engellendi. Token bulunamadı.' });

    try {
      const verified = jwt.verify(token, process.env.JWT_SECRET);
      req.user = verified;

      if (roles && !roles.includes(req.user.role)) {
        return res.status(403).json({ message: 'Bu işlem için yetkiniz yok.' });
      }
      next();
    } catch (err) {
      res.status(400).json({ message: 'Geçersiz token.' });
    }
  };
};

Veri Modelleme

MongoDB üzerinde verileri ilişkisel bir yapıda tutmak için referanslar kullandım. Örneğin, bir Course (Ders) modeli, bir Teacher (Öğretmen) modeline referans verir.

const courseSchema = new mongoose.Schema({
  title: { type: String, required: true },
  description: String,
  teacher: { type: mongoose.Schema.Types.ObjectId, ref: 'User' },
  students: [{ type: mongoose.Schema.Types.ObjectId, ref: 'User' }]
});

Karşılaşılan Zorluklar

Projenin en büyük zorluğu, farklı kullanıcı rolleri arasındaki karmaşık yetkilendirme mantığını kurmaktı. Bir öğretmenin sadece kendi derslerine not girebilmesi, ancak bir yöneticinin tüm sisteme erişebilmesi gibi kuralları sağlamak için sağlam bir middleware yapısı kurmam gerekti. Ayrıca, frontend tarafında state yönetimi (Redux kullanarak) ve verilerin anlık güncellenmesi de üzerinde epey durduğum konular arasındaydı.

Sonuç

Bu proje, sadece bir yazılım geliştirme süreci değil, aynı zamanda gerçek bir soruna çözüm üretme deneyimiydi. Full-stack bir uygulama geliştirirken frontend ve backend arasındaki senkronizasyonu sağlamak, veritabanı şemalarını optimize etmek ve güvenliği sağlamak bana çok şey öğretti.

Eğer siz de benzer bir proje geliştirmek istiyorsanız, küçük adımlarla başlayıp modüler bir yapı kurmanızı öneririm.

Yazıyı beğendiyseniz takip etmeyi ve yorum yapmayı unutmayın!