Hack the Tunnels 24

Hacking the Tunnels: My Experience at Hack the Tunnels Hackathon

As a Computer Systems Engineering student and an aspiring web developer at Carleton University, I love participating in hackathons that push the boundaries of innovation while solving real-world problems. One of the most impactful hackathons I attended recently was Hack the Tunnels. This event provided me and my team with an incredible opportunity to make meaningful improvements to the Carleton University website.

In this blog post, I’ll take you through our journey, the challenges we tackled, and the solutions we developed.

The Challenge: Enhancing Carleton University's Website

While Carleton’s official website serves as a critical resource for students, faculty, and visitors, our team identified several areas for improvement. We wanted to address three specific challenges:

Improving Navigation: Helping users quickly find what they need without feeling overwhelmed by the website's structure.
Creating a Smarter Timetable System: Simplifying the process of managing course schedules and integrating features that save time.
Accessibility Enhancements: Making the website more user-friendly for everyone, including those with disabilities.

Our Vision: What We Aimed to Build

We planned to introduce features that would simplify the student experience, making the website more intuitive and inclusive. Here’s what we set out to achieve:

A Predictive Navigation System: Simplified menus and a smarter search bar to reduce the time spent navigating the site.
An Interactive Timetable Management System: Empowering students to create, customize, and manage their schedules with ease, featuring a "Copy CRN" button for improved accessibility.
Accessibility Improvements: Adding high-contrast modes, keyboard navigation, and other WCAG-compliant features.

Our Work: Frontend and Backend in Harmony

The project required us to tackle both the frontend and backend of the website to ensure a seamless user experience. Here’s a breakdown of the work we did:

Frontend Development

I led the frontend efforts, focusing on crafting a sleek, responsive interface that worked seamlessly across devices. Some highlights include:

Personalized Dashboard: A dynamic dashboard that displayed tailored information like class schedules, upcoming deadlines, and campus events.
Interactive Timetable UI: Designed a drag-and-drop interface that allowed users to adjust their schedules visually.
Accessibility Features: Ensured compatibility with screen readers, added ARIA labels, and introduced a high-contrast mode for improved visibility.

Backend Development

Our backend work powered the new features and made the site more functional and efficient:

Timetable Management System
Automated Course Scheduling: We built a timetable system that allowed students to enter their desired courses and instantly generate an optimized schedule. Copy CRN Button: Recognizing that many students frequently copy CRNs (Course Registration Numbers) for enrolment, we added a convenient one-click “Copy CRN” feature, reducing repetitive tasks and improving accessibility.

API Integration
We created secure APIs using Node.js and Express for user authentication, data retrieval, and dynamic content updates. The timetable data was fetched in real-time from our database, ensuring users always saw the most up-to-date schedules.
Database Management
Using MongoDB, we structured our database to store and retrieve course data efficiently. The system supported multi-user functionality, ensuring that each student’s preferences and schedules were saved and easily accessible.

The Results: A Smarter, More Inclusive Website

After 24 hours of non-stop brainstorming, coding, and debugging, we proudly presented our solution to the judges. Here’s what we delivered:

Smart Navigation: A predictive search bar and redesigned menus made it easy to find resources quickly.
Interactive Timetable System:The visually appealing timetable allowed students to customize their schedules with drag-and-drop functionality.The “Copy CRN” button became an instant favorite among users, as it simplified course registration.
Improved Accessibility: By adhering to WCAG guidelines, we ensured that the website catered to all users, including those with disabilities.

What I Learned

Participating in Hack the Tunnels was an eye-opening experience that pushed me to grow as a developer and problem solver. Here’s what I gained from the experience:

Collaborative Development: Balancing frontend and backend development taught me the importance of seamless integration and teamwork.
Accessibility Best Practices: Implementing accessibility features deepened my understanding of creating inclusive web applications.
Time Management: Tackling a large project within a tight deadline honed my ability to prioritize tasks and deliver results under pressure.

Why This Hackathon Mattered

This project wasn’t just an exercise in coding—it was a way to give back to my university community. By enhancing the functionality and accessibility of the Carleton website, we created a solution that could improve the daily lives of thousands of students.

Conclusion

Hackathons like Hack the Tunnels reaffirm why I love web development: the opportunity to solve real-world problems, learn from talented peers, and make an impact. The skills and experiences I gained during this event will continue to shape my journey as a developer.

If you’re a developer or a student considering participating in a hackathon, I can’t recommend it enough. Dive in, challenge yourself, and you might just build something that makes a difference!

HacktheTunnels'24