vueuse-composables

• 🏆 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

• Framework: [Nuxt 4](https://nuxt.com/) + [Vue 3](https://vuejs.org/)
• Language: [TypeScript](https://www.typescriptlang.org/)
• UI Library: [Nuxt UI](https://ui.nuxt.com/) + [Tailwind CSS](https://tailwindcss.com/)
• State Management: [Pinia](https://pinia.vuejs.org/)
• Utilities: [VueUse](https://vueuse.org/)
• API: [TheSportsDB](https://www.thesportsdb.com/free_sports_api)

Prerequisites

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

Installation

```bash

# 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:

```bash

npm run dev

```

Production

Build for production:

```bash

npm run build

```

Preview the production build:

```bash

npm run preview

```

```

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

```

| Endpoint | Description |

|----------|-------------|

| all_leagues.php | Fetch all sports leagues |

| search_all_seasons.php?badge=1&id={id} | Fetch league badge by ID |

For detailed development documentation, including architecture decisions and AI tools used, see [DEVELOPMENT.md](./DEVELOPMENT.md).

This project is for demonstration purposes.