Popular Topics
PopularView All

WhoHoops.com | Basketball Team Management Application

WhoHoops.com | Basketball Team Management Application
Whohoops.com

WhoHoops is a full-stack web application for managing basketball teams and games. It allows users to create teams/courts, join existing teams via secret keys, schedule games, and handle player check-ins. The application features a modern React frontend with a Node.js/Express backend, using PostgreSQL for data persistence.

System Architecture

Frontend Architecture

  • Framework: React 18 with TypeScript
  • Routing: Wouter for client-side routing
  • State Management: TanStack Query (React Query) for server state management
  • UI Framework: shadcn/ui components with Radix UI primitives
  • Styling: Tailwind CSS with custom basketball-themed color palette
  • Build Tool: Vite for development and production builds

Backend Architecture

  • Runtime: Node.js with Express.js framework
  • Language: TypeScript with ES modules
  • API Pattern: RESTful API endpoints under /api prefix
  • Database ORM: Drizzle ORM with PostgreSQL
  • Session Management: Express sessions with PostgreSQL session store
  • Development: Hot reload with tsx for TypeScript execution

Database Architecture

  • Database: PostgreSQL (configured for Neon serverless in production)
  • Schema Management: Drizzle Kit for migrations and schema changes

Key Components

Data Models

  • Users: Basic user profiles with team membership tracking
  • Teams: Basketball teams/courts with location, player count, and unique secret keys
  • Games: Scheduled games linked to teams with participant check-in functionality

UI Components

  • Modals: Create team, join team, and schedule game workflows
  • Cards: Team and game display components with interactive features
  • Header: Navigation with branding and user profile
  • Toast System: User feedback for actions and errors

Data Flow

  1. User Authentication: Session-based system – each browser session gets a unique user ID
  2. Team Management: Users can create teams (auto-assigned secret keys) or join via secret keys
  3. Game Scheduling: Teams can schedule games with date/time selection
  4. Check-in System: Players can check in/out of scheduled games
  5. Real-time Updates: TanStack Query handles cache invalidation and data synchronization