Magical Lineup ⚽

Magical Lineup is a clean, modern, offline-first React Native mobile application that lets football (soccer) coaches, players, and fans easily build, customize, save, and share tactical team lineups.

---

💡 About the Project

The core idea of Magical Lineup is simplicity and total user privacy:

• No Backend Required: Everything runs 100% on the client side. Your custom lineups, player details, coach settings, and pitch preferences are stored securely on your device using @react-native-async-storage/async-storage.
• Fast & Responsive: Built with React Native and Expo, providing a native mobile experience on both Android and iOS without server latency or user authentication required.

---

📋 Features

• Tactical Formations: Choose from popular tactical setups (4-3-3, 4-4-2, 3-5-2, 4-2-3-1, 5-3-2, etc.).
• Custom Kits & Players: Customize player names, position labels, and primary/secondary team kit colors using an interactive color picker.
• Pitch Customizer: Change pitch styles (Grass, Futsal, Wood, Dark) and turf patterns (Stripes, Circular, Grid, Clean).
• Local Storage: Save and manage your favorite lineups directly on your device.
• Instant Image Sharing: Snapshot your visual tactical pitch into high-quality images and share them via WhatsApp, Instagram, or native device sharing.
• Multilingual: Native internationalization support (i18n) for multiple languages.

---

About Expo

This project is built using Expo, an open-source platform and framework built around React Native.

Why Expo?

• Cross-Platform: Write code once in TypeScript/JavaScript and run natively on Android, iOS, and Web.
• Expo Router: File-based routing system for smooth navigation.
• Expo Go App: Test your app live on physical devices instantaneously by scanning a QR code, without needing to setup heavy native IDEs for quick testing.

---

🛠️ How to Run Locally

Prerequisites

Ensure you have the following installed on your machine:

• Node.js (v18 or newer recommended)
• npm or yarn
• Optional: Expo Go app installed on your physical mobile device (available on App Store and Google Play Store), or Xcode / Android Studio for running simulators.

1. Install Dependencies

In the project root directory, install all required npm packages:

npm install

2. Start the Development Server

Launch the Expo development server:

npx expo start

(or npm start)

3. Open the App

Once the Expo CLI starts in your terminal, you can choose how to view the app:

• Physical Device: Open the Expo Go app on your phone and scan the QR code displayed in your terminal.
• Android Emulator: Press a in the terminal (requires Android Studio / ADB set up).
• iOS Simulator: Press i in the terminal (macOS + Xcode required).
• Web Browser: Press w to launch in your browser.

---

Project Structure

magical-lineup/
├── app/                  # Expo Router screens & file-based routes
│   ├── (tabs)/           # Main tab screens (Home, Lineup Builder, Saved, Settings)
│   ├── saved/[id].tsx    # Dynamic route for viewing a saved lineup
│   └── _layout.tsx       # Root layout provider & navigation wrapper
├── components/           # Reusable UI components (Pitch, Player, StatCard, etc.)
├── constants/            # Formations, tactics, themes, and colors
├── hooks/                # Custom React hooks (useShareLineup, etc.)
├── i18n/                 # Translation & localization files
└── utils/                # Utility helpers for pitch styling & formatting

---

📄 License

This project is open-source and available under the MIT License.