Bilibili Football

Tech Stack

Role

Full-stack Developer

Team Size

3

Duration

October 2023 - August 2024

Project Overview

Football live streaming system developed for Bilibili, including data visualization pages and animated live streaming pages. The system processes data based on Opta data sources, providing real-time match data, player statistics, tactical analysis, and supports embedding into various Bilibili platform scenarios. The project focuses on user experience and innovative data presentation, enhancing the viewing value of football content through rich visual effects.

Highlights

• Real-time football data visualization component library
• Canvas and WebGL-based animated match replay system
• Data-driven tactical analysis interface
• Responsive design adapted for multiple terminal devices
• Real-time WebSocket data update mechanism
• Customized theme supporting Bilibili brand style

Challenges

• Handling complex football data structures and real-time updates
• Optimizing rendering performance for large amounts of data
• Ensuring fluidity and accuracy of animation systems
• Meeting Bilibili's specific embedded scenario requirements

Solutions

• Designed modular data processing and display architecture
• Used virtualization technology to optimize long list performance
• Implemented hybrid Canvas rendering and GSAP animation technology
• Developed specialized embedding SDK for different scenarios