AthloBase

I built AthloBase for Hack Club’s “Neighborhood” event as a centralized platform for managing sports clubs and teams. It brings clubs, training sessions, events, memberships, and day-to-day operations into one dashboard so organizers can stay consistent and athletes/members can stay informed.

This project was also a personal milestone: by shipping AthloBase as my Hack Club project, I earned an invitation from GitHub to join them in San Francisco.

Problem and goal

Grassroots clubs often run on scattered tools—spreadsheets for rosters, chats for announcements, separate calendars for training, and ad-hoc membership tracking. The goal with AthloBase was to consolidate those workflows into one reliable product:

• Support multiple clubs under one account (for organizers who run more than one team/program).

• Create, schedule, and manage training sessions and events from a single place.

• Track memberships and participation without manual spreadsheets.

• Provide a clean, fast UI that works as a real product—not just a demo.

My role

I built AthloBase end-to-end as a solo full stack project:

• Product design: defining the core objects (clubs, members, sessions, events) and the dashboard flow.

• Frontend: Next.js UI with Tailwind CSS and Zustand for state.

• Backend: Next.js API Routes for server-side functionality.

• Auth + data: Auth.js (NextAuth) for authentication and MongoDB via Prisma ORM for persistence.

• Deployment: shipped on Vercel.

What I built

Multi-club dashboard

I designed AthloBase around a “multi-club” model so a single user can manage more than one organization from one account. The dashboard provides a central home for navigating between clubs and seeing what’s upcoming (sessions/events) without jumping between tools.

Training sessions and events

I implemented workflows to create and manage:

• Training sessions (recurring or scheduled practices).

• Events (matches, tournaments, meetups, or admin events).

The key product decision here was to keep scheduling and visibility first-class—clubs live and die by consistency and communication.

Membership management

I built membership tracking so clubs can:

• Maintain a roster (members/athletes).

• Associate members with clubs and participation contexts.

• Keep club structure organized as it grows (instead of resetting every season in a new spreadsheet).

Authentication and secure access

I integrated Auth.js (NextAuth) so user identity is consistent across the app and sensitive club operations are protected behind login. This ensured the dashboard and club data aren’t “public-by-default,” which is important even for small community clubs.

Technical approach

Stack choices and why

• Next.js for fast iteration and a cohesive full stack setup (UI + API in one codebase).

• Next.js API Routes to move quickly and keep backend logic close to the product surface.

• MongoDB + Prisma ORM to model club/team entities cleanly and query them safely.

• Zustand to avoid overengineering state while keeping UI predictable.

• Tailwind CSS to ship a consistent UI quickly.

• Vercel deployment to simplify preview URLs, iteration, and shipping.

What I optimized for

• Speed of development: hackathon constraints require pragmatic architecture.

• Clean data model: clubs/sessions/events/memberships must be flexible.

• A product feel: the dashboard UX should be understandable in minutes.

Outcomes

• Shipped a complete full stack product with authentication, persistent data, and real deployment.

• Demonstrated the ability to turn a real-world operations problem into a usable dashboard app.

• Earned an invitation from GitHub to join them in San Francisco as a result of the project.