Case Study
Hockey Game Tracker
A lightweight web app I’m currently building to help users browse hockey matchups, filter by league, and quickly identify the most interesting game of the night.
Today’s Matchups
Hockey Game Tracker
Browse matchups, filter by league, and find the best game to watch.
Best Game Tonight
VAN vs EDM
Selected based on matchup quality, rivalry context, and game time.
NHL · 7:00 PM
NHL · 4:00 PM
PWHL · 6:30 PM
This is a simplified recreation of the app interface using sample data.
Role
Front-End Developer
Stack
React, Next.js
Focus
API, UI/UX, Filtering
The Idea
Most sports apps present schedules as long lists of games, leaving users to sort through the information themselves. I wanted to explore a different approach by creating an experience that helps users quickly decide what to watch instead of simply displaying every game equally.
My Role
This is an ongoing personal project where I am responsible for product planning, front-end development, API integration, and user experience design.
The project allows me to explore how data can be transformed into a more intentional and decision-focused experience for sports fans.
What I've Built
Multi-League Support
Integrated live schedule data from NHL and PWHL APIs, allowing users to browse games across multiple leagues.
Game Discovery
Implemented league filtering and matchup views to help users quickly navigate available games.
Featured Matchup Experience
Developed a "Best Game Tonight" feature that highlights a recommended matchup instead of presenting all games with equal emphasis.
Dynamic Data Rendering
Built reusable components that dynamically render game information from live API data.
Design Approach
My focus has been on reducing visual clutter and prioritizing the information users care about most.
Rather than displaying raw schedule data, I wanted the interface to help answer a simple question:
"What game should I watch tonight?"
This led to a design that emphasizes one featured matchup while keeping the remaining games easy to browse and compare.
What I've Learned
This project has helped me think beyond displaying API data and focus more on product thinking and user decision-making.
As new features are added, I've gained experience balancing technical implementation with usability, information hierarchy, and interface design.
Next Improvements
- • Refine the matchup recommendation logic to create more meaningful "Best Game" selections
- • Add favourite teams and personalized viewing preferences
- • Improve loading, error, and empty states for a more resilient user experience
- • Gather feedback from hockey fans to better understand how they discover and choose games
- • Continue iterating on new features and interface improvements based on user needs and real-world usage