hacktrack

🎯 Framing the Problem

Have you ever walked into a hackathon, full of energy but unsure where to begin?

You're not alone.

Over 30% of hackathon participants are first-timers, with limitless potential but overwhelmed by the rapid pace and ambiguity. Juggling ideation and prototyping, testing and pitching - it's easy to fall into time traps.

Time mismanagement is a silent killer of hackathon success. 82% of people report not using any time management strategy, even though effective planners are 53% more likely to succeed academically or professionally. Yet, many lack a clear roadmap or time management system to guide them through the experience. With events having cash prizes up to $100,000, this isn’t just a missed opportunity, it’s an avoidable loss. In fact, this problem isn't just about opportunity and productivity, it’s also about access, confidence, and equity for all aspiring hackers.

💡 Idea Explanation

Enter hacktrack – your smart hackathon guide.

hacktrack is a lightweight time coach built specifically for hackathon teams. It operationalises design thinking into seven focused stages and enforces timeboxing via custom timers.

Built for both beginners and veterans, hacktrack transforms the chaotic sprint into a structured journey.

Users input their total available time, and hacktrack intelligently suggests time allocations for each stage. Advanced users can customise as they see fit. The countdown begins, with built-in reminders at 50%, 30 minutes, and 5 minutes remaining of each stage, helping teams pace themselves without burning out.and helping teams stay agile, focused, and goal-aligned.

Teams go from chaos to clarity, ensuring they hit every critical milestone, and stand out with polished, complete submissions - hacktrack keeps you on track and boosts not just your odds of finishing, but winning.

🖌️ Implementation

We decided to build hacktrack as a purely frontend application using React. We opted not to include a backend or database to keep the tool lightweight and easy to use during fast-paced hackathons as the current version does not require persistent user data.

The frontend holds the core logic. Users input their total available time, and hacktrack calculates and displays recommended time allocations across seven structured stages. These default values, stage descriptions, and actionable tips are stored in a local JSON file for modularity and easy iteration.

Time input is counted in hours (e.g., 5 hours), and each phase is allocated a percentage (e.g., 0.1 for 10%). We formatted the countdown timer and range inputs to convert an integer into intuitive hours, minutes, and seconds for both the UI and timers.

To visualise time spent and remaining, we used CountdownCircleTimer, a React library that provided a clear, circular timer interface. To trigger start and end sounds for each phase, we made use of the useSound package This offers both visual and auditory feedback.

As we plan to introduce the Performance Journal (outlined in our next steps), we look to implement a backend with a database to support user accounts, session data, and analytics. This will enable future features such as time-spent tracking, team retrospectives, and growth insights across hackathons.

💪 Challenges

Time Calculations

Handling time allocation through percentage-based logic introduced a mathematical challenge. Fractional percentages led to time rounding issues. Total distributed minutes wouldn't always sum perfectly to the user’s committed time. We had to find a careful balance between precision and simplicity to maintain user trust and smooth UX.

Design & Aesthetics

Design was another hurdle. As two non-designers, we initially struggled with visual consistency. We tackled this by choosing a pre-built Canva theme, sticking to a clear hex color palette, and sourcing open-source icons from Flaticon. Our first prototype even used emojis! We evolved from there and even got creative help from ChatGPT to generate our logo.

Team Collaboration

Working virtually while managing work commitments meant limited overlap. We scheduled stand-ups in advance, used time windows for availability while working independently. This respectful flexibility allowed us to stay aligned without burning out.

🎉 Accomplishments

Shift in Mindset

Heiman came into this hackathon with self-doubt, unsure what value a non-coder could bring. But by owning the Empathise, Define, Ideate, and Submission stages, she realised that hackathons aren’t just about code. They're about clarity, creativity, and communication. A clear shift in mindset.

Figma

Priya leaned into discomfort on the design front. She took on the steep learning curve of Figma, and by the end of the week, was translating mockups into working components while also troubleshooting complex frontend timer logic.

Time Calculations

On the engineering side, managing multiple countdown timers was deceptively tricky. Bugs like timers not resetting or sound effects being out of sync required manual testing across many use cases. We eventually built a stable logic system through careful state management and component isolation.

🏃🏻‍♀️‍➡️ Next Steps

To elevate the impact of hacktrack, we propose two future iterations: Buffer Time Bank and the Performance Journal.

Buffer Time Bank

The Buffer Time Bank introduces a global pool of flexible minutes that teams can dynamically reassign to any stage during their hackathon journey. This feature balances structure with adaptability, giving users just enough flexibility to pivot when needed, without falling into chaos or over-scoping.

Performance Journal

The Performance Journal is a post-hackathon analytics and reflection dashboard that supports long-term learning and iteration. It will display a comparison of planned vs. actual time spent per stage, allow tagging by team size, tech stack, and theme, and prompt team members to rate their own performance. By building in space for reflection and self-assessment, hacktrack truely becomes more than just a time manage, it becomes a coach that helps teams grow across hackathons.