A modern, high-performance web-based football management simulation built with React, TypeScript, Tailwind CSS, Firebase, and Supabase. The application offers tactical depth, an interactive 2D canvas match engine, real-time multiplayer leagues with draft mechanics, a peer-to-peer transfer market, and a dedicated singleplayer solo career mode.
Live Application: https://halisaha-manager.web.app
Repository: https://github.com/Berkawaii/halisahaManager
This project is a non-profit, educational, and portfolio engineering endeavor developed solely to demonstrate technical capabilities in frontend architecture, distributed state management, real-time synchronization, and mathematical simulation modeling.
- Data Attribution: Player and club attributes are derived from the public Kaggle dataset: FC 26 / FIFA 26 Player Data.
- Non-Commercial Statement: All club names, player identities, and logos are referenced strictly for academic and illustrative purposes under non-commercial fair use. No monetized features or proprietary monetization assets are implemented.
- Dual Backend Architecture: Combines Firebase Firestore for document-based league metadata and auth with Supabase PostgreSQL and Realtime channels for high-frequency transfer transactions and live bids.
- Client-Side Simulation Engine: Discrete event simulation calculates match outcomes, player ratings, injury occurrences, referee strictness influences, and tactical adjustments in real time without server latency.
- 2D Canvas Match Engine: Native HTML5 Canvas renderer executing 60 FPS spatial animations for ball physics, passing vectors, shot trajectories, and goal celebrations.
- Dynamic State Management: Modular React Context providers (
GameContext,AuthContext,LanguageContext) provide reactive state distribution and atomic updates across all viewports. - Zero-Dependency Internationalization (i18n): Fully typed custom dictionary architecture supporting Turkish (
tr) and English (en) with real-time toggle and localStorage persistence. - PWA Ready: Offline asset caching and Progressive Web App service worker configurations via Vite PWA.
graph TD
subgraph Client ["Client Layer (Browser / PWA)"]
UI["React 18 Component Tree"]
Canvas["2D Match Canvas Renderer"]
Engine["Client-Side Simulation Engine"]
Context["State Layer: GameContext / AuthContext / LanguageContext"]
Storage["Local Storage (Guest Session / Settings / Cache)"]
end
subgraph Firebase ["Firebase Cloud Infrastructure"]
Auth["Firebase Authentication (Email / Password)"]
Firestore["Cloud Firestore (Leagues, Standings, Fixtures, Squads)"]
Hosting["Firebase Hosting (CDN Edge Delivery)"]
end
subgraph Supabase ["Supabase Backend Services"]
Postgres["PostgreSQL Database (Transfers, Offers)"]
Realtime["Supabase Realtime Engine (WebSockets)"]
end
UI --> Context
Canvas --> Engine
Context --> Firestore
Context --> Auth
Context --> Postgres
Postgres --> Realtime
Realtime --> Context
Context --> Storage
Hosting --> Client
The match engine is engineered as a deterministic yet probabilistic state machine:
- Spatial Positioning: Player positions on the pitch are computed based on user-selected tactical formations (e.g., 4-3-3, 4-2-3-1, 3-5-2) mapped into normalized canvas coordinates
(x, y). - Attribute Evaluation: Ball progression, passing success, defensive interceptions, and shooting accuracy are resolved using dynamic player ratings adjusted for stamina delta, morale, fatigue, and tactical mentality (Ultra Defensive to All-Out Attack).
- Referee System: Referees are modeled with individualized strictness ratings (1 to 10), directly impacting foul probability, yellow/red card distributions, and penalty awards.
sequenceDiagram
participant Manager as Manager / User
participant Tactics as Tactics Board
participant Engine as Match Engine
participant Canvas as 2D Canvas Renderer
participant State as League State
Manager->>Tactics: Set Lineup, Mentality, Tempo, Aggression
Manager->>Engine: Trigger Match Simulation
Engine->>Engine: Compute Period Events (Goals, Cards, Subs, Momentum)
Engine->>Canvas: Stream Tick Coordinates & Event Payloads
Canvas-->>Manager: Render 60 FPS 2D Replay & Live Audio/Text Feed
Engine->>State: Commit Match Scores, Player Stats, Fatigue, Standings
- Multi-League Multi-Tenancy: Managers can simultaneously belong to up to 4 distinct leagues and hot-swap between active careers without reloading.
- ABBA Snake Draft Engine: Real-time multiplayer fantasy draft where managers pick from available player pools using a balanced snake draft rotation.
- Invite Code Routing: Secure 6-character cryptographic alphanumeric codes for private league access.
graph LR
A["League Host (Admin)"] -->|"Generates Invite Code"| B["Firestore Document"]
C["Invited Manager"] -->|"Enters Code"| B
B -->|"Validates Capacity (Max 20 Clubs)"| D["Assigns Club & Squad"]
D -->|"Broadcasts New Participant"| E["Realtime Sync across all connected peers"]
Designed for users who wish to test the application instantly without signing up:
- 1 Guest = 1 Dedicated League: Spawns an isolated 20-club league where 1 club is assigned to the user and 19 clubs are autonomously managed by AI.
- Manual Simulation Control: Auto-simulation intervals are set to zero (
autoSimulationInterval: 0), giving the user complete pacing control via the "Simulate Week" action. - Session Persistence: Authentication state and career identifiers are cached in local browser storage (
hsm_guest_profile), preventing data loss upon page refresh. - External Join Protection: Singleplayer leagues enforce
isSinglePlayer: truevalidation rules in the data layer, preventing multiplayer entry.
The transfer system operates through a dual-mechanism transaction model:
- Peer-to-Peer Direct Buyout: When a human manager purchases a player listed by another human manager, the transaction resolves instantly at the designated asking price, bypassing AI arbitration.
- Autonomous AI Negotiation Desk: For club-to-club inquiries and AI squad modifications, dynamic counter-offers, board approvals, and valuation coefficients determine whether a bid succeeds.
- Double-Listing Prevention: The system enforces uniqueness constraints on
player_idto prevent duplicate active transfer market entries across leagues.
flowchart TD
Start["Manager selects player on market"] --> CheckType{"Is seller an AI or Real Human?"}
CheckType -- "Human Manager" --> DirectBuy["Peer-to-Peer Direct Buyout"]
DirectBuy --> FundsCheck{"Buyer Budget >= Price?"}
FundsCheck -- Yes --> Transact["Deduct Buyer Budget -> Credit Seller Budget -> Transfer Card"]
FundsCheck -- No --> Reject["Transaction Declined: Insufficient Budget"]
CheckType -- "AI Manager" --> TableCheck{"Does buyer pay listing price or make offer?"}
TableCheck -- "Direct Buyout" --> FundsCheck
TableCheck -- "Counter Offer" --> Desk["AI Transfer Negotiation Desk"]
Desk --> AIAlgorithm["Evaluate Squad Needs, Valuation Delta, Morale"]
AIAlgorithm --> Decision{"AI Accept, Counter, or Reject?"}
Decision -- Accept --> Transact
Decision -- Counter --> CounterPrompt["Manager reviews counter-offer"]
Decision -- Reject --> OfferClosed["Offer Rejected"]
| Layer | Technology | Usage / Purpose |
|---|---|---|
| Frontend Core | React 18 (TypeScript) | Reactive UI component tree, hooks, context architecture |
| Bundler & Tooling | Vite 6 | Fast HMR, production chunk splitting, PWA integration |
| Styling & Theme | Tailwind CSS + PostCSS | Dark-mode sports-lounge aesthetic, responsive layout |
| Icons & Visuals | Lucide React | Clean, modern vector typography (Strict No-Emoji Standard) |
| Graphics / Canvas | HTML5 Canvas 2D Context | 60 FPS interactive pitch rendering and match replay visualizer |
| Primary Database | Firebase Cloud Firestore | Multi-tenant league records, fixtures, standings, user profiles |
| Auth Service | Firebase Authentication | Email/password auth, guest session delegation, role tokens |
| Realtime Market | Supabase (PostgreSQL + WS) | Peer-to-peer transfer market listings, bid logs, real-time push |
| Deployment & CDN | Firebase Hosting | Global edge distribution, HTTPS, single-page app rewrite |
SCMannager/
├── public/ # Static assets, PWA icons, SVG crests, manifest
│ ├── HSM_logo.svg # Official vector emblem
│ └── manifest.webmanifest # Progressive Web App configuration
├── src/
│ ├── components/ # Modular React view components
│ │ ├── admin/ # League management and simulation controls
│ │ ├── auth/ # Manager registration, login, guest access modal
│ │ ├── club/ # Facilities, youth academy, stadium investments
│ │ ├── dashboard/ # Primary overview hub, next match preview, stats
│ │ ├── draft/ # ABBA snake draft room and custom club designer
│ │ ├── guide/ # In-game strategy guide and tutorials
│ │ ├── layout/ # Top navbar, desktop sidebar, mobile bottom nav
│ │ ├── league/ # Standings table, fixtures calendar, top scorers
│ │ ├── lobby/ # Multi-league hub, singleplayer career setup
│ │ ├── match/ # 2D canvas pitch simulator, commentary engine
│ │ ├── squad/ # Squad management, player cards, position filters
│ │ ├── tactics/ # Pitch formation editor, player instructions
│ │ ├── training/ # Weekly training center and attribute growth
│ │ └── transfers/ # Transfer market, scout hub, negotiation desk
│ ├── context/ # React Context state providers
│ │ ├── AuthContext.tsx # Firebase auth, session persistence, guest login
│ │ ├── GameContext.tsx # League orchestration, simulation cycle, teams
│ │ └── LanguageContext.tsx # Dynamic i18n engine, language switcher
│ ├── engine/ # Mathematical simulation and generation algorithms
│ │ ├── LeagueGenerator.ts # League creation, round-robin fixtures, AI rosters
│ │ ├── MatchEngine.ts # Probabilistic match calculation, goals, cards
│ │ └── PlayerGrowth.ts # Age curves, development deltas, stamina degradation
│ ├── i18n/ # Multi-language dictionary files
│ │ └── translations.ts # Complete TR and EN translation catalogs
│ ├── lib/ # Shared utility libraries and client SDK wrappers
│ │ ├── dataLoader.ts # Chunked player dataset indexers
│ │ ├── firestoreSync.ts # Firebase Firestore data access layer
│ │ ├── supabase.ts # Supabase PostgreSQL and Realtime connection
│ │ ├── transferSync.ts # Transfer market real-time synchronization
│ │ ├── referees.ts # Referee generation and strictness classifications
│ │ └── clubLogo.ts # Club emblem resolver and dynamic badge generator
│ ├── types/ # Strict TypeScript domain interfaces
│ │ ├── game.ts # League, Team, Match, Referee, Event definitions
│ │ └── player.ts # Player attributes, positions, ratings, statistics
│ ├── App.tsx # Root application wrapper and layout router
│ └── main.tsx # React application entry point
├── scripts/ # Offline data transformation scripts
│ ├── parse_dataset.cjs # Kaggle FC26 CSV to optimized JSON converter
│ └── test_engine.cjs # CLI simulation verification script
├── firebase.json # Firebase hosting and security rules
├── firestore.rules # Granular database security rules
├── tailwind.config.js # Tailwind CSS layout and color palette
├── tsconfig.json # TypeScript strict configuration
└── vite.config.ts # Vite bundling, PWA, and build split options
- Node.js: Version 18.x or higher
- npm: Version 9.x or higher
- A Firebase project with Authentication and Firestore enabled
- A Supabase project with PostgreSQL and Realtime enabled
-
Clone the Repository:
git clone https://github.com/Berkawaii/halisahaManager.git cd halisahaManager -
Install Dependencies:
npm install
-
Configure Environment Variables: Create a
.envfile in the root directory following.env.example:cp .env.example .env
Fill in your Firebase and Supabase project credentials.
-
Start the Development Server:
npm run dev
The local environment will start at
http://localhost:5173.
To compile TypeScript and bundle static production assets:
npm run buildTo preview the production bundle locally:
npm run previewDeploy to Firebase Hosting:
npx firebase-tools deploy --only hosting --project your-project-idThis project is licensed under the MIT License for educational and non-commercial portfolio evaluation. All data, brand marks, and player references belong to their respective rights holders.