# Footbard ⚽ A comprehensive community-driven football league management platform that enables local communities to organize, track, and manage their football competitions with professional-grade features. ## 🚀 What is Footbard? Footbard is a modern web application designed to digitize and streamline local football league management. It provides communities with the tools they need to: - **Organize Multi-Community Leagues**: Create and manage multiple football communities with their own teams, players, and competitions - **Track Comprehensive Statistics**: Monitor player performance, team standings, match results, and detailed analytics - **Manage Teams & Players**: Handle team rosters, player transfers, join requests, and invitations - **Coordinate Matches**: Schedule fixtures, record live match events, submit results, and generate AI-powered match recaps - **Facilitate Community Engagement**: Share announcements, manage community moderation, and enable user interaction - **Provide Real-Time Analytics**: Generate insights on player performance, team statistics, and league standings ## 🎯 Key Features ### 🏆 League Management - **Multi-Community Support**: Host multiple independent football communities - **Flexible Team Structure**: Teams with customizable roles (Captain, Vice-Captain, Player) - **Competition Tracking**: Organize leagues with automated standings calculation - **Match Scheduling**: Comprehensive fixture management with status tracking ### 👥 Player & Team Management - **Player Profiles**: Detailed statistics including goals, assists, appearances, and performance ratings - **Team Rosters**: Dynamic team management with join requests and invitation system - **Transfer System**: Handle player movements between teams - **Role-Based Access**: Community moderators, admins, and super-admin controls ### 📊 Advanced Analytics - **Performance Metrics**: Player ratings, disciplinary records, and career statistics - **Interactive Charts**: Visual representation of statistics using Recharts - **AI Match Recaps**: Automated match summaries powered by Google Gemini AI - **MVP Voting**: Community-driven player recognition system ### 💻 Modern User Experience - **Responsive Design**: Mobile-first approach with Tailwind CSS - **Dark Sports Theme**: Professional UI with glassmorphism effects - **Real-Time Updates**: Live match tracking and instant notifications - **Drag & Drop**: Intuitive formation and lineup management ## 🛠️ Technology Stack | Category | Technology | Purpose | |----------|-----------|---------| | **Framework** | Next.js 16 (App Router) | Full-stack React framework with server-side rendering | | **Language** | TypeScript 5 | Type-safe development and better developer experience | | **Database** | PostgreSQL + Prisma ORM | Relational database with type-safe queries | | **Authentication** | NextAuth.js v4 | Secure user authentication with JWT tokens | | **Styling** | Tailwind CSS v4 | Utility-first CSS framework for rapid UI development | | **UI Components** | Custom + Lucide Icons | Reusable component library with consistent design | | **Animations** | Framer Motion | Smooth animations and micro-interactions | | **Charts** | Recharts | Interactive data visualization | | **AI Integration** | Google Gemini API | AI-powered match recap generation | | **File Management** | ImageKit | Optimized image upload and delivery | | **Email** | Nodemailer | Notification and communication system | | **Drag & Drop** | @dnd-kit | Interactive formation and lineup management | ## 🏗️ How It Was Built ### Architecture Decisions **1. Full-Stack Next.js Application** - Chose Next.js App Router for its file-based routing and server-side capabilities - Implemented API routes for backend functionality within the same codebase - Utilized React Server Components for optimal performance **2. Type-Safe Development** - TypeScript throughout the entire codebase for compile-time error checking - Prisma generates type-safe database client from schema - Custom type definitions for NextAuth integration **3. Database Design** - Prisma ORM for database management with migration support - PostgreSQL for robust relational data handling - Normalized schema supporting multi-tenancy and complex relationships **4. Authentication & Authorization** - NextAuth.js for secure authentication flows - Role-based access control (USER, COMMUNITY_MOD, ADMIN, SUPER_ADMIN) - JWT tokens with session management ### Development Process **Phase 1: Foundation Setup** ```bash # Project initialization npx create-next-app@latest footbard --typescript --tailwind --app cd footbard # Core dependencies installation npm install prisma @prisma/client next-auth @auth/prisma-adapter npm install bcryptjs framer-motion react-toastify recharts ``` **Phase 2: Database Schema Design** - Designed comprehensive database schema covering all entities - Implemented relationships between users, communities, teams, players, and matches - Added support for complex features like match events, standings, and statistics **Phase 3: Authentication System** - Configured NextAuth with credentials provider - Implemented secure password hashing with bcryptjs - Created protected routes with middleware **Phase 4: Core Features Development** - Built dashboard with overview statistics - Implemented team and player management - Created match center with live event tracking - Developed standings calculation system **Phase 5: Advanced Features** - Integrated AI match recaps using Google Gemini - Added file upload capabilities with ImageKit - Implemented email notifications with Nodemailer - Created responsive UI components and animations ## 🚀 Getting Started ### Prerequisites - Node.js 18+ - PostgreSQL database - Google Gemini API key (for AI features) - ImageKit account (for file uploads) - SMTP email service ### Installation ## Project Structure ``` src/ ├── app/ │ ├── (auth)/ # Login & Register pages │ ├── (dashboard)/ # Dashboard layout + all dashboard pages │ │ └── dashboard/ │ │ ├── page.tsx # Overview │ │ ├── teams/ # Teams management │ │ ├── players/ # Players + [id] profiles │ │ ├── matches/ # Matches + [id] match center │ │ ├── competitions/ # Competition management │ │ ├── standings/ # League table │ │ ├── stats/ # Statistics & charts │ │ ├── announcements/ # Community announcements │ │ └── settings/ # Account settings │ ├── api/ # All API routes │ ├── layout.tsx # Root layout with providers │ └── page.tsx # Landing page ├── components/ │ ├── dashboard/ # Sidebar, Topbar, MobileNav │ ├── match/ # FootballPitch, EventTimeline │ ├── ui/ # Button, Modal, Badge, StatCard, etc. │ └── providers.tsx # Session + Toast providers ├── lib/ # Prisma, Auth, Email, ImageKit, Gemini, Standings ├── types/ # NextAuth type augmentation └── middleware.ts # Route protection ``` --- ## Features - **Dashboard Overview** — Stat cards, league activity chart, top scorers, recent matches - **Team Management** — Create teams, view player rosters - **Player Profiles** — Performance radar chart, match ratings, discipline tracking - **Match Center** — Live scores, event timeline, formation/lineup view, AI recap, MVP voting - **Standings** — Full league table with responsive mobile cards - **Statistics** — Top scorers, assists, ratings with interactive charts - **Announcements** — Community news feed with create modal - **Settings** — Profile, security, notification preferences, theme selection - **Auth** — Secure registration/login with bcrypt password hashing - **Middleware** — Automatic redirect to login for protected routes --- ## Deployment ### Vercel (Recommended) 1. Push to GitHub 2. Import in [Vercel](https://vercel.com) 3. Add all environment variables 4. Deploy ### Docker ```dockerfile FROM node:20-alpine WORKDIR /app COPY package*.json ./ RUN npm ci --legacy-peer-deps COPY . . RUN npx prisma generate RUN npm run build EXPOSE 3000 CMD ["npm", "start"] ``` --- ## License MIT This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. ## Learn More To learn more about Next.js, take a look at the following resources: - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! ## Deploy on Vercel The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. # footbard