Build a Fully Open‑Source Bilibili Clone with SpringBoot and Vue

System Demo

Several screenshots illustrate the homepage, creation center, video audit, video detail page, search page, personal center, and message center of the Bilibili‑style platform.

Functional Requirements

2.1 Core Video Module

Video Playback System

Supports MP4, HLS, DASH formats

Multiple quality switching (360P/720P/1080P/4K)

Player controls (play/pause/progress/volume/fullscreen)

Danmu system (real‑time/top/bottom/color/advanced)

Play history and resume

Video Upload & Management

Chunked upload with breakpoint resume

Transcoding for multiple resolutions

Video metadata editing (title, description, tags, category)

Cover image upload and cropping

Manuscript management and data statistics

2.2 User System

User Authentication

Phone/email registration and login

Third‑party login (WeChat, QQ, Weibo)

Password recovery and change

Optional real‑name verification

Personal Center

User homepage (activity, submissions, favorites)

Level growth system

Coin and experience system

Follow/follower lists

Message notification center

2.3 Content Interaction System

Comment System

Multi‑level reply comments

Like/dislike

Hot comment sorting

Comment management (author delete, user report)

Interaction Features

Like, favorite, coin, share

Follow UP creators

Charging (tip) system

Private messaging

2.4 Community Features

Dynamic System

Image‑text dynamic publishing

Video dynamic sharing

Forward, comment, like

Follow dynamic timeline

Partitions & Categories

Main partitions (animation, game, knowledge, etc.)

Tag system

Hot ranking list

Personalized recommendation

2.5 Creation Incentives

Creator Center

Data dashboard (views, fan growth)

Earnings statistics

Creation academy (tutorials, activities)

Creator certification application

2.6 Social Features

Live Streaming (simplified)

Live push and watch

Danmu interaction

Gift system

Live room management

Community Functions

Fan groups

Support ranking

Exclusive content for UP fans

2.7 Mobile Features

APP Functions

Portrait short‑video mode

Gesture operations (double‑tap like, swipe switch)

Offline caching

Push notifications

2.8 Backend Management System

Content Review

Video review queue

Danmu filtering

User report handling

Sensitive word filtering

Operations Management

Homepage recommendation management

Ad slot management

Data statistics and analysis

User management

Technical Stack

Frontend Stack

Web

Framework: Vue 3 + TypeScript (or React 18 + TypeScript)

UI component library: Element Plus / Ant Design Vue + custom components

Player options: video.js + danmaku.js (customized) or self‑built Canvas/WebGL player

State management: Pinia (Vue) or Redux Toolkit (React)

Build tools: Vite + Webpack

Danmu system: WebSocket + Canvas rendering

Mobile

Native development: Flutter (recommended cross‑platform) or React Native

Or native Android (Kotlin) + iOS (Swift)

Player: ijkplayer (Android), PLPlayerKit (iOS)

Backend Stack

Core Service Layer

Framework: Java SpringBoot

API Gateway: Kong / Apache APISIX

Microservice governance: Consul / Nacos + gRPC

Database Layer

Relational: MySQL 8.0 + Vitess (sharding)

Cache: Redis 7 (cluster mode)

Time‑series: InfluxDB (statistical analysis)

Search: Elasticsearch 8.x (video search)

Graph DB: Neo4j (recommendation system)

Video Processing & Storage

Processing Pipeline 上传 → 转码 → 审核 → 分发 Transcoding Service : FFmpeg + NVIDIA GPU acceleration

Task Queue : Celery (Python) or Go asynchronous processing

Storage Options

Object storage: MinIO (self‑hosted) or Alibaba Cloud OSS / Tencent Cloud COS

CDN acceleration: self‑built CDN or Cloudflare / Tencent Cloud CDN

Hot‑cold separation: SSD for hot videos, HDD for cold videos

Danmu & Real‑time Interaction

Instant messaging: WebSocket cluster (Socket.IO / SignalR)

Message queue: RabbitMQ / Kafka (danmu distribution)

Real‑time computation: Apache Flink (hot list calculation)

Deployment

Database

Only the category table contains built‑in data; other tables are empty.

After registering a new user, modify the user table's role field to 1 or 2 to grant admin rights.

Avoid direct modifications to other tables to keep MySQL, Redis, and Elasticsearch data consistent.

Backend

The project uses Aliyun OSS for video storage; local upload code is commented out. Using OSS is recommended for simplicity and cost‑effectiveness.

Elasticsearch version is 7.17.16; change the version in pom.xml if needed. Index creation can be run via the ApplicationTests.createIndex method.

Configuration resides in application.yml. Do not place settings in application.properties. Fill in placeholders marked with *** with your server information.

Netty service listens on port 7071; modify the IMServer class to change it.

To start the backend:

1. Download Maven dependencies
2. Run BackendApplication

Frontend

The carousel images are hard‑coded in carousel.json; replace them with your own resources.

Icon libraries can be sourced from Alibaba Vector Icon Library; custom icons may change over time.

Ensure the proxy port matches the backend by editing vue.config.js and .env.development.

To start the frontend:

npm install
npm run serve

Code Acquisition

Obtain the full source code by following the author’s other public account and replying with the keyword “仿B站”.