douyin

Douyin-Vue is a web application that recreates the look and feel of TikTok (known as Douyin in China) for mobile browsers. It is built as a learning and research project to demonstrate how to build a smooth, vertically scrolling short-video feed using modern web tools.

The project uses Vue 3, a JavaScript framework for building web interfaces, along with Vite for fast development builds and Pinia for managing application state. The video data is stored locally within the project rather than connecting to a real server, and a library called axios-mock-adapter intercepts network calls and returns that local data, simulating a real backend.

Features include the infinite vertical swipe scroll familiar from TikTok, page transition animations, conditional route caching (so previously visited pages load instantly, like navigating a traditional news site), and mobile-responsive layout using dynamic sizing techniques. The project also comes with a series of companion articles walking through how each feature was built.

It can be run locally by cloning the repository and running a few commands, or deployed quickly to platforms like Vercel or Docker. When running on a desktop computer, you need to switch the browser into mobile emulation mode to see the correct layout.

The project is licensed under GPL and is strictly for learning and research purposes, not commercial use. The video content shown in the demo comes from real public TikTok creators and images from a public social platform.