A comprehensive web-based application for managing student information, classes, and classrooms with real-time data synchronization using React, Firebase, and modern web technologies.

• React 18 - Modern React with hooks and functional components
• Vite - Fast build tool and development server
• Firebase Firestore - Real-time NoSQL database
• Firebase Storage - File storage for student images
• React Icons - Icon library for UI elements
• React DatePicker - Date selection component
• date-fns - Date utility library

• 🔐 Authentication System - Secure login with session management
• 👥 Student Management - CRUD operations with image upload
• 🏫 Class Management - Schedule and class assignment
• 🏢 Classroom Management - Room allocation and capacity tracking
• 📊 Real-time Dashboard - Live statistics and overview
• 🔍 Advanced Search & Filter - Find students quickly
• 📱 Responsive Design - Works on all devices
• ⚡ Real-time Updates - Live data synchronization

src/
├── components/          # Reusable UI components
│   ├── common/         # Shared components
│   │   ├── modals/     # Modal dialogs
│   │   ├── sidebar/    # Navigation sidebar
│   │   ├── toast/      # Notification system
│   │   └── StudentImageUpload.jsx
│   └── ...
├── features/           # Feature-specific components
│   ├── dashboard/      # Main dashboard
│   ├── login/          # Authentication
│   ├── student/        # Student management
│   ├── class/          # Class management
│   └── classroom/      # Classroom management
├── utils/              # Utility functions
│   ├── config.js       # Configuration management
│   ├── firebase.js     # Firebase setup and utilities
│   └── schedule.js     # Schedule management utilities
├── App.jsx             # Main application component
└── main.jsx           # Application entry point

Purpose: Initializes the React application and renders the root component.

Key Functions:

• Creates React root with ReactDOM.createRoot
• Enables StrictMode for development debugging
• Renders the main App component

Purpose: Manages application state, authentication, and navigation.

Key Features:

• Authentication State Management: Tracks user login status
• Session Management: Handles user sessions with localStorage
• Navigation Control: Manages page routing and active states
• Loading States: Shows loading indicators during auth checks

State Variables:

• isAuthenticated: Boolean for login status
• activePage: Current page/section
• isLoading: Loading state during operations
• userInfo: Authenticated user data

Key Functions:

• checkAuthentication(): Validates existing sessions
• handleLoginSuccess(): Processes successful login
• handleNavigate(): Manages page navigation and logout

Purpose: Centralized configuration management and session handling.

Key Features:

• Environment Variables: Loads config from VITE_ prefixed variables
• Session Management: Handles user sessions with expiration
• Logging System: Configurable logging with different levels
• Validation: Ensures required environment variables are set

Configuration Categories:

• Application settings (name, version, environment)
• API configuration (base URL, timeout)
• Database settings (host, port, credentials)
• Authentication (JWT secrets, session secrets)
• File upload settings (max size, allowed types)
• Feature flags (notifications, file upload, email)

Session Management:

• setSession(): Stores user session data
• getSession(): Retrieves and validates session
• clearSession(): Removes session data
• isAuthenticated(): Checks authentication status

Purpose: Firebase configuration and database utilities.

Key Features:

• Firebase App Initialization: Sets up Firebase with environment variables
• Firestore Database: Real-time database connection
• Cloud Storage: File storage for images
• Student ID Generation: Auto-incrementing student IDs
• Data Retrieval: Fetch students by class

Key Functions:

• generateStudentId(): Creates unique student IDs (YY-XXXXX format)
• fetchStudentsByClassId(): Gets students for specific classes

Purpose: Comprehensive schedule and time management utilities.

Key Features:

• Time Conversion: 12-hour format ↔ minutes conversion
• Shift Management: Morning/Afternoon shift system
• Schedule Validation: Conflict detection and validation
• Time Slot Generation: Available time slots calculation

Shift System:

• Morning Shift: Grades 7-8 (6:30 AM - 12:00 PM)
• Afternoon Shift: Grades 9-10 (12:30 PM - 6:00 PM)

Key Functions:

• toMinutes(): Converts time string to minutes
• fromMinutes(): Converts minutes to time string
• getShiftForGrade(): Gets shift info for grade level
• validateScheduleForGrade(): Validates schedule times
• checkScheduleConflict(): Detects scheduling conflicts
• isTimeOverlap(): Checks time range overlaps

Purpose: User authentication interface and login management.

Key Features:

• Email/Password Authentication: Secure login system
• Domain Validation: Whitelist of allowed email domains
• Form Validation: Real-time input validation
• Loading States: Visual feedback during authentication
• Success Animations: Checkmark and redirect animations

Security Features:

• Email domain whitelist (Gmail, Yahoo, Outlook, etc.)
• Password visibility toggle
• Session creation on successful login
• Error handling for failed attempts

Validation Rules:

• Email format validation
• Required field validation
• Domain whitelist checking

Purpose: Main application interface and navigation hub.

Key Features:

• Responsive Sidebar: Collapsible navigation with mobile support
• Real-time Greeting: Contextual greetings based on time
• Live Clock: Current time display
• Statistics Overview: Student, class, and classroom counts
• Dynamic Content: Renders different pages based on selection

Responsive Behavior:

• Desktop: Collapsible sidebar (60px collapsed, 220px expanded)
• Mobile: Overlay sidebar with backdrop
• Auto-collapse: Sidebar collapses on small screens

Key Functions:

• getGreeting(): Generates time-based greetings
• fetchCounts(): Gets statistics from Firebase
• handleNavigation(): Manages page navigation
• handleSidebarToggle(): Toggles sidebar state

Purpose: Main navigation interface with responsive design.

Key Features:

