Overview of team performance and upcoming matches.
Setup and configure new match lobbies.
Find and join existing team lobbies with ease.
Real-time tactical adjustments and player positioning.
Detailed information about current match status.
Individual player stats and information card.
In-depth analysis of player statistics.
A modern, feature-rich React Native application for managing football matches, connecting players, and tracking performance with beautiful interfaces and real-time capabilities.
Tactix is a comprehensive football match management application that brings players together through an intuitive and engaging platform. The app combines match creation, player networking, performance tracking, and social features to create the ultimate football experience.
- Cross-Platform: Built with React Native and Expo for iOS, Android, and Web
- Real-time Match Management: Create, join, and manage football matches with live updates
- Player Performance Tracking: Comprehensive skill assessment and statistics
- Social Networking: Connect with other players, add friends, and build your football community
- Beautiful UI/UX: Modern design with dark/light theme support and smooth animations
- Backend Integration: Express.js server with Firebase Firestore for data persistence
- Create Matches: Set up matches with custom formations (5v5, 7v7, 11v11)
- Join Matches: Enter match codes to join existing games
- Live Match Tracking: Real-time match status and player count
- Match History: View past matches and performance data
- Team Formation: Visual field layout with player positioning
- Player Directory: Discover and connect with other players
- Friend System: Add/remove friends and build your network
- Position-based Filtering: Filter players by position (GK, DEF, MID, FWD)
- Player Profiles: Detailed profiles with statistics and achievements
- Search & Discovery: Find players by name or position
- Skill Assessment: Rate players across multiple skill categories
- Post-Match Surveys: Comprehensive feedback system after matches
- Statistics Tracking: Win/loss ratios, match history, and performance trends
- Achievement System: Badges and rewards for various accomplishments
- Performance Insights: Visual charts and progress tracking
- Dark/Light Themes: Automatic theme switching based on system preferences
- Smooth Animations: Fluid transitions and micro-interactions
- Responsive Design: Optimized for all screen sizes
- Intuitive Navigation: Tab-based navigation with clear information hierarchy
- Accessibility: Screen reader support and high contrast modes
- Firebase Authentication: Secure user registration and login
- Google Sign-in: One-tap authentication with Google accounts
- Password Recovery: Secure password reset functionality
- User Profiles: Customizable profile information and settings
Overview of team performance and upcoming matches.
Setup and configure new match lobbies.
Find and join existing team lobbies with ease.
Real-time tactical adjustments and player positioning.
Detailed information about current match status.
Individual player stats and information card.
In-depth analysis of game statistics.
📱 React Native 0.81.4
🎨 Expo 54.0.10
⚡ TypeScript 5.9.2
🎯 Expo Router 6.0.8
🎭 React Navigation 7.1.6
🎨 Lucide React Native (Icons)
📱 React Native Reanimated 4.1.0
🎭 Lottie React Native (Animations)
🚀 Express.js 4.18.2
🔥 Firebase Admin SDK 12.0.0
📊 Firestore Database
🌐 CORS Support
🔧 TypeScript 5.3.3
🔧 Babel (Transpilation)
📦 Metro (Bundler)
🎨 ESLint (Code Quality)
🏷️ TypeScript (Type Safety)
📱 Expo CLI (Development)
🔥 Firebase (Authentication & Database)
📱 Google Fonts (Typography)
🎨 Expo Vector Icons
📱 Async Storage (Local Storage)
🌐 React Native WebView
Tactix/
├── 📱 tactixMain/ # Main React Native App
│ ├── 🎨 app/ # App screens and navigation
│ │ ├── (auth)/ # Authentication screens
│ │ ├── (tabs)/ # Main app tabs
│ │ └── (register)/ # Registration flow
│ ├── 🧩 components/ # Reusable UI components
│ │ ├── animated/ # Animation components
│ │ ├── custom/ # Custom UI elements
│ │ ├── dashboard/ # Dashboard components
│ │ ├── friends/ # Friend management
│ │ ├── match/ # Match-related components
│ │ ├── survey/ # Post-match survey
│ │ └── Profile/ # Profile components
│ ├── 🔧 hooks/ # Custom React hooks
│ ├── 🌐 services/ # API and service layer
│ ├── 📊 context/ # React Context providers
│ ├── 🎨 constants/ # App constants and themes
│ ├── 📈 data/ # Mock data and utilities
│ └── 📝 types/ # TypeScript type definitions
│
├── 🖥️ server/ # Express.js Backend
│ ├── 🔧 src/
│ │ ├── config/ # Firebase configuration
│ │ ├── routes/ # API routes
│ │ ├── types/ # Server type definitions
│ │ └── index.ts # Server entry point
│ └── 📦 package.json # Server dependencies
│
└── 📚 README.md # Project documentation
- Node.js (>= 18.0.0)
- npm or yarn
- Expo CLI
- Firebase project setup
- iOS Simulator (for iOS development)
- Android Studio (for Android development)
-
Clone the repository
git clone <repository-url> cd Tactix
-
Install mobile app dependencies
cd tactixMain npm install -
Install server dependencies
cd ../server npm install -
Firebase Setup
- Create a Firebase project
- Enable Authentication and Firestore
- Download
serviceAccount.jsontoserver/directory - Update Firebase config in
tactixMain/services/firebaseConfig.ts
-
Start the development server
# Terminal 1: Start the backend server cd server npm run dev # Terminal 2: Start the mobile app cd tactixMain npm start
# iOS
npm run ios
# Android
npm run android
# Web
npm run web- Sign up with email/password or Google
- Complete your player profile
- Set your position and initial preferences
- Navigate to the Match tab
- Tap "Host Match"
- Fill in match details (name, location, time, formation)
- Share the generated match code with friends
- Enter a match code in the "Join Match" section
- View match details and current players
- Wait for the host to start the match
- Go to the Friends tab
- Search for players by name or position
- Add friends to your network
- View their profiles and statistics
- Complete post-match surveys after games
- Rate teammates on various skills
- View your statistics and achievements
- Track your performance trends
- Primary: Dynamic blue tones for main actions
- Secondary: Green accents for success states
- Warning: Orange for attention-grabbing elements
- Error: Red for error states and warnings
- Neutral: Gray scale for text and backgrounds
- Headings: Space Grotesk (Bold, Medium)
- Body: JetBrains Mono (Regular)
- UI Elements: Inter (Regular, Medium, Bold)
- Special: Kalam (Badges and highlights)
- Cards: Rounded corners with subtle shadows
- Buttons: Multiple variants (primary, outline, ghost)
- Inputs: Clean design with focus states
- Navigation: Tab-based with clear hierarchy
Create a .env file in the server directory:
PORT=3000
FIREBASE_PROJECT_ID=tact-7ffd0
FIREBASE_PRIVATE_KEY=your-private-key
FIREBASE_CLIENT_EMAIL=your-client-emailUpdate tactixMain/config/api.ts:
export const API_BASE_URL = 'http://localhost:3000'; // Development
// export const API_BASE_URL = 'https://your-production-url.com'; // Production- Player profile overview
- Statistics and achievements
- Quick access to recent matches
- Create/join match interface
- Live match status
- Team formation visualization
- Player directory
- Friend management
- Search and filtering
- Post-match surveys
- Skill assessment
- Statistics visualization
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow TypeScript best practices
- Use meaningful commit messages
- Test on both iOS and Android
- Ensure accessibility compliance
- Update documentation for new features
⚽ Bringing football players together ⚽