MaxPreps

May 2022 - Nov 2024

Front End Software Engineer at MaxPreps building out high traffic user facing features.

Projects

SSR Data Fetching Improvements

When I joined MaxPreps, my first project was to modernize the way our data fetching layer interacted with server-side rendering (SSR) endpoints. The existing implementation had grown inconsistent, with frequent type mismatches and unpredictable data contracts that slowed development and made debugging more cumbersome than it needed to be.

I led an independent effort to migrate the system toward a TypeScript first architecture. By introducing generics and factory patterns, I created a framework that enforced stronger compile-time guarantees while improving code clarity. This new approach allowed developers to reason about endpoint behavior through type inference rather than runtime guesswork. Leveraging Next.js's native error propagation, I built a structured API surface that automatically surfaced issues in SSR flows, reducing manual error handling and simplifying the creation of new endpoints.

The results were immediately noticeable. Developers experienced lower cognitive load when writing or reviewing endpoints, and the structured system provided clearer insight into potential issues before they reached production. It also established a foundation for future improvements in stability and performance across the site.

Reflection

This project reinforced the value of designing for both correctness and clarity. TypeScript's generics and strong typing aren't just about safety. They are about building systems that scale mentally as well as technically. Leading this migration early in my tenure helped me appreciate how developer experience directly translates to product reliability.

Rebuilding the Stats Page for Performance and Engagement

When the company initiated a full redesign of its stats page, the legacy version had fallen behind evolving brand standards, search expectations, and performance needs. As the lead engineer on the four-month initiative, I owned the technical direction for a project that required coordination across design, product, and engineering stakeholders.

The work centered on modernizing the page architecture to support stronger SEO signals, faster rendering, and a more consistent visual language. This included refactoring core data flows, tightening the SSR pipeline, and introducing patterns that improved the reliability of layout shifts for ad slots. The redesign also aligned the interface with new accessibility and brand requirements, which meant revisiting typography scales, contrast rules, and interaction behaviors.

Throughout development, I drove implementation details ranging from component restructuring to cache strategy adjustments that reduced unnecessary network work. Collaboration with the ads team allowed for better slot positioning and more predictable loading behavior. I also validated changes against Core Web Vitals to ensure the redesign meaningfully improved real-world performance.

After launch, the impact was clear. The page moved from position nine to position six in Google's rankings. Ad revenue increased eleven percent, and page load times improved by five percent. Engagement signals trended upward as well, reflecting a cleaner visual hierarchy and smoother interactions.

Reflection

This project reinforced the value of balancing product goals with technical constraints. It highlighted how early architectural decisions, especially around data flow and rendering paths, shape long-term performance and maintainability.

Building an Interactive Sports Position Display

During a design meeting, I introduced the idea for an interactive visual that could show where an athlete lines up on the field or court. I often found myself asking where certain positions were located, and it became clear that many users likely shared that same gap in context. The goal was to create a simple, accurate visual that gave immediate spatial understanding for any supported sport.

I built the feature using React, SVG elements, CSS, and a lightweight coordinate grid. Each sport uses a static preset that maps its positions to coordinates, which keeps rendering predictable and fast. To support long-term growth, I designed a TypeScript abstraction that defines each sport's geometry and positional metadata. This approach made the display extensible as we expanded from the initial basketball and football layouts to more than twenty sports.

The component now appears on every player bio page for supported sports, giving users a quick orientation even if they're unfamiliar with that sport's field layout. The SVG-based design keeps the system flexible without adding runtime complexity or heavy dependencies.

Reflection

This project highlighted how a small visual improvement can scale when paired with the right abstractions. A clean coordinate schema and TypeScript driven definitions allowed the system to grow across dozens of sports while staying easy to maintain.

Building a Club Teams Interface to Expand Athlete Profiles

When the project began, athlete profiles had no way to represent participation in sports outside of official school teams. This left a gap for users involved in club soccer and other non-school programs. Product defined the need for a dedicated interface, and I served as the engineer responsible for implementing it while collaborating closely with our design team.

The work started with a simple search that allowed athletes to look up club teams and leagues. As the project expanded, I introduced a geolocation flow using the browser API with a fallback to a region server when access was denied. Team lookup ran through Postgres geo-coordinates, filtering by a fifty-mile radius and returning results sorted by proximity and then alphabetically. The interface used pre-defined sport position lists, allowing athletes to update or confirm their roles while ensuring consistency across supported sports.

Data quality introduced recurring challenges, especially with user-defined names and inappropriate terms across public fields. We managed these through backend validation, and careful handling of pagination and caching. The implementation relied solely on React state, which made asynchronous coordination and loading states more complex. In hindsight, a dedicated data layer would have reduced that complexity, but the constraint pushed the work toward a simple, predictable structure.

After launch, more than twelve thousand new players registered a club team to their profile. This confirmed that athletes were eager to showcase sports involvement beyond school programs and that the system filled a gap not covered by any single, reliable data source. The later addition of “games played” reinforced the importance of leaving space for incremental enhancements.

Reflection

This project underscored the value of releasing something concrete early. Validating assumptions up front created a clearer path for improving the experience over time and shaped how I think about extensibility in long-form product builds.

Rebuilding the Search Page to Capture Lost Traffic and Revenue

When revisiting the site's error logs in Sentry, I noticed a recurring pattern on our search surface. Each week, more than fifty thousand queries returned zero results. This signaled two issues: heavy traffic flowing through the search experience and a substantial portion of it failing to produce value for users or revenue for the business. A deeper review of search terms across all entry points revealed that many queries targeted specific versions or variants that our system didn't account for.

Using Adobe Analytics, I aggregated visit data, common terms, and user paths. The picture was clear. The search page was underperforming, brand-inconsistent, and missing roughly eight hundred eighty thousand ad impressions. Combined with the fifty thousand zero-result queries, the missed opportunity was significant. I drafted a proposal centered on three goals: realign the page with our updated brand, recover uncaptured impressions including video inventory, and adopt a proven search pattern from a prior project to increase relevance.

During implementation, backend engineering owned the new API, but I worked closely with them to shape the structure, response format, and strategy so it could support more than the standalone search page. This influence ensured the endpoint could power index pages across the site, giving multiple surfaces access to fresher, more structured data.

After launch, search relevance improved as shown through user journey analysis, and the updated experience began generating more than fifty thousand dollars in monthly revenue.

Reflection

This project underscored how analytics and engineering collaboration can expose hidden opportunities. Small signal errors often reveal systemic gaps, and building solutions that can be reused across the site can produce impact well beyond the original scope.