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
Full-Stack Developer
Stack
React, Next.js, TypeScript, Supabase, Tailwind CSS
Focus
API Integration, Authentication, UI/UX, Responsive Design
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. Puckbook brings NHL and PWHL games into one experience, combining game discovery with features like a recommended matchup and calendar-based browsing.
My Role
This is an ongoing personal project where I am responsible for product planning, full-stack development, API integration, authentication, UI/UX, and deployment. I built the application with Next.js and React, integrated live hockey data from multiple APIs, implemented authentication and protected functionality with Supabase, and deployed the application to production with Vercel. The project allows me to explore how live sports data can be transformed into a more intentional and decision-focused experience for fans while continuing to build my experience with production-ready web applications.
What I've Built
Multi-League Support
Integrated live schedule data from NHL and PWHL APIs, allowing users to browse games across multiple leagues from a unified interface.
Game Discovery
Implemented league filtering and matchup views to help users quickly navigate upcoming and recent games.
Featured Matchup Experience
Developed a "Best Game Tonight" feature that highlights a recommended matchup instead of presenting every game with equal emphasis.
Interactive Game Calendar
Built a dedicated calendar experience that lets users browse games by date and navigate between months, with dynamic loading and error states for schedule data.
Game Details & Results
Expanded game views to surface relevant matchup information including scores, game status, goal scorers, broadcast information, and playoff series context when available.
User Authentication
Integrated Supabase Auth to support account creation, email confirmation, login, logout, and persistent authenticated sessions.
Protected User Profiles
Implemented authenticated routing for user profile functionality, restricting protected content to signed-in users while redirecting unauthenticated visitors appropriately.
Dynamic Data & Reusable Components
Built reusable React components that transform live API responses into consistent game cards and other UI elements across NHL and PWHL data.
Responsive Navigation & UI
Created responsive navigation and mobile-friendly layouts so core game discovery, calendar, authentication, and profile features remain accessible across screen sizes.
Production Deployment
Deployed the Next.js application through Vercel with production environment configuration, Supabase authentication redirects, and a custom puckbook.nicolesedillo.com subdomain.
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 clear information hierarchy that emphasizes one featured matchup while keeping the full schedule easy to browse and compare. As the project has expanded, I've carried this approach into features like calendar-based browsing, authentication, and responsive navigation to keep the experience focused as functionality grows.
What I've Learned
This project has helped me move beyond simply consuming and displaying API data and think more holistically about how a production web application is designed, built, and maintained.
I've gained hands-on experience integrating multiple external APIs, working with dynamic data and application state, implementing authentication and protected routes with Supabase, and deploying a Next.js application to production.
It has also strengthened my product thinking by requiring me to balance technical implementation with usability, information hierarchy, responsive design, and the needs of the end user.
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