A comprehensive analytics dashboard for USTA tennis leagues across the United States, built with Next.js, TypeScript, and PostgreSQL.
- Real-time Statistics: View player counts, section distributions, gender breakdowns, and rating distributions
- Advanced Filtering: Filter data by section, district, area, gender, and rating
- Interactive Charts: Beautiful visualizations using Chart.js
- Responsive Design: Modern UI that works on all devices
- Real-time Updates: Data refreshes automatically when filters change
Comprehensive filtering interface allowing users to narrow down data by section, district, area, gender, and rating
Interactive chart showing the distribution of player ratings across different genders
Visualization displaying the number of players in each USTA section
The dashboard supports comprehensive filtering:
- Section: Filter by USTA sections (e.g., USTA/EASTERN, USTA/FLORIDA)
- District: Filter by districts within sections
- Area: Filter by specific areas within districts
- Gender: Filter by Male, Female, or Mixed
- Rating: Filter by player rating (2.5 to 5.5)
All filters work together to provide precise data insights. The statistics update in real-time as you apply or modify filters.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
- Frontend: Next.js 15 with TypeScript, Tailwind CSS, and Chart.js
- Backend: Next.js API routes with PostgreSQL database
- State Management: React Query for server state management
- UI Components: Custom UI components built with Radix UI primitives
- Database: PostgreSQL with optimized queries for filtering
GET /api/stats- Returns filtered statistics based on query parametersGET /api/filters- Returns available filter options (sections, districts, areas)
The application connects to a PostgreSQL database with the following main tables:
players- Player information including gender, rating, state, countryplayer_sections- Player-section relationshipssections- Section information- Additional tables for districts and areas
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.