CodeSpark Tracker

• 

  code tracker

Inspiration

Our inspiration for CodeSpark Tracker comes from the core mission of Project: Empower—to solve problems in underprivileged communities through code. As aspiring programmers from diverse backgrounds, we recognized that first-generation, low-income (FGLI) students often face barriers like lack of structured support, motivation dips due to financial stress, and limited access to resources. We wanted to create a tool that fosters a passion for coding by making habit-building fun and impactful, showing users how their skills can drive real change, such as building apps for community budgeting or mental health support. Drawing from personal experiences and hackathon themes, we aimed to empower users to realize coding's potential for social good in just a simple, accessible app.

What it does

CodeSpark Tracker is a web-based habit tracker designed specifically for FGLI aspiring programmers. Users log daily coding sessions with duration and notes, view their progress through a streak counter, earn badges for milestones (e.g., bronze for 3 days), and get random motivational tips highlighting coding's impact on underprivileged communities—like creating tools for free education or job boards. A dynamic line graph visualizes session durations over time, helping users track improvement. The app uses local storage to persist data, ensuring it's lightweight and privacy-focused, with a responsive, animated UI that works on any device.

How we built it

We built CodeSpark Tracker using basic web technologies to keep it simple and fast. The frontend is HTML for structure, enhanced with Bootstrap for responsive design and beautiful styling. CSS adds custom animations (fade-ins, slides, bounces) for interactivity. JavaScript handles the logic: form submissions save logs to localStorage, calculate streaks, generate random tips, and award badges. We integrated Chart.js for the session duration graph, making data visualization engaging. Everything runs client-side—no backend needed—deployed on a Plesk-hosted site for easy sharing. We iterated quickly, starting with core tracking and adding polish like animations and a split-layout UI for large screens.

Challenges we ran into

To build and submit, time management was our biggest challenge—we had to prioritize an MVP over advanced features like user accounts or cloud sync. Debugging the streak calculation was tricky, as it needed to handle consecutive days accurately without a server. Integrating Chart.js and animations while keeping the code beginner-friendly added pressure, especially ensuring cross-browser compatibility. We also pivoted from Glitch (which ended service) to Plesk, requiring quick adaptation. Balancing aesthetics with functionality was tough, but focusing on theme alignment (empowering underprivileged coders) kept us on track.

Accomplishments that we're proud of

We're proud of delivering a fully functional, polished app in under an hour that directly addresses the hackathon's goal of fostering coding passion in underprivileged communities. The motivational tips tie coding to real impact, making it more than a tracker—it's an empowerment tool. Adding interactive elements like animated badges and a responsive graph elevates the UI beyond basic, impressing even for a beginner project. Most importantly, it's accessible: no installs, works offline after load, and emphasizes inclusivity for FGLI users. Submitting a complete project that could genuinely help aspiring programmers build habits feels like a big win.

What we learned

This hackathon taught us efficient prototyping under tight deadlines—focusing on core features first, then layering polish. We deepened our skills in JavaScript (localStorage, event handling), CSS animations, and libraries like Bootstrap and Chart.js. Adapting to tool changes (e.g., Glitch shutdown) highlighted the importance of flexibility in hosting. On a broader level, we learned about FGLI challenges, reinforcing how tech can bridge gaps. Collaboration via quick iterations showed us the power of simple code for social good, and we gained confidence in turning ideas into deployable apps rapidly.

What's next for CodeSpark Tracker

Next, we'd expand CodeSpark Tracker into a full platform: add user authentication for multi-device sync, integrate AI for personalized tips (e.g., via free APIs), and include community features like shared challenges or forums for FGLI coders. Mobile optimization with Progressive Web App (PWA) support would make it more accessible. We plan to open-source it on GitHub for contributions, partner with organizations like freeCodeCamp for resource links, and measure impact through user feedback surveys. Ultimately, aim for scalability to help thousands build coding habits and realize their potential for community change.

Built With

• css
• html
• javascript