📚 Student Data Collector

A modern, elegant web application for collecting, managing, and organizing student records with real-time cloud synchronization. Built with Firebase, Cloud Firestore, and Google Authentication.

---

✨ Features

• Real-time Data Sync — Seamlessly sync student records across devices with Cloud Firestore.
• Secure Authentication — Google Sign-In integration for secure user access.
• University & Faculty Hierarchy — Organized navigation through 17+ Sri Lankan universities and their faculties/departments.
• Contact Validation — Smart validation for Sri Lankan phone numbers (both local and international formats).
• Responsive Design — Pixel-perfect UI that works beautifully on desktop, tablet, and mobile.
• Dark-themed UI — Modern gradient background with glassmorphism effects.
• Auto-hiding Notifications — Success/error messages with smooth animations.
• Edit & Delete Operations — Full CRUD functionality with Firebase persistence.
• Form Validation — Comprehensive field validation before submission.

---

🛠️ Tech Stack

Category	Technology
Frontend	HTML5, CSS3, Vanilla JavaScript (ES6+)
Backend	Google Firebase
Database	Cloud Firestore (NoSQL)
Authentication	Firebase Auth (Google Sign-In)
Module System	ES6 Modules
Deployment	Firebase Hosting (ready)

---

📋 Project Structure

Student-Data-Collector/
├── index.html           # Main HTML structure
├── script.js            # Core application logic
├── styles.css           # Responsive styling
├── firebase-config.js   # Firebase configuration
├── README.md            # Documentation
└── package.json         # Dependencies (Firebase SDK)

---

🚀 Quick Start

Prerequisites

• Node.js 14+ (for npm packages)
• Modern web browser
• Firebase account (free tier works)
• Google account (for authentication)

1. Clone & Setup

git clone https://github.com/SahanPramuditha-Dev/Student-Data-Collector.git
cd Student-Data-Collector
npm install firebase

2. Configure Firebase

1. Go to Firebase Console
2. Create a new project or select existing one
3. Register a Web app and copy your Firebase config
4. Update firebase-config.js with your credentials:

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT.firebasestorage.app",
  messagingSenderId: "YOUR_MESSAGING_ID",
  appId: "YOUR_APP_ID",
  measurementId: "YOUR_MEASUREMENT_ID"
};

3. Enable Firebase Services

Firestore Database

• Firebase Console → Firestore Database → Create Database
• Start in Test Mode (for development)
• Create a students collection

Authentication

• Firebase Console → Authentication → Sign-in method
• Enable Google provider
• Add authorized domains (e.g., localhost:5500)

4. Run Locally

# Using Python
python -m http.server 5500

# Or using Node (install http-server first)
npx http-server -p 5500

Visit: http://localhost:5500

---

📖 Usage Guide

Adding a Student

1. Sign in with your Google account
2. Fill in the form with student details:
   • Full Name
   • Student ID
   • Contact Number (Sri Lankan format: 0771234567 or +94771234567)
   • Email
   • University, Faculty, Department
   • Academic Year
3. Click Save Student
4. Record appears in the table in real-time

Editing a Student

1. Click Edit on any student row (if enabled)
2. Modify fields in the form
3. Click Update to save changes
4. Changes sync to Firestore instantly

Deleting a Student

1. Click Delete button on any student row
2. Confirm deletion
3. Record removed from Firestore and table updates instantly

Managing Multiple Devices

• Sign in on different devices with the same Google account
• All changes sync in real-time thanks to Firestore's onSnapshot listener
• No manual refresh needed

---

🔒 Security & Rules

Development (Test Mode)

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

⚠️ WARNING: Test mode allows anyone with the config to read/write. Use for development only.

Production (Recommended)

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /students/{docId} {
      allow read: if request.auth != null;
      allow write: if request.auth != null;
    }
  }
}

Requires authenticated users for read/write operations.

---

🎨 UI/UX Highlights

• Responsive Grid Layout — Auto-adjusts from mobile to desktop
• Smooth Animations — Rise-in effects on page load, button hover states, message fadeout
• Color-coded Year Badges — 1st-4th year students shown with distinct colors
• Gradient Backgrounds — Modern radial & linear gradients for visual appeal
• Glassmorphism Cards — Semi-transparent cards with backdrop blur
• Accessible Focus States — Clear visual feedback for keyboard navigation
• Loading Indicators — Spinner on submit button during save/delete
• Auto-hide Messages — Success messages disappear after 4 seconds, errors after 6 seconds

---

📱 Browser Support

Browser	Support
Chrome	✅ Full
Firefox	✅ Full
Safari	✅ Full
Edge	✅ Full
IE 11	❌ Not supported

---

🔧 Configuration

University Data

Edit the UNIVERSITY_FACULTY_DATA object in script.js to:

• Add/remove universities
• Update faculty names
• Modify department lists

Currently includes 17 Sri Lankan government universities with complete faculty/department hierarchies.

Form Validation

Contact number validation regex (in isValidContact function):

/^(?:\+94|0)\d{9}$/

• Accepts: 0771234567 (local) or +94771234567 (international)
• Rejects: Invalid formats, too short/long numbers

---

📊 Data Schema

Each student record in Firestore has this structure:

{
  id: "uuid-string",
  name: "Student Name",
  studentId: "STU-1001",
  contact: "0771234567",
  email: "student@example.com",
  university: "University of Colombo",
  faculty: "Faculty of Science",
  department: "Department of Physics",
  year: "2nd Year",
  createdAt: serverTimestamp(),
  createdBy: "user-email@gmail.com"
}

---

🚀 Deployment

Firebase Hosting

# Install Firebase CLI
npm install -g firebase-tools

# Login to Firebase
firebase login

# Initialize Firebase (select Hosting)
firebase init hosting

# Deploy
firebase deploy

Your app will be live at: https://your-project-id.web.app

---

🐛 Troubleshooting

Issue	Solution
"Permission denied" error	Check Firestore rules; ensure Google auth is enabled
Data not syncing	Verify Firestore collection name is students; check network tab
Sign-in redirects to login.html	Ensure login.html exists or remove redirect in onAuthStateChanged
Can't add students	Verify all form fields are filled; check contact number format
Mobile form too cramped	Zoom out or view in landscape; responsive CSS handles smaller screens

---

📝 Local Data Migration (localStorage → Firestore)

If migrating from localStorage:

1. Open DevTools Console
2. Run:

const saved = JSON.parse(localStorage.getItem('studentRecords') || '[]');
saved.forEach(async s => {
  await setDoc(doc(db, 'students', s.id), s);
});

3. Confirm records appear in Firestore Console

---

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/awesome-feature
3. Commit changes: git commit -m "Add awesome feature"
4. Push to branch: git push origin feature/awesome-feature
5. Open a Pull Request

---

📄 License

This project is open source and available under the MIT License.

---

👤 Author

Sahan Pramuditha

• GitHub: @SahanPramuditha-Dev
• Built with ❤️ for student data management

---

🔗 Resources

• Firebase Documentation
• Cloud Firestore Guide
• Firebase Authentication
• MDN Web Docs

---

Last Updated: February 2026