QR Code Attendance System

Client

Aberdeen Institute, SCNU

Duration

13 months

Category

Website design, front-end development, team code collaboration

Client

Aberdeen Institute, SCNU

Duration

13 months

Category

Website design, front-end development, team code collaboration

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.

Client

Aberdeen Institute, SCNU

Duration

13 months

Category

Website design, front-end development, team code collaboration