PSL NextGen Web

A cinematic, interactive PSL (Pakistan Super League) web experience built with Flutter 3. This is a fully functional web application featuring team management, match schedules, trivia games, AI analysis, and an integrated shop.

🚀 Features

Core Features

• Interactive Home Dashboard - Welcome screen with feature overview and PSL statistics
• Team Management - Explore all 6 PSL teams with detailed information and team switching
• Match Schedule - View upcoming, live, and completed matches with real-time updates
• Interactive Trivia - Test your PSL knowledge with a fully functional quiz system
• AI Analysis - Performance insights with charts and data visualization
• Shop Experience - Browse and purchase official PSL merchandise
• Settings Panel - Customize themes, teams, and app preferences

Technical Features

• Responsive Design - Optimized for desktop and mobile web browsers
• Dynamic Theming - Team-specific color schemes with smooth transitions
• Glass Morphism UI - Modern design with glassmorphic navigation elements
• Smooth Animations - Flutter Animate powered transitions and effects
• State Management - Provider-based state management for theme and team preferences
• Modular Architecture - Clean, scalable code structure

🎨 Design Highlights

• Team-Specific Theming - Each PSL team has its own color palette and visual identity
• Aurora Background Effects - Dynamic background animations in national mode
• Glass Navigation - Beautiful glassmorphic navigation rail and bottom bar
• Animated Transitions - Smooth page transitions and element animations
• Dark/Light Mode - Full theme mode support with team color integration

🏏 Supported Teams

1. Lahore Qalandars - Green & Gold theme
2. Karachi Kings - Blue & Gold theme
3. Islamabad United - Red & Gold theme
4. Multan Sultans - Teal & Green theme
5. Peshawar Zalmi - Yellow & Navy theme
6. Quetta Gladiators - Purple & Gold theme

🛠️ Getting Started

Prerequisites

• Flutter SDK (>=3.3.0)
• Dart SDK (included with Flutter)
• Chrome or any modern web browser

Installation

1. Clone the repository:

   git clone <repository-url>
   cd psl_nextgen_web_standalone

2. Install dependencies:

   flutter pub get

3. Run the application:

   flutter run -d chrome

Building for Production

Web Build:

flutter build web --release

The built files will be in the build/web directory and can be deployed to any web hosting service.

📁 Project Structure

lib/
├── main.dart                 # App entry point
├── app/
│   ├── psl_app.dart         # Main app widget
│   └── router.dart          # Go Router configuration
├── core/
│   ├── providers/
│   │   └── theme_controller.dart  # Theme and team state management
│   ├── theme/
│   │   └── team_palette.dart      # Team color definitions
│   └── widgets/
│       └── psl_shell.dart         # Main app shell with navigation
└── features/
    ├── home/                # Home dashboard
    ├── teams/               # Team exploration
    ├── schedule/            # Match schedules
    ├── trivia/              # Quiz functionality
    ├── ai_analysis/         # Performance analytics
    ├── shop/                # Merchandise store
    └── settings/            # App configuration

🎮 Features Overview

Home Page

• Welcome dashboard with feature cards
• PSL statistics and highlights
• Quick team switching
• Animated feature grid

Teams Page

• Interactive team selection
• Team-specific information and statistics
• Dynamic color theming
• Team details with historical data

Schedule Page

• Tabbed interface (Upcoming/Live/Completed)
• Match cards with team information
• Venue and timing details
• Live score updates (simulated)

Trivia Page

• 5-question PSL knowledge quiz
• Multiple choice questions
• Real-time scoring
• Results screen with performance feedback

AI Analysis Page

• Performance metrics and charts
• Team statistics visualization
• AI-powered insights
• Exportable reports

Shop Page

• Categorized merchandise (Jerseys, Accessories, Equipment, Collectibles)
• Product cards with ratings and reviews
• Team-themed shopping experience
• Add to cart functionality

Settings Page

• Theme mode toggle (Dark/Light)
• Team preference selection
• National mode toggle
• App configuration options

🔧 Dependencies

Core Dependencies

• flutter: SDK framework
• provider: State management
• go_router: Navigation and routing
• google_fonts: Typography (Montserrat)

UI & Animation

• flutter_animate: Smooth animations and transitions
• rive: Vector animations (ready for integration)
• lottie: Lottie animations (ready for integration)

Data & Charts

• fl_chart: Data visualization and charts
• http: HTTP requests for future API integration
• shared_preferences: Local storage

Utilities

• intl: Internationalization support
• flutter_markdown: Markdown rendering
• pdf & printing: PDF generation capabilities

🚀 Deployment

Web Deployment

1. Build the project: flutter build web --release
2. Deploy the build/web folder to your hosting service
3. Configure your web server to serve the files

Recommended Hosting

• Firebase Hosting - Easy Flutter web deployment
• Netlify - Drag and drop deployment
• Vercel - Git-based deployment
• GitHub Pages - Free hosting for public repos

🎯 Future Enhancements

• Real API Integration - Connect to live PSL data feeds
• User Authentication - User accounts and preferences
• Social Features - Share scores and team support
• Push Notifications - Match alerts and updates
• Offline Support - PWA capabilities
• Multi-language Support - Urdu and English localization

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🏆 Acknowledgments

• Pakistan Super League for inspiration
• Flutter team for the amazing framework
• All PSL teams and their passionate fans

---

Built with ❤️ for PSL fans worldwide