Roll Call Brawl

Roll Call Brawl turns class attendance into a competitive game—check in, show up, and win the pot! We make skipping class costly. 😼

Comment

Target Tracks:

Google

  • Google Maps API for location services
  • Firebase Firestore database for data storage
  • Firebase Cloud Functions for a serverless API

GDGC (Data-driven)

  • Scraped Oregon State University buildings data

ACM (Education)

  • Encourages classmates to attend class

Detailed Description:

Inspiration

Last semester, some members of our group took Operating Systems with a core study group of six people. Since attendance was not mandatory, people would frequently skip class. It got to a point that one of the group members offered a Hydroflask reward to any of the group members that went to the last four lectures. Only 3/6 people ended up succeeding. Our Hackathon group liked the idea of keeping our friends accountable for going to class, and if there’s money or bragging rights on the line, even better. That’s how Roll Call Brawl was born.

We realized that making attendance competitive could foster accountability and add some fun to the monotonous routine of school. This was the perfect blend of productivity and light-hearted competition, and it inspired us to build a platform that could make attending class a game.

What it does

Roll Call Brawl lets students create private class groups where they can:

Check in to class based on time and location Pool money together as an incentive Automatically track attendance Penalize missed classes Compete with their friends for the last dollar in the pot Validate check-ins using geo-location to ensure accurate attendance Receive notifications for missed classes and pending rewards

It’s all about gamifying attendance with accountability, fun, and good-natured competition while leveraging technology to automate and secure the process.

How we built it

We built Roll Call Brawl using a combination of frontend and backend technologies, along with web scraping techniques, to create a seamless and engaging platform.

Frontend: For the user interface, we used React with TypeScript for building dynamic components, ensuring a smooth, interactive experience. We implemented custom styling using CSS to create a visually appealing design that was both functional and user-friendly. The frontend allows users to easily create class groups, check in, and track their progress.

Backend: On the backend, we utilized Firebase to store and manage user data, class information, and financial transactions. Firebase Firestore was used to handle real-time data syncing and ensure that updates were reflected instantly across all users.

Web Scraping: One of the core features of Roll Call Brawl is its automated web scraping capabilities. We used Puppeteer and Cheerio to scrape building data of OSU and relevant data from online sources. Puppeteer helped us handle JavaScript-rendered content and extract real-time information, while Cheerio was used to parse and manipulate the HTML for structured data extraction.

Geo-location: To validate the check-ins, we integrated HTML Geolocation API and Google Maps API for geo-location functionality. This allowed us to validate whether the user’s check-in location matched the designated class area, ensuring that check-ins were accurate and secure. The integration of geo-locking functionality helped prevent any fraudulent check-ins from users outside the defined location.

Money Management: We also implemented a money management system that allowed users to pool money, track balances, and penalize missed classes. The backend logic ensured smooth financial transactions, and the frontend reflected real-time updates to keep users engaged and motivated. (This is an in-progress feature, we were able to do it halfway)

Through this combination of technologies and innovative features, we were able to build a fully functional platform that gamifies class attendance, making it more accountable, engaging, and rewarding.

Challenges we ran into

During our web scraping process, we encountered several challenges. First, we had to handle inconsistent data structures, as data from different sources often came in various formats, requiring additional cleaning and organization. Additionally, some content was JavaScript-rendered, which made it inaccessible through basic HTML parsing, so we had to use headless browsers like Puppeteer and Selenium to load and scrape dynamic pages. We also faced the challenge of scraping data from multiple sources, which required managing different scraping logic simultaneously. Extracting specific fields from complex HTML structures was another hurdle, as we often had to rely on precise CSS selectors or XPath to target and extract the relevant data.

Moreover, anti-scraping measures such as CAPTCHA and IP blocking were implemented by some websites, forcing us to use rotating proxies and delays to avoid detection. Finally, ensuring data integrity and accuracy was critical, as we needed to validate the scraped data to maintain consistency and avoid errors in our dataset.

Accomplishments that we're proud of

Throughout the hackathon, we started as a beginner team, with limited experience. Initially, coming up with a solid product idea was challenging, as we wanted to ensure our solution would be both feasible within the 24-hour timeframe and impactful. However, after some brainstorming and problem-solving, we were able to refine our idea and execute it efficiently.

In just 24 hours, we successfully developed a platform that could make attending class a game. In web scraping despite the challenges of inconsistent data structures, JavaScript-rendered content, and dealing with anti-scraping measures, we were able to clean, structure, and extract the necessary information, saving us hours of manual work. Additionally, we implemented a robust money management system that tracked balances and transactions, ensuring a smooth user experience in managing their finances.

One of the most exciting features we implemented was the geo-location validation for check-ins. By combining the scraped data with geo-location APIs, we were able to validate whether the user’s location matched the intended check-in area. This geo-lock functionality ensures that check-ins are accurate and secure, preventing unauthorized check-ins from outside the designated area.

In the end, despite being a beginner team, we were able to execute a fully functional product that integrates web scraping, geo-location validation, and money management—transforming an initial challenge into an accomplishment we are extremely proud of.

What we learned

Web Scraping: We learned how to scrape data from multiple sources, handling inconsistent data structures and overcoming JavaScript-rendered content. We also managed anti-scraping measures like CAPTCHA and IP blocking using tools like Puppeteer and rotating proxies.

Geo-location: We integrated geo-location validation, ensuring users' check-ins were within an acceptable range. By validating coordinates against real-world data, we enhanced the security of user interactions. This process helped us understand how to manage geospatial data with real-time inputs.

Schema and Backend Logic: We designed a data schema to store and manage user information, classes, and transactions. On the backend, we implemented logic to manage finances and automated processes. This experience sharpened our skills in handling dynamic data efficiently and securely.

Team Collaboration: We worked effectively as a beginner team, breaking down tasks and supporting each other under tight deadlines. The hackathon taught us how to communicate clearly and stay focused on our shared goal.

Built With:

Frontend: React, TypeScript, CSS (for styling) Backend: Firebase (for data storage) Web Scraping: Puppeteer, Cheerio Geolocation: HTML Geolocation API, JavaScript, Google Maps API, Database: Firebase Firestore (for storing user data and class information) Version Control: Git, GitHub

Share this project:

Updates