The Name, Image, and Likeness (NIL) landscape has fundamentally changed collegiate and high school sports. LockedIn HQ is a dedicated professional networking and NIL marketplace engineered specifically for student-athletes. Functioning as a "LinkedIn for sports," it provides a centralized hub where athletes can build their brand, showcase academic and athletic metrics, network with industry advisors, and seamlessly secure brand sponsorships.

Student-athletes face a highly fragmented ecosystem when trying to monetize their brand. The challenge was building an all-in-one platform that could handle social networking, complex role-based onboarding, subscription management, and a robust job board for brand deals—without overwhelming the user. The UI needed to feel premium, energetic, and highly intuitive to resonate with Gen-Z athletes, while maintaining the structural integrity of a professional B2B tool.

To construct this feature-rich, dynamic marketplace, I architected the frontend using Next.js, React, and TypeScript to ensure absolute type safety and high performance across complex data views. The modern, dark-themed aesthetic and modular components were developed using Tailwind CSS paired with Shadcn UI.

The entry point sets the stage. The welcome screen utilizes a bold, high-contrast visual split featuring dynamic athletic imagery. It immediately communicates the platform's exclusive focus ("Built for Athletes, Beyond the Game") and offers a frictionless entry point for account creation or login.

LockedIn HQ serves a multi-sided market. The onboarding flow features a clean, highly accessible role-selection interface built with custom radio-card components. By immediately segmenting users into precise categories (Athlete, NIL Advisor, Student Manager, Creator), the platform ensures a perfectly tailored dashboard experience moving forward.

The main dashboard is the athlete's command center. It perfectly balances vital information using a well-structured grid system. Users can instantly view their referral progress, discover upcoming NIL workshops, track premium subscription status, and access top-tier sponsorship opportunities—all within a seamless, visually cohesive dark-mode environment.

This is the athlete's digital resume. The profile interface goes beyond standard networking by integrating specific, data-rich widgets for Athletic Stats (height, weight, season averages), Academic Info, and Social Media reach. Progress rings for "NIL Readiness" encourage users to fully complete their profiles to attract top brands.

The Community tab powers the platform's networking aspect. Built for real-time engagement, this feed handles rich media posts, engagement metrics (likes, comments, shares), and trending sports topics. The UI mirrors top-tier social platforms but remains strictly focused on athletic development and NIL deal announcements.

Connecting athletes with capital. The Opportunities view functions as a powerful job board. It features dynamic filtering by Sport, Type, Location, and Compensation, allowing athletes to sift through thousands of potential sponsorships (like Nike or Adidas campaigns) efficiently.

Drilling down into a specific brand deal reveals a highly structured detail page. It presents requirements, compensation breakdowns, and an application timeline in digestible, card-based formats. The persistent, high-contrast "Apply Now" block ensures the primary conversion action is always within reach.

LockedIn HQ represents a massive leap forward in the sports tech space. By leveraging a high-performance modern stack and meticulous state management, the resulting application is a scalable, secure, and visually striking ecosystem that successfully bridges the gap between student-athletes and professional brand monetization.