Smart QR-Based Attendance Management System
A modern, intuitive attendance management system that leverages QR code technology for seamless class attendance tracking. Teachers generate unique QR codes for each session, and students simply scan to mark their presence.
🔗 Live Demo: rollcall-dashboard.vercel.app
| Feature | Description |
|---|---|
| 📊 Real-time Dashboard | Overview of students, teachers, active classes, and attendance statistics |
| 👨🏫 Teacher Portal | Create class sessions and generate unique, time-bound QR codes |
| 👨🎓 Student Portal | View enrolled classes, upcoming sessions, and attendance history |
| 📱 QR Scanning | Fast, camera-based QR scanning with validation |
| ⏰ Auto-Expiration | QR codes automatically expire after class end time |
| 🔒 Enrollment Validation | Only enrolled students can mark attendance |
| 📈 Attendance Analytics | Detailed records filterable by class, date, and status |
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- QR Generation: qrcode.react
- QR Scanning: html5-qrcode
- Date Handling: date-fns
- Deployment: Vercel
- Node.js 18+
- npm or yarn
# Clone the repository
git clone https://github.com/ArnavTheExploit/RollCall.git
cd RollCall
# Install dependencies
npm install
# Start development server
npm run devOpen http://localhost:3000 to view the application.
npm run build
npm startRollCall/
├── app/
│ ├── page.tsx # Main dashboard
│ ├── teacher-dashboard/ # Teacher portal
│ ├── student/dashboard/ # Student portal
│ ├── scan/ # QR scanner
│ ├── students/ # Students list
│ ├── teachers/ # Teachers list
│ └── attendance/ # Attendance records
├── components/
│ ├── Logo.tsx # Brand logo
│ └── Navigation.tsx # Navigation bar
├── data/
│ └── mockData.ts # Mock data & utilities
└── public/ # Static assets
-
Create Class Sessions
- Navigate to Teacher Dashboard
- Set subject, date, time, and duration
- Select enrolled students
- QR code is automatically generated
-
Manage Attendance
- Display QR code for students to scan
- View real-time attendance records
- Filter and export attendance data
-
Mark Attendance
- Go to Scan QR page
- Grant camera permission
- Scan the class QR code
- Receive instant confirmation
-
Track Progress
- View attendance percentage by subject
- See upcoming and ongoing classes
- Review attendance history
┌─────────────┐ ┌──────────────┐ ┌─────────────┐
│ Teacher │────▶│ QR Code │────▶│ Student │
│ creates │ │ generated │ │ scans │
│ session │ │ for class │ │ QR code │
└─────────────┘ └──────────────┘ └─────────────┘
│ │
▼ ▼
┌──────────────┐ ┌─────────────┐
│ Time-based │ │ Validates │
│ expiration │ │ enrollment │
└──────────────┘ │ + records │
│ attendance │
└─────────────┘
- ✅ Student must be enrolled in the class
- ✅ QR code must be within valid time window
- ✅ No duplicate attendance for same session
- ✅ Automatic present/late status based on time
| Browser | Support |
|---|---|
| Chrome | ✅ Full support |
| Firefox | ✅ Full support |
| Safari | ✅ Full support |
| Edge | ✅ Full support |
Note: Camera access requires HTTPS in production (localhost works for development)
- Backend API integration for persistent storage
- User authentication system
- Email notifications for attendance
- Mobile app (React Native)
- Export to Excel/PDF
This project is created for educational and demonstration purposes.
Made with ❤️ by Arnav