GIO — Sports Academy Manager

Admin dashboard for managing players, matches, and rosters in a youth football academy — built with Next.js 16, Drizzle ORM, and NeonDB.

Installation

Requirements: Node >= 18, a NeonDB (PostgreSQL) database, a Clerk account

npm install

Copy the environment template and fill in your values:

cp .env.example .env.local
# Add: DATABASE_URL, NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY, CLERK_SECRET_KEY

Run database migrations and seed:

npm run db:migrate
npm run db:seed

Quick Start

npm run dev

Open http://localhost:3000 — log in with Clerk to access the admin dashboard.

Features

• Player registry — create and manage player profiles with personal data, tutor info, category, and school details
• Match management — schedule matches with rival, date, jornada, format, location, and result
• Roster builder — assign players to matches with dorsal number and position
• Category filtering — organize players and matches by age category
• Role-based access — admin and user roles via Clerk authentication

Database Commands

npm run db:generate   # Generate migration files from schema changes
npm run db:migrate    # Apply migrations to the database
npm run db:seed       # Seed the database with sample data

Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript 5
Styling	Tailwind CSS 4 + shadcn/ui
Database	NeonDB (PostgreSQL serverless)
ORM	Drizzle ORM
Auth	Clerk
Tables	TanStack Table v8
Data Fetching	Server Actions + TanStack Query v5

Color Palette

Role	Hex	Usage
Primary	#086bb1	Buttons, active nav, accents
Primary light	#0082d1	Hover state
Primary dim	#003f66	Active nav bg, selected row tint
Background	#0d1117	Page base (deep navy-black)
Surface	#161b22	Sidebar, table, cards
Surface raised	#1c2330	Modals, dropdowns, input bg
Border	#2a3140	Table lines, dividers
Text primary	#e6edf3	Headings, main content
Text secondary	#8b949e	Labels, metadata
Danger	#f85149	Delete actions
Success	#3fb950	Toast confirmations

License

MIT © Yalianny González 2026