Oops, I Over-Engineered It: College Fresher Event App Tales

Overview

• Problem Statement
• Solution
• Tech Stack
• How the App Works
• After Event Stats
• Conclusion

GitHub Repository
Explore the full code for the project on GitHub.

Problem Statement

so why was that needed ? In previous college fresher events, seniors reported several issues, including:

• Difficulty in managing food distribution.
• Duplicate servings, where individuals received food twice.
• Lack of proper tracking systems to monitor event attendance.
• Inadequate event reporting to faculty.

These challenges highlighted the need for a better, streamlined solution, prompting the development of this web app to address these pain points.

Solution

To address the challenges faced during college fresher event(Bihaan) , I developed a web application that offers the following features:

• QR Code Generation and Email Delivery: Each fresher, as well as volunteers and organizers, receive a unique QR code via email. This QR code can be scanned to track attendance and food distribution, ensuring a streamlined and efficient process. Emailing the QR codes ensures that participants have easy access to their codes without the need for additional printouts or app installations.

• Logs: This web app logs all entries attendees. It tracks food distribution details, including who gave food to whom and at what time, as well as when a volunteer received their food and from which food management team member. This ensures any issues can be easily traced. Additionally, it tracks the distribution of merchandise, such as t-shirts, keeping records of how many are left and when they were given to whom.

• Dashboard: The web app provides a dashboard that displays logs of all entries, including food distribution and merchandise distribution. This allows organizers to easily monitor the event's progress and identify any issues that may arise

Of course, all the chores could probably be managed using Google Sheets or even pen paper, but a dedicated web app is so much nicer. With proper access control and logs, the process becomes secure and reliable. Beyond that, an web app like this promotes the tech culture in the college, fostering the habit of using technology to solve real-world problems

Tech Stack

The web app was built using the following technologies:

• Next.js: For the frontend as well as the backend. Next.js provides a seamless development experience with its hybrid approach to server-side rendering and static site generation. Additionally, I used shadcn for building a modern and flexible UI, which allowed for quick development of accessible and reusable components.

• Supabase: For the database and authentication. Supabase offers a secure and scalable backend as a service (BaaS) solution, which was ideal for this project's requirements of user management and data storage.

• QR Code Generation: I used the qrcode package to generate QR codes for each fresher and volunteer. And for scanner i used html5-qrcode package.

• React Virtualized: To display the logs and entries in a table format, I used the react-virtualized package. This allowed for efficient rendering of large datasets, ensuring smooth performance even with a high volume of entries.

• Tally.so : For Data collecttion , I used Tally.so to create a simple form to get details like food preference, t-shirts size, etc. This data was then transferred to the Supabase database for further , and btw this is open source.

• Nodemailer: For sending emails, including the QR codes, I used Nodemailer. It provides an easy way to send emails from the server, ensuring participants receive their QR codes without issues. Designed the email template using Stripo.

How the App Works

Authentication Setup

To ensure that only authorized users can access the web app and perform actions like scanning QR codes, viewing logs, and sending emails, I integrated Google OAuth using Supabase's authentication service. This allowed me to securely handle user sign-ins and session management, providing a seamless login experience.

For access control, I manually configured user roles by adding boolean values (isAdmin and isGod) to the public.users table. While this isn't the most scalable approach, it was sufficient since only 3-4 volunteers/organizers need access to the app. The roles work as follows:

• isAdmin: Grants access to specific routes, such as the QR scanner and logs, for organizers.
• isGod: Reserved for my account, giving me full access to all routes, including sending emails and other administrative features.

Initially, I attempted to restrict access based on a list of allowed emails, but due to Supabase limitations on creating triggers in the auth.users table, I couldn't implement this feature. Instead, if a user isn't on the approved list, they are redirected to a page with a message indicating they don't have permission to access the app.

QR Code Generation and Email Delivery

The QR Code generation and email sending functionality is one of cruicial part of the app.

1. User Management & Data Retrieval:

   • The app utilizes a tabbed interface to separate students and volunteers, enabling efficient management of participant information, including emails and statuses. Upon loading, data is fetched using getAllPeople() for students and getVolunteersInfo() for volunteers to ensure administrators have up-to-date information.

2. Search Capability & Progress Monitoring:

   • A search bar allows admins to filter participants by roll numbers or names, optimized with the useMemo() hook for efficiency. Additionally, a progress bar tracks the percentage of successfully sent emails, providing a clear overview of the distribution status.

3. Email Dispatch Mechanism & Status Indicators:

   • Admins can send QR codes individually or in bulk, with each participant having an email status badge indicating whether it is Pending, Sending, Sent, or Failed. The app uses the Nodemailer package for real-time email tracking.

4. Bulk Sending Functionality & QR Code Access:

   • A "Send All Emails" button allows quick dispatch of QR codes to all participants who haven't received theirs. After dispatch, admins can view sent QR codes by clicking the QR Code button, which opens a modal for easy verification of accuracy.

Scanner and Logs

The scanner and logs functionality is another key feature of the app, enabling organizers to track attendance and food distribution efficiently.

1. QR Code Scanning & Verification:

   • The scanner uses the html5-qrcode package to capture QR codes, on sucessfull scanned it shows the data emebeded in the QR code. like student name, roll number, food preference etc for instant feedback to the organizer and volunteer , then it fetches the food & merchandise status from the database and shows it to the organizer.if the student is already marked as food collected it cant be chanaged from the frontend , only the admin can change it from the backend.

2. Logs

   • The logs page displays all the sction taken by the organizer and volunteers, like who gave food to whom and at what time, as well as when a volunteer received their food and from which food management team member. This ensures any issues can be easily traced. Additionally, it tracks the distribution of merchandise, such as t-shirts, keeping records of how many are left and when they were given to whom.Also have filters to see specific action type or specific time period.

Dashboard

The dashboard have three tabs one for student , one for volunteers and another for faculty table . The student table shows the food preference and t-shirt size of the student , the volunteer table shows the status of the volunteer like food collected or not , and the faculty table shows the status of the faculty like food collected or not.Admin can modify the status of the student and volunteer from the dashboard. in case student dont have the QR code or the QR code is not working , admin can mark the student as food collected from the dashboard.

After Event Stats

Following the fresher event, the app provided detailed statistics and reports, which helped streamline post-event documentation and review:

• Food Distribution & Merchandise Collection Management: The app successfully tracked and managed food distribution and merchandise collection for over 600 participants. This data provided an overview of the distribution process, ensuring everyone received their items efficiently.

• Data-Driven Insights: With detailed logs of each transaction, the app generated reports for the event organizers and faculty. Key statistics, such as counts of vegetarian and non-vegetarian meals served and the distribution of different t-shirt sizes, offered valuable insights for planning future events.

• Enhanced Accountability: By tracking each attendee’s food and merchandise status, the app eliminated duplicate servings and ensured accurate accounting, providing reliable records for accountability and feedback.

Conclusion

What started as a simple project to manage a college fresher event ended up being a fun, slightly over-engineered solution. However, it provided a great opportunity to explore modern web development tools like Next.js and Supabase, while addressing real-world issues like event management. With features like QR code scanning, detailed logs, and user roles, the app added much-needed structure and reliability to the process. While a simpler approach might have sufficed, this project showcases the potential for technology to streamline even the most straightforward tasks.