• Collapsible Design: Expandable/collapsible sidebar
• Icon Navigation: Visual navigation with icons
• Active State: Highlights current page
• Mobile Support: Overlay mode for mobile devices
• Smooth Animations: Transition effects

Navigation Items:

• Dashboard (overview)
• Students (management)
• Classes (management)
• Classrooms (management)
• Logout (session end)

Responsive Features:

• Hamburger menu for mobile
• Overlay backdrop
• Auto-collapse on navigation

Purpose: Comprehensive student data management system.

Key Features:

• Real-time Data Sync: Live updates from Firebase
• CRUD Operations: Create, read, update, delete students
• Advanced Search: Search by ID, first name, last name
• Sorting & Filtering: Multiple sort options and filters
• Pagination: Handle large datasets efficiently
• Class Integration: Link students to classes and classrooms

Data Management:

• Firebase Firestore integration
• Real-time updates using onSnapshot
• Optimistic updates for better UX
• Error handling and validation

UI Components:

• Student table with sortable columns
• Search and filter controls
• Add/Edit/Delete action buttons
• Pagination controls
• Loading states and empty states
• Modal dialogs for forms and confirmations

Key Functions:

• openAddModal(): Opens add student form
• openEditModal(): Opens edit student form
• handleModalSubmit(): Processes form submissions
• handleDelete(): Initiates delete process
• confirmDelete(): Executes student deletion

Purpose: User feedback notification system.

Key Features:

• Multiple Types: Success, error, warning, info notifications
• Auto-dismiss: Automatic removal after 3 seconds
• Staggered Timing: 300ms delay between multiple toasts
• Stacked Display: Multiple notifications support
• Modal Support: Can display in modal context

Toast Types:

• Success: Green notifications for successful actions
• Error: Red notifications for error messages
• Warning: Yellow notifications for warnings
• Info: Blue notifications for informational messages

Purpose: Reusable confirmation dialog system.

Key Features:

• Generic DeleteModal: Reusable confirmation component
• Specialized LogoutModal: Logout-specific confirmation
• Overlay Click: Close by clicking outside
• Customizable: Title, message, and button text
• Accessibility: Proper ARIA labels and keyboard support

Components:

• DeleteModal: Generic confirmation dialog
• LogoutModal: Specialized logout confirmation

Purpose: Comprehensive student form for adding and editing.

Key Features:

• Add/Edit Modes: Handles both new and existing students
• Auto-generated IDs: Unique student ID generation
• Form Validation: Real-time field validation
• Image Upload: Profile picture integration
• Dynamic Class Selection: Grade-based section filtering
• Contact Formatting: Phone number formatting
• Age Validation: Minimum age requirements

Form Fields:

• Student ID (auto-generated, read-only)
• Email (required, validated)
• First Name (required)
• Last Name (required)
• Contact Number (formatted as ####-###-####)
• Address
• Birthdate (required, minimum age validation)
• Gender (dropdown)
• Grade (required, 7-10)
• Section (required, filtered by grade)

Validation Rules:

• Email must be valid format
• Contact number must be 11 digits in ####-###-#### format
• Student must be at least 10 years old
• Student ID must be unique
• All required fields must be filled

1. User enters email and password
2. Email domain is validated against whitelist
3. Credentials are checked against Firebase Admin document
4. On success: Session is created and user is redirected to dashboard
5. On failure: Error message is displayed

1. Add Student:

   • Generate unique student ID
   • Fill form with validation
   • Upload profile image (optional)
   • Assign to class/section
   • Save to Firebase
   • Update classroom slot count

2. Edit Student:

   • Load existing student data
   • Allow modification of fields
   • Validate changes
   • Update Firebase document
   • Handle class reassignment

3. Delete Student:

   • Show confirmation modal
   • Delete from Firebase
   • Decrement classroom slot count
   • Update real-time data

• Uses Firebase onSnapshot for live updates
• Automatically updates UI when data changes
• Handles connection issues gracefully
• Maintains data consistency across components

• Modern Interface: Clean, professional design
• Responsive Layout: Works on all screen sizes
• Intuitive Navigation: Easy-to-use interface
• Visual Feedback: Loading states and animations
• Accessibility: Proper ARIA labels and keyboard support

• Primary: Professional grays and blues
• Success: Green for positive actions
• Error: Red for errors and warnings
• Info: Blue for informational messages
• Warning: Yellow for caution messages

• Desktop: 1200px and above
• Tablet: 768px - 1199px
• Mobile: Below 768px

• Email domain whitelist
• Session management with expiration
• Secure password handling
• Protected routes

• Firebase security rules
• Input validation and sanitization
• Error handling without data exposure
• Secure file upload validation

• Node.js (v16 or higher)
• npm or yarn
• Firebase project setup

1. Clone the repository
2. Install dependencies: npm install
3. Set up environment variables
4. Start development server: npm run dev

VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id

• Feature-based Structure: Components organized by feature
• Reusable Components: Common components in shared folders
• Utility Functions: Helper functions in utils directory
• Consistent Naming: Clear, descriptive component and function names

• Functional Components: Use React hooks for state management
• Error Boundaries: Proper error handling throughout
• Loading States: User feedback during operations
• Form Validation: Real-time validation with clear error messages
• Responsive Design: Mobile-first approach
• Performance: Optimized rendering and data fetching

• User Roles: Admin, teacher, student roles
• Advanced Reporting: Analytics and reports
• Bulk Operations: Import/export functionality
• Notifications: Email and push notifications
• API Integration: External system integration
• Mobile App: Native mobile application

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add comprehensive comments
5. Test thoroughly
6. Submit a pull request

This project is licensed under the MIT License - see the LICENSE file for details.

Note: This system is designed for educational institutions and provides comprehensive student information management capabilities with modern web technologies and best practices.