This commit is contained in:
Tomas Dvorak
2026-01-26 08:13:18 +01:00
parent aa036b6550
commit dfc079288f
505 changed files with 95755 additions and 5712 deletions
+106 -102
View File
@@ -1,119 +1,116 @@
# Fotbal Club - Project Overview
# MyClub - Project Overview
## Project Description
A comprehensive football (soccer) club management system built with Go (Gin) backend and a modern frontend. The application serves as a complete platform for managing football club operations, including team management, news publishing, event scheduling, and fan engagement.
MyClub is a comprehensive football club CMS and website platform. It combines a Go (Gin) REST API backend with a modern React frontend to power club operations endtoend: content/news, matches/standings (FAČR integration), teams/players, gallery and videos, banners/sponsors, newsletters, polls, comments, a live scoreboard overlay, and a powerful visual editor (MyUIbrix) for building the homepage.
## Technical Stack
### Backend
- **Language**: Go (Golang)
- **Framework**: Gin Web Framework
- **Database**: PostgreSQL (with GORM ORM)
- **Authentication**: JWT (JSON Web Tokens)
- **Templating**: Go HTML templates
- Go (Golang) with Gin Web Framework
- PostgreSQL via GORM ORM; migrations in `database/`
- JWT authentication with rolebased access (Admin, Editor, User)
- REST API, static uploads at `/uploads`, email templates
- Background jobs: prefetcher (FAČR/YouTube/Zonerama), newsletter automation
- Prometheus metrics, rate limiting, CORS, gzip, request IDs
### Frontend
- **Framework**: React (TypeScript)
- **Styling**: CSS Modules, with custom theme support
- **Build Tool**: Webpack
- **Testing**: Jest, React Testing Library
- React 18 (TypeScript) with Chakra UI, React Router, React Query
- ClubThemeContext dynamic theming; dark mode and typography system
- Built with CRA + CRACO; service worker/PWA setup
- Modern UI components, responsive layouts, accessibility focus
### DevOps & Infrastructure
- **Containerization**: Docker
- **CI/CD**: GitHub Actions
- **Monitoring**: Prometheus metrics
- **Logging**: Custom logging service
- Docker Compose for local dev (backend 8080, frontend 3000, Postgres 5432)
- Nginx serving frontend build in production; static `/uploads` from backend
- Prometheus metrics; productionsafe logging; health checks
- CI/CD ready (GitHub Actions examples); Makefile helpers
## Core Features
### 1. User Management
- User registration and authentication
- Role-based access control (Admin, Editor, User)
- Profile management
- Password reset functionality
- **Website & CMS**
- Articles/blog with rich text editor (images, attachments), categories, tags, search
- Comments with reactions and moderation; attachments open in new tab
- Static/legal pages (Privacy, Terms, Cookie policy with preferences)
### 2. Content Management
- Article publishing system
- Media library for images and documents
- WYSIWYG editor for content creation
- Categories and tags for content organization
- **Sports**
- Teams and players (profiles, positions, numbers, nationality translations)
- Matches: FAČR integration (schedule/results), upcoming/history, search with past scores
- Tables/standings and competition aliases; team name/logo overrides
- Scoreboard overlay and Remote controller; admin Scoreboard page
### 3. Team & Player Management
- Team rosters and player profiles
- Player statistics and performance tracking
- Team lineup configuration
- Match scheduling and results
- **Media**
- Gallery via Zonerama integration with caching and album covers
- Videos: auto import from YouTube channel + manual items, dedup + datesorted
- Local uploads management; simplified file previews
### 4. Event Management
- Event creation and management
- Calendar integration
- RSVP and attendance tracking
- Event galleries
- **Engagement**
- Polls with multiple styles (stars, scale, choices, chips/cards), live results, embedded on pages
- Rewards (Odměny & Úspěchy): simplified admin, mandatory avatar upload unlock, unlimited stock support
### 5. Fan Engagement
- Comments system with moderation
- Polls and surveys
- Newsletter subscriptions
- Social media integration
- **Communication**
- Newsletter automation: weekly digest, match reminders, results, blog notifications
- Recipient preferences, previews in admin, logs and scheduling
- Contacts and messages with forms and saved locations for events
### 6. E-commerce
- Club merchandise store
- Ticket sales
- Donation system
- Payment processing integration
- **Marketing**
- Sponsors with categories and placements
- Banners/ads management with presets and display rules
### 7. Analytics & Reporting
- Website traffic analytics
- User engagement metrics
- Custom report generation
- Export functionality for data
- **Navigation & Theming**
- Public navbar hides empty sections (articles, players, activities, videos, gallery)
- Admin navigation with editable categories; perpage permissions (Editors on articles/activities/shortlinks)
- Club theming via Chakra + ClubThemeContext; dark mode and typography controls
- **MyUIbrix Visual Editor**
- Draganddrop homepage builder, inline text editing, style/CSS editor, column layouts
- Variants (e.g., hero/news/videos), bulletproof style system, viewport simulator
- State controller, autosave, backend preview/validation endpoints, error boundary, safe DOM helpers
- **Analytics**
- Umami integration, admin dashboards, admin exclusion and debugging tools
- **Maps & Location**
- Google Maps integration, vector maps, map link importer, reusable saved locations
- **Security & Performance**
- JWT auth, CSRF, XSS protection, input validation, rate limiting, security headers
- HTTP timeouts, circuit breakers, DB timeouts, performance indexes, Prometheus metrics
- **Admin & Tools**
- 30+ admin pages, global support button with context, docs viewer at `/admin/docs`
- Shortlinks system; cache/prefetch tools
## Project Structure
```
fotbal-club/
├── cmd/ # Application entry points
│ └── sqlmigrate/ # Database migration tool
├── internal/ # Private application code
│ ├── config/ # Configuration management
├── controllers/ # Request handlers
│ ├── middleware/ # HTTP middleware
│ ├── models/ # Database models
│ ├── routes/ # Route definitions
│ └── services/ # Business logic
├── pkg/ # Reusable packages
├── database/ # Database connection and migrations
│ ├── email/ # Email service
│ └── logger/ # Logging utilities
├── frontend/ # Frontend application
│ ├── public/ # Static assets
│ ├── src/ # Source code
│ │ ├── components/ # React components
│ │ ├── pages/ # Page components
│ │ ├── services/ # API services
│ │ ├── styles/ # Global styles
│ │ └── utils/ # Utility functions
│ └── tests/ # Frontend tests
├── uploads/ # User-uploaded files
├── .env # Environment variables
└── go.mod # Go module definition
├── cmd/ # Entry points / tools
├── internal/ # Backend (controllers, middleware, models, routes, services)
├── pkg/ # Reusable backend packages (email, httpclient, etc.)
├── database/ # SQL migrations and seeds
├── frontend/ # React app (Chakra UI, React Query, Router)
├── DOCS/ # Documentation (guides, audits, quick starts)
├── diagrams/ # Mermaid diagrams (see section below)
├── static/ # Public static assets
├── templates/ # Email/templates if used
├── uploads/ # Useruploaded files (served at /uploads)
├── docker-compose.yml # Local dev stack
└── go.mod # Go module definition
```
## Key Technical Components
### Backend Architecture
- **RESTful API** design
- **Dependency Injection** for better testability
- **Repository pattern** for data access
- **Middleware** for cross-cutting concerns (auth, logging, etc.)
- **Background workers** for async tasks
- RESTful API with modular controllers and services
- Middleware: auth (JWT/optional), rate limiting, CORS, gzip, recovery with request IDs
- Background jobs: FAČR/YouTube/Zonerama prefetch, newsletter automation
- Static file server for `/uploads`; Prometheus metrics at `/metrics`
### Frontend Architecture
- **Component-based** UI architecture
- **State management** with React Context API
- **Responsive design** for all device sizes
- **Progressive Web App** capabilities
- **Accessibility** (a11y) compliant
- Componentbased UI with Chakra UI
- Data layer via React Query; React Router for routing
- ClubThemeContext for dynamic colors; responsive design
- PWAready; accessibility best practices
### Security Features
- CSRF protection
@@ -124,30 +121,37 @@ fotbal-club/
## Development Setup
### Prerequisites
- Go 1.20+
- Node.js 16+
- PostgreSQL 13+
- Redis (for caching and sessions)
### Quick start (Docker Compose)
1. Copy `.env.example` to `.env` and adjust settings
2. Start the stack: `make docker-up`
3. Health check: http://localhost:8080/api/v1/health
4. Frontend: http://localhost:3000 (proxies API to backend)
5. Optional seed: set `SEED_DATABASE=true` in `.env` and restart
### Installation
1. Clone the repository
2. Set up environment variables (copy `.env.example` to `.env`)
3. Install backend dependencies: `go mod download`
4. Install frontend dependencies: `cd frontend && npm install`
5. Run database migrations: `go run cmd/sqlmigrate/main.go`
6. Start the development server: `go run main.go`
### Manual dev (advanced)
- Backend: `go mod download && go run main.go`
- Frontend: `cd frontend && npm install && npm start`
## Deployment
The application can be deployed using:
- Docker containers
- Traditional VM deployment
- Cloud platforms (AWS, GCP, Azure)
- Docker images for backend and frontend (Nginx) with environment configuration
- Static uploads served by backend; configure reverse proxy and SSL as needed
## API Documentation
API documentation is available at `/api/docs` when running in development mode.
- See `DOCS/DOCS_API_ROUTES.md` for route references
- Admin inapp docs viewer: `/admin/docs`
- Health: `GET /api/v1/health`, Metrics: `/metrics`
## Diagrams
Key Mermaid diagrams live under `diagrams/` (open `diagrams/index.html` to browse rendered versions):
- **System**: `diagrams/system-overall.mmd`, `diagrams/system-overall-clean.mmd`
- **Backend**: `diagrams/backend-routes-overview.mmd`, `diagrams/backend-middleware-pipeline.mmd`, `diagrams/backend-packages.mmd`, `diagrams/backend-jobs.mmd`
- **Frontend**: `diagrams/frontend-architecture.mmd`, `diagrams/frontend-routes.mmd`, `diagrams/frontend-homepage.mmd`, `diagrams/frontend-overall.mmd`, `diagrams/frontend-everything.mmd`
- **Data**: `diagrams/db-models.mmd`, `diagrams/db-er.mmd`
- **Flows**: `diagrams/auth-flow.mmd`, `diagrams/comments-flow.mmd`, `diagrams/newsletter-flow.mmd`, `diagrams/shortlinks-flow.mmd`, `diagrams/upload-flow.mmd`, `diagrams/gallery-zonerama-flow.mmd`, `diagrams/scoreboard-flow.mmd`
- **Admin**: `diagrams/admin-overall.mmd`
## Contributing