ClubLogos/frontend/README.md

🇨🇿 Czech Clubs Logos API - Frontend

A beautiful, dark mode frontend for the Czech Clubs Logos API. Built with modern web technologies for a smooth and user-friendly experience.

🎨 Tech Stack

• Vite - Lightning-fast build tool
• Tailwind CSS - Utility-first CSS framework
• GSAP - Professional-grade animation library
• Vanilla JavaScript - No framework overhead

✨ Features

• 🌙 Dark Mode - Eye-friendly dark theme
• 🎭 Smooth Animations - GSAP-powered transitions
• 🔍 Club Search - Search Czech clubs by name
• ⬆️ Logo Upload - Drag & drop or browse to upload
• 📱 Responsive - Works on all device sizes
• ⚡ Fast - Optimized with Vite

🚀 Quick Start

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Navigate to the frontend directory:

cd frontend

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

The app will open at http://localhost:3000

🏗️ Build for Production

npm run build

This will create an optimized build in the dist folder.

To preview the production build:

npm run preview

🔧 Configuration

API Endpoint

Update the backend API URL in src/main.js:

const API_BASE_URL = 'http://localhost:8080' // Update this to your backend URL

Styling

Customize colors and theme in tailwind.config.js:

colors: {
  'dark-bg': '#0a0e1a',
  'dark-card': '#131823',
  'accent-blue': '#3b82f6',
  'accent-green': '#10b981',
}

📁 Project Structure

frontend/
├── src/
│   ├── main.js          # Main JavaScript logic
│   └── style.css        # Global styles + Tailwind
├── index.html           # Main HTML file
├── vite.config.js       # Vite configuration
├── tailwind.config.js   # Tailwind configuration
├── postcss.config.js    # PostCSS configuration
└── package.json         # Dependencies

🎯 Usage

Search for Clubs

1. Click the "🔍 Search Clubs" button
2. Type a club name (e.g., "Sparta", "Slavia")
3. Browse results and copy UUIDs

Upload a Logo

1. Click the "⬆️ Upload Logo" button
2. Enter or paste a club UUID
3. Drag & drop or click to select a logo file (SVG/PNG)
4. Preview your logo
5. Click "Upload Logo"

🌟 Features in Detail

Animation System

Powered by GSAP with:

• Smooth hero animations on page load
• Scroll-triggered feature cards
• Staggered API endpoint reveals
• Interactive button feedback

Search System

• Real-time search with debouncing
• Demo data fallback when backend is unavailable
• Click to auto-fill upload form
• Copy UUID to clipboard

Upload System

• Drag & drop support
• File type validation (SVG/PNG only)
• UUID format validation
• Image preview before upload
• Visual feedback notifications

🔌 Backend Integration

This frontend is designed to work with the Go backend API. Ensure the backend is running at the configured URL.

Expected endpoints:

• GET /clubs/search?q={query} - Search clubs
• GET /clubs/:id - Get club details
• POST /logos/:id - Upload logo
• GET /logos/:id - Get logo

🎨 Customization

Colors

Edit tailwind.config.js to change the color scheme:

theme: {
  extend: {
    colors: {
      'dark-bg': '#your-color',
      'dark-card': '#your-color',
      // ... etc
    }
  }
}

Fonts

Change the font in src/style.css:

@import url('https://fonts.googleapis.com/css2?family=YourFont:wght@300;400;700&display=swap');

Animations

Adjust GSAP animations in src/main.js:

gsap.from('.hero-content', {
  duration: 1,
  opacity: 0,
  y: 50,
  // ... customize
})

📝 License

This project is part of the Czech Clubs Logos API system.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

---

Built with ❤️ for Czech Football