MobCheck: Building a QR-Based Entry System for 400+ College Freshers Party Attendees

Introduction

As second-year students at our university, we were entrusted with the responsibility of organizing the welcome event for incoming first-year students. This annual tradition serves as an important introduction to university life for new students. Our goal was to enhance the experience beyond what we had encountered during our own inaugural year.

The Challenge

Reflecting on our own freshman welcome event, which was admirably organized by our seniors, we identified opportunities to build upon their successful foundation. While the previous year's event ran smoothly, we saw potential to further enhance the experience, particularly in the realm of event management. The existing system, which utilized spreadsheets for attendance tracking, had served its purpose well. However, as technology evolves, we recognized an opportunity to streamline this process even further. We aimed to reduce queue times and minimize the potential for manual data entry discrepancies, thereby enhancing both the attendee experience and the organizers' operational efficiency.

Furthermore, we faced an additional logistical challenge. In adherence to university policies designed to maintain a conducive study environment for students, certain activities—such as those involving loud music—were not permitted on campus grounds. Consequently, we were required to secure an off-campus venue for specific portions of the celebration, which introduced an extra layer of complexity to our event management strategy.

The Opportunity

As a student in the Computer Science program, I recognized this as an opportunity to integrate advanced technological solutions into our event planning process. The theme for this year's welcome event drew inspiration from the sophisticated ambiance of the 1920s, providing an ideal backdrop for the introduction of a modern, streamlined solution to our logistical challenges.

Solution Overview: MobCheck

To address these challenges, we developed MobCheck, an innovative entry management system designed to optimize the check-in process and enhance the overall event experience. The system functioned as follows:

1. Data Collection: We utilized a Google Form to efficiently gather attendee information.

2. Personalized Invitations: Leveraging the collected data, we generated and distributed customized invitations to each attendee, complete with a unique QR code (the specifics of which will be elaborated upon later).

3. Dual-Location Check-In System:

   • On-Campus Venue: We implemented a self-check-in kiosk featuring a themed interface that aligned with our event's aesthetic while providing an engaging user experience.
   • Off-Campus Location: For activities held off university grounds, we equipped event volunteers with a mobile-optimized web application. This streamlined interface prioritized functionality, displaying only essential information for efficient verification.

4. Verification Process: Attendees were able to present their QR code at either location. The system would then verify their details against our backend database and, if it was their initial entry, issue a food token.

5. Technical Infrastructure: Our solution was built on a PostgreSQL database, utilizing a HTML website enhanced with Bootstrap components. The user interface was meticulously designed by our team member, Lakshya, to ensure visual appeal.

The implementation of MobCheck significantly reduced the reliance on manual record-keeping methods, eliminating the need for spreadsheets or physical paperwork. This not only improved operational efficiency but also added a layer of sophistication to our event, complementing our theme and showcasing the innovative capabilities of our computer science program.

Technical Details

Backend and Database

I opted for a simple tech stack, given the not-so-complex requirements and the time constraint. The backend was built with FastAPI, which was chosen for its high performance and ease of creating APIs. For the database, we used PostgreSQL:

• Local development: Connected using psycopg2
• Cloud deployment: Switched to sqlalchemy and Google Cloud SQL connector for better performance and compatibility with Google Cloud requirements

The Python backend was hosted on Google Cloud Run using a Docker image created locally.

Security and QR Codes

For QR code handling and security:

• Scanning: Used the jsQR library on the client side
• Entry token creation and verification: Implemented JWTs (JSON Web Tokens)

JWTs are an open industry standard method (RFC 7519) for securely representing claims between two parties. The main benefit in our case was their tamper-proof nature. When a JWT is created, it's signed with a server key, and a hash of the JWT's contents is appended to verify data integrity.

Image Processing and Invitations

To create personalized invitations:

1. Generated JWT for each attendee
2. Encoded JWT into a QR code using the qrcode Python library
3. Overlaid QR code on a template invitation image using the Python Imaging Library (PIL)

Email Generation and Sending

For a personalized touch in our communications:

1. Used Gemini 1.5 flash model through the Vertex AI API to dynamically generate email bodies
2. Customized content based on attendee's name, course, and semester
3. Sent invitations via Gmail's SMTP service

This combination of technologies allowed us to create a secure, efficient, personalized entry management system within our time and resource constraints.

Implementation

Development Process

I started by creating the API server, which would connect to the database and handle calls from the frontend to process data as required. The checking system was implemented for two locations:

1. Main event venue: A self-check-in kiosk inside the university with easy access to power outlets.
2. DJ venue: A more mobile-friendly interface for on-ground team verification at an external location.

User Interface

To align with the event theme, Lakshya created an engaging screen for the self-check-in kiosk:

The webcam viewport was cleverly placed in the right spectacle lens. Upon scanning the QR code:

1. The jsQR library decodes the QR code.
2. An API call is made to the backend server.
3. The server verifies the QR code claims and checks for tampering.
4. If valid, the server sends the attendee's details to the frontend and marks them as present in the database.
5. The frontend displays a welcome screen with attendee details and a first-time entry indicator for food token distribution.

For the DJ venue, we used a more functional UI designed for volunteer use.

Testing and Deployment

After thorough testing on my local device and network, I moved to containerization:

1. Created a Dockerfile for the backend (my first time containerizing an app).
2. Pushed the containerized app to Google Cloud.
3. Replicated the local database structure on the cloud.

Invitation Process

To send out personalized invites:

1. Set up a Cloud SQL proxy on my local machine.
2. Ran a Python script to:
   • Add attendees to the Cloud Database
   • Generate QR codes and invites
   • Send emails to recipients

Challenges Encountered

We faced an issue with Google's SMTP rate limiting after sending the first few invites, likely due to high email activity during development. We switched to another account to continue sending invites without interruption.

Lessons Learned and Future Improvements

• Gained experience in cloud deployment and containerization
• Learned to handle real-world constraints and problem-solving

Future improvements could include:

• Implementing a more robust email sending system to avoid rate limiting
• Adding real-time attendance analytics for event organizers

Let's talk!

I hope my experience in building this project has provided some insights or inspiration for using technology to solve real-world problems. I'd love to hear your thoughts and ideas on this, as well as your experiences working on similar projects!