FIFA Stats - Soccer Statistics & Community Platform

A comprehensive React application for interactive soccer statistics, player/team comparisons, match ratings, and community discussions.

Overview

FIFA Stats is a full-featured web application that combines data visualization, player/team comparisons, match rating systems with trend analysis, and community discussions for soccer fans. The application uses React with modern hooks, context API for state management, and includes a complete mock data system using localStorage (easily replaceable with a backend API).

Features

• User Authentication: Complete registration and login system with protected routes (mock authentication using localStorage)
• Match Rating System: Rate players during matches with interactive 5-star ratings
• Rating Trend Visualization: Beautiful line charts showing player rating trends over time
• Match Comments: Comment system for discussing matches with other users
• Player Comparison: Side-by-side player statistics with radar chart visualization
• Team Comparison: Compare team performance metrics with visual charts
• Data Import: CSV file upload and parsing with preview functionality
• Community Forum: Discussion boards with topic filtering and post creation
• User Profiles: Personal profiles with activity statistics
• Responsive Design: Modern, beautiful UI that works seamlessly across desktop and mobile devices

Quick Start

1. Install dependencies:

   npm install

2. Start development server:

   npm start

3. Open http://localhost:3000 in your browser

Note: This application uses mock data stored in localStorage. No backend server is required. All data persists in the browser's local storage.

Project Structure

fifa-stats/
├── src/
│   ├── components/          # Reusable components
│   │   ├── auth/           # Login, Register, ProtectedRoute
│   │   ├── common/         # Header, Footer, shared UI
│   │   ├── community/      # Discussion boards
│   │   ├── data/           # Import, Preview, Upload
│   │   ├── rating/         # Rating panels and displays
│   │   └── visualization/  # Charts and stats cards
│   ├── pages/              # Main page components
│   │   ├── Home.jsx
│   │   ├── Dashboard.jsx
│   │   ├── PlayerComparison.jsx
│   │   ├── TeamComparison.jsx
│   │   ├── Matches.jsx      # Match ratings with trend visualization
│   │   ├── Community.jsx
│   │   └── Profile.jsx
│   ├── context/            # Global state management
│   │   ├── AuthContext.jsx
│   │   └── DataContext.jsx
│   ├── services/           # Data services (mock implementation)
│   │   ├── api.js          # Axios configuration (for future backend)
│   │   ├── auth.service.js # Authentication service (localStorage)
│   │   └── data.service.js # Data, matches, ratings, comments (localStorage)
│   ├── hooks/              # Custom React hooks
│   ├── utils/              # Helper functions
│   └── App.jsx             # Main app component
├── public/
├── package.json
├── PROJECT_STRUCTURE.md    # Detailed structure guide
├── SETUP_GUIDE.md          # Complete setup instructions
└── README.md               # This file

Core Concepts

1. Context-Based State Management

The app uses React Context for global state:

• AuthContext: Manages user authentication
• DataContext: Handles data import and comparison state

2. Service Layer

All data operations are centralized in service files (currently using localStorage):

• auth.service.js: Authentication operations (register, login, token verification)
• data.service.js: Data management, matches, player ratings, comments, and trends

3. Protected Routes

Pages requiring authentication are wrapped with ProtectedRoute component, which automatically redirects unauthenticated users to login.

4. Component Organization

Components are organized by feature:

• auth/: Authentication components
• data/: Data import and management
• visualization/: Charts and statistics display
• rating/: Rating submission and display
• community/: Social features

Key Components

Authentication

• Login.jsx: User login form
• Register.jsx: User registration with validation
• ProtectedRoute.jsx: Route protection wrapper

Data Management

• DataImport.jsx: CSV file upload interface
• DataPreview.jsx: Preview imported data

Visualization

• RadarChart.jsx: Hexagonal comparison chart for players/teams
• StatsCard.jsx: Statistics display card

Match Ratings

• Matches.jsx: Match listing and detail pages
• RatingLineChart.jsx: Line chart showing rating trends over time
• Interactive 5-star rating system for players during matches

Customization Guide

Adding a New Page

1. Create component in src/pages/:

// src/pages/NewPage.jsx
import React from 'react';

const NewPage = () => {
  return <div>New Page Content</div>;
};

export default NewPage;

2. Add route in App.jsx:

<Route 
  path="/new-page" 
  element={
    <ProtectedRoute>
      <NewPage />
    </ProtectedRoute>
  } 
/>

Adding a New API Endpoint

1. Open appropriate service file
2. Add new method:

async newMethod(params) {
  try {
    const response = await api.get('/endpoint', { params });
    return response.data;
  } catch (error) {
    throw new Error(error.response?.data?.message || 'Operation failed');
  }
}

Modifying Styles

Each component has a CSS file. Modify these to change appearance:

/* Component.css */
.component-container {
  padding: 2rem;
  background-color: #f5f5f5;
}

Data Storage

Currently, the application uses localStorage for all data persistence:

• User accounts and authentication
• Match data and player ratings
• Rating trends over time
• Comments on matches
• Imported CSV data

Migrating to a Backend

To connect to a real backend API:

1. Update src/services/auth.service.js to use actual API calls
2. Update src/services/data.service.js to use actual API calls
3. Configure src/services/api.js with your backend URL
4. Remove localStorage operations and replace with API calls

The service layer is designed to make this transition straightforward - simply replace the localStorage operations with API calls.

Development Workflow

1. Start development server: npm start
2. Make changes to components
3. Hot reload automatically updates
4. Test changes in browser
5. Build for production: npm run build

Code Style

• Use double spaces for indentation (tab = 2 spaces)
• Follow React best practices
• Use functional components with hooks
• Keep components focused and reusable
• Write clear, descriptive variable names

Documentation

• PROJECT_STRUCTURE.md: Detailed project architecture
• SETUP_GUIDE.md: Installation and setup instructions
• COMPONENT_TEMPLATE.jsx: Template for new components

Key Features in Detail

Match Rating System

• View all matches with scores and dates
• Rate individual players during matches (1-5 stars)
• See your personal ratings for each player
• View average ratings from all users
• Line chart visualization showing how ratings change over time
• Color-coded trends (green for high ratings, yellow for medium, red for low)

Rating Trends

The line chart visualization provides:

• Smooth line connecting all rating data points
• Filled area under the line for visual emphasis
• Grid lines for reference (1-5 stars)
• Interactive hover tooltips showing rating and date
• Automatic color coding based on average rating

Community Features

• Topic-based discussion forums
• Create and view posts
• Like and comment on posts
• Filter by topics (players, teams, matches, predictions)

Technology Stack

• React 18.2.0: Modern React with hooks
• React Router 6.20.0: Client-side routing
• Chart.js 4.4.0: Chart visualization library
• Axios 1.6.2: HTTP client (configured for future backend)
• localStorage: Current data persistence solution

Next Steps

1. Connect to a backend API (replace localStorage with API calls)
2. Add more visualization types
3. Implement real-time notifications
4. Add comprehensive testing (Jest, React Testing Library)
5. Optimize performance (code splitting, lazy loading)
6. Add PWA features (offline support, installable)
7. Enhance mobile experience

Support

For questions or issues:

1. Check SETUP_GUIDE.md for detailed instructions
2. Review component documentation
3. Examine existing components for examples

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is provided as-is for educational and development purposes.

Screenshots

• Home Page: Beautiful hero section with feature cards
• Dashboard: Quick actions and statistics overview
• Match Ratings: Interactive player rating with trend visualization
• Player Comparison: Side-by-side radar charts
• Community: Topic-based discussion forums

---

Built with ❤️ using React