Web-based QR Code Attendance System for Aberdeen College of Data Science and Artificial Intelligence
Frontend Development
The system's frontend is developed using Vue.js version 3, leveraging its capabilities to ensure a reactive and component-driven architecture. This framework supports efficient rendering and state management, making it ideal for the real-time functionalities required in an attendance system.
Vue 3: Utilized for its reactive core and composition API, enhancing the system's reactivity and maintainability.
TypeScript: Ensures type safety and improves code quality and maintainability.
Vite: Used as the build tool for faster development and optimized production builds.
Vue Router: Manages navigation within the single-page application.
Element Plus: Provides a rich set of UI components for a consistent and responsive design.
Axios: Handles HTTP requests to the backend API.
ECharts: Implements data visualization for attendance statistics.
Key Features
QR Code Generation: Creates dynamic QR codes for each attendance session.
QR Code Scanning: Utilizes device cameras to scan attendance QR codes.
Real-time Attendance Tracking: Instantly records and updates attendance data.
Administrative Dashboard: Provides comprehensive views of attendance statistics and management tools.
Personal Attendance Records: Allows students to view their individual attendance history.
Security Measures
The system incorporates several security protocols to ensure data integrity and protect user information.
JWT (JSON Web Tokens): Secures user sessions and maintains user state across HTTP requests.
AES Encryption: Implements AES-CFB mode encryption for QR code data to prevent tampering.
Planned Backend Integration
The frontend is designed to integrate with a Node.js backend (yet to be implemented), which will handle:
RESTful API: To manage communication between the frontend and backend.
Database Management: To store and retrieve attendance data, user information, and course details.
Future Enhancements
SSO Integration: Plans to integrate with the university's Single Sign-On system for seamless authentication.
Geolocation Verification: To add an extra layer of attendance validation based on the user's location.
Absence Management: To allow for the recording and management of excused absences.
This project showcases my ability to develop complex, user-friendly web applications using modern frontend technologies. It demonstrates my skills in creating responsive interfaces, implementing real-time features, and addressing security concerns in web development.
