Sports Leagues SPA

A single-page application that displays sports leagues from around the world with filtering capabilities and badge viewing.

Features

• 🏆 Browse Leagues - View all sports leagues from TheSportsDB API
• 🔍 Search - Filter leagues by name in real-time
• 🎯 Filter by Sport - Dropdown to filter by sport type (Soccer, Basketball, etc.)
• 🏅 View Badges - Click any league to view its season badge
• 💾 Caching - Badge responses are cached in localStorage
• 📱 Responsive - Works on mobile, tablet, and desktop
• 🌙 Dark Mode - Automatic dark mode support

Tech Stack

• Framework: Nuxt 4 + Vue 3
• Language: TypeScript
• UI Library: Nuxt UI + Tailwind CSS
• State Management: Pinia
• Utilities: VueUse
• API: TheSportsDB

Getting Started

Prerequisites

• Node.js 20.x or higher
• npm, yarn, or pnpm

Installation

# Clone the repository
git clone https://github.com/zatkniz/sporty-group.git
cd sporty-group

# Install dependencies
npm install

Development

Start the development server on http://localhost:3000:

npm run dev

Production

Build for production:

npm run build

Preview the production build:

npm run preview

Project Structure

app/
├── components/         # Vue components
│   ├── LeagueCard.vue     # Individual league card
│   ├── LeaguesFilters.vue # Search & filter controls
│   ├── LeaguesGrid.vue    # Grid layout for leagues
│   └── BadgeModal.vue     # Modal for displaying badges
├── composables/        # Reusable composition functions
│   └── useApi.ts          # API client wrapper
├── stores/             # Pinia stores
│   └── sportsLeagues.ts   # Leagues state management
├── types/              # TypeScript definitions
│   └── thesportsdb.ts     # API response types
├── pages/              # Route pages
│   └── index.vue          # Main leagues page
└── layouts/            # Layout components
    └── default.vue        # Default layout

API Endpoints

Documentation

For detailed development documentation, including architecture decisions and AI tools used, see DEVELOPMENT.md.

License

This project is for demonstration purposes.