Project

EliteProspects Widget Hub

Tech used

TypeScript LogoTypeScriptReact LogoReactNext.js LogoNext.jsTailwind CSS LogoTailwind CSSSupabase LogoSupabaseVercel LogoVercelGit LogoGit

A project which allows media outlets and teams to take advantage of the data from Eliteprospects.com API in the form of embeddable widgets to implement on their own websites, and a bookmarklet tool that allows them to generate links back to Eliteprospects.com for players and staff without leaving their current workflow.

An image of EliteProspects Widget Hub in desktop view

The project was initiated by previous interns and is built with Next.js and Supabase. The idea behind the project is to allow media outlets and teams to generate specific widgets that they can embed on their own websites using either an iframe or a script, while at the same time generating traffic back to Eliteprospects.com through links.

During our first internship period, we both contributed to and refined the widget hub by adding new widgets such as Future Prospects, Schedules & Standings. We also improved existing widgets, including Where Are They Now, enhanced the responsiveness of all widgets, and implemented the ability to switch between metric and imperial measurement systems.

In addition, I reworked parts of the authentication flow by introducing automatic approval of new members. For users, we implemented the ability to reset passwords independently through Supabase, as well as the option to customize their organization's colors, allowing them to personalize the appearance of their widgets without needing to contact an admin.

During our second internship period I decided to improve the long-term maintainability of the codebase, I performed a large-scale architectural refactor — migrating from a flat, component-heavy structure to an entity-based architecture. This involved replacing several thousand lines of duplicated table rendering code with a single generic component shared across all widgets, extracting reusable hooks and utilities, and decomposing large God components into focused, single-responsibility modules.

I overhauled the admin panel, adding sortable columns and live search across the Users and Organizations tabs, decomposing a large monolithic color management component into focused, reusable pieces, and cleaning up debug code and hardcoded state that had accumulated over time.

The refactor resulted in a net reduction of around 5,200 lines of code while improving consistency and making the codebase significantly easier to scale and navigate for future developers working in the project.