Overview
The Check-in PWA was developed as a companion tool for a wider membership management system. It gives instructors a fast, mobile-friendly way to scan student QR codes, record attendance and keep class records up to date without relying on a traditional desktop admin area.
The main requirement was reliability. Classes may take place in sports halls, schools or community venues where mobile signal and Wi-Fi can be inconsistent, so the check-in tool needed to continue working even when the connection dropped.
Project requirements
The tool needed to support:
- QR code scanning for student check-in
- Offline access through Progressive Web App functionality
- Service worker caching
- Local storage of student, location and session data
- API communication using Axios
- Local attendance record creation
- Upload and synchronisation of pending records
- Mobile-first use on phones and tablets
QR code scanning
Each student can be identified using a QR code. The PWA uses the device camera to scan the code and match it against stored student data.
This allows instructors to check students in quickly without manually searching through long student lists. It also reduces input errors because each attendance record is linked directly to the correct student reference.
Offline capability
One of the most important parts of the project was offline support. The PWA uses a service worker to cache the files needed to run the check-in interface.
This allows the app to remain available even when the device has poor or no internet access. Rather than failing when the network is unavailable, the tool can continue recording check-ins locally.
Local data storage
The app uses localStorage to cache important working data, including student records, class sessions, locations and pending attendance actions.
This local cache allows the check-in process to continue without constantly depending on live server requests.
Typical cached data includes:
- Student information
- Location details
- Active class or session data
- Check-in events
- Pending upload records
- Last sync status
API integration
The PWA communicates with the main membership system through API calls. Axios is used to handle requests between the front-end app and the backend system.
These API calls allow the app to download the latest student, location and session data, then upload newly recorded attendance data once it is ready to sync.
This keeps the check-in tool lightweight while allowing the main membership platform to remain the central source of truth.
Upload and sync logic
The synchronisation process is designed to handle interrupted or unreliable connectivity. Attendance data can be stored locally first, then uploaded later when the device has a stable connection.
This reduces the risk of losing attendance records during a live class. If a check-in cannot be uploaded immediately, it remains queued until the app is able to communicate with the server again.
The sync process follows a practical workflow:
- Download the latest student and session data.
- Store key data locally for use during class.
- Scan QR codes and create attendance records.
- Queue records locally if offline.
- Upload pending records when online.
- Confirm successful synchronisation with the main system.
Technical approach
The application was built to be lightweight, practical and resilient. Rather than forcing every action to depend on a live connection, the system uses a local-first approach for the class check-in process.
Key technical elements include:
- JavaScript-based front-end logic
- Progressive Web App structure
- Service worker for offline asset caching
- localStorage for local data persistence
- Axios for API communication
- QR code scanning through the device camera
- Sync queue for pending attendance uploads
- Integration with the central membership database
Business value
The Check-in PWA improves the day-to-day running of classes by making attendance recording faster, more accurate and less dependent on admin staff manually updating records later.
For the organisation, it provides a more reliable attendance history, supports student monitoring and helps maintain accurate grading eligibility data.
For instructors, it provides a simple mobile tool that works in the environment where it is actually needed: at the class venue.
Outcome
The finished tool gives instructors a practical way to record attendance from a mobile device, even in venues with unreliable internet access.
By combining QR scanning, local caching, offline capability and API synchronisation, the PWA provides a robust bridge between live class activity and the central membership management system.