mpacmphase2 - john tran

phase 2 project of acm mentorship program

Comment

FC Barcelona Player Performance Analysis

Live Demo

Inspiration

As an aspiring data analyst with a passion for sports, I wanted to explore how data analysis can be applied to football by examining player performance at clubs like FC Barcelona, uncovering trends, and evaluating the impact of players across different positions. This project brings together my interests in both analytics and the game itself.

Languages/frameworks used

  • Python
  • React.js
  • HTML/CSS

What It Does

This project analyzes and visualizes player performance for Barcelona during the 2025–2026 Champions League season. It:

  • Groups players by position:
    • Attackers → goals, shots, shots on target
    • Midfielders → assists, passes, pass accuracy
    • Defenders → tackles, fouls, successful tackles
    • Goalkeepers → saves, goals conceded, clean sheets
  • Compares Barcelona players with players from other Champions League teams
  • Highlights top performers and trends
  • Displays results in an interactive web application

Deliverables

Deliverable #1 — Data Analysis (Python)

  • Organized player data into groups by position (attackers, midfielders, defenders, goalkeepers)
  • Calculated averages for key stats like goals, assists, pass accuracy, tackles, and saves
  • Compared FC Barcelona players to players from other teams
  • Exported processed results into a structured results.json file

Deliverable #2 — React Web App

  • Built an interactive app to display player stats
  • Loaded and displayed JSON data dynamically
  • Allowed users to filter players by team and position

Deliverable #3 — UI Design (HTML/CSS)

  • Designed a clean, structured layout for displaying stats
  • Styled tables/cards for readability
  • Implemented responsive design for mobile and desktop

How I built it

I built this project step by step, starting from raw data and ending with a fully interactive web app:

Step 1: Creating the Dataset (CSV)
I started by creating a CSV file containing player performance data, including stats like goals, assists, passes, tackles, and saves. This served as the foundation for the entire project.

Step 2: Loading and Structuring the Data (Python + DataFrames)
I used Python in VS Code with pandas DataFrames to load the CSV file and organize the data. Using DataFrames made it easier to filter, sort, and group players by position (attackers, midfielders, defenders, goalkeepers).

Step 3: Processing and Analyzing the Data
I performed calculations using DataFrame operations to compute averages and key metrics for each position. I also separated FC Barcelona players from other teams to compare their performance and identify differences.

Step 4: Exporting Data to JSON
After analyzing the data, I converted the processed results into a structured format and exported it as a results.json file. This allowed the data to be used in the frontend application.

Step 5: Building the React App
I created a React application and built components to display player stats in tables or cards. I used state to manage filters like team and position.

Step 6: Connecting Data to the Frontend
I loaded the results.json file into the React app and dynamically displayed the data. I added filtering and highlighting features to make the app interactive and easy to explore.

Step 7: Designing the UI (HTML/CSS)
Finally, I styled the app using HTML and CSS, focusing on readability, layout, and responsiveness so it works well on both desktop and mobile devices.

Challenges I ran into

  • Structuring data correctly across different player positions
  • Handling calculations like pass accuracy and avoiding division-by-zero errors
  • Keeping Barcelona vs. other teams’ data separate for accurate comparisons
  • Debugging JSON formatting issues
  • Understanding React state and dynamic UI updates
  • Mapping and rendering JSON data without errors
  • Styling with CSS and making the layout responsive

Accomplishments I’m proud of

  • Learning multiple technologies and connecting them into one project
  • Successfully comparing FC Barcelona players with other teams
  • Creating a clean and functional UI for exploring stats
  • Deploying a working live demo

What I learned

Technical Skills:

  • Python fundamentals (loops, conditionals, dictionaries)
  • Data processing and organization
  • JSON and how it connects backend to frontend
  • React basics (components, props, state)
  • Dynamic data rendering in a web app
  • HTML/CSS layout and responsive design

Soft Skills:

  • Breaking complex problems into smaller steps
  • Debugging and problem-solving
  • Learning through iteration and mentorship
  • Staying persistent when things don’t work immediately

What’s next for the project

  • Add advanced stats (e.g., expected goals, efficiency metrics)
  • Include more teams and multiple seasons
  • Add more charts and visualizations
  • Improve filtering and search functionality
  • Integrate real-time or frequently updated data
Share this project:

Updates