What is this?
A Vue3 + Pinia clone of Douyin (TikTok), built to showcase best practices for using Vue on mobile with a native-app-like smooth short-video feed.
A Vue3 + Pinia clone of Douyin (TikTok), built to showcase best practices for using Vue on mobile with a native-app-like smooth short-video feed.Is this a real app that talks to Douyin's servers, or just a frontend demo?It's a pure frontend demo: all data lives locally in JSON, and axios-mock-adapter intercepts API calls to simulate a real backend response.
It's a pure frontend demo: all data lives locally in JSON, and axios-mock-adapter intercepts API calls to simulate a real backend response.How do I run it locally?Clone the repo with git (not a zip download), then run the Vite dev server; you can also deploy it to Vercel or build/run it via the included Docker image.
Clone the repo with git (not a zip download), then run the Vite dev server; you can also deploy it to Vercel or build/run it via the included Docker image.Do I need a Douyin API key or any backend credentials?No — there's no real Douyin API integration; all video/user data is pre-baked into local JSON mocks served through axios-mock-adapter.
No — there's no real Douyin API integration; all video/user data is pre-baked into local JSON mocks served through axios-mock-adapter.Any gotchas when previewing it in the browser?You must switch the browser into mobile device mode (F12, then Ctrl+Shift+M) to see it properly, since it's built as a mobile-only layout; it's also explicitly intended for learning/research, not commercial use.
You must switch the browser into mobile device mode (F12, then Ctrl+Shift+M) to see it properly, since it's built as a mobile-only layout; it's also explicitly intended for learning/research, not commercial use.Does it only work on mobile devices?It runs in any browser but is designed as a mobile web layout, so you view it either on an actual phone or on desktop with mobile emulation enabled.
It runs in any browser but is designed as a mobile web layout, so you view it either on an actual phone or on desktop with mobile emulation enabled.What makes the scrolling feed feel so smooth compared to a typical web video list?The project implements an infinite vertical-swipe video feed and a custom Swiper-like carousel component from scratch, specifically tuned for mobile touch performance rather than using off-the-shelf heavy libraries.
The project implements an infinite vertical-swipe video feed and a custom Swiper-like carousel component from scratch, specifically tuned for mobile touch performance rather than using off-the-shelf heavy libraries.Does it have page transition animations like a native app?Yes, the project adds route transition animations and conditional route caching so navigating between pages feels app-like, similar to how traditional news sites cache list views.
Yes, the project adds route transition animations and conditional route caching so navigating between pages feels app-like, similar to how traditional news sites cache list views.Is there a published write-up explaining how it was built?The author published a companion blog series covering the carousel component, infinite scroll, route transitions, route caching, responsive mobile sizing with rem/vh, and the CI/CD deployment pipeline.
The author published a companion blog series covering the carousel component, infinite scroll, route transitions, route caching, responsive mobile sizing with rem/vh, and the CI/CD deployment pipeline.How is it deployed and kept up to date?GitHub Actions workflows automatically deploy to GitHub Pages, sync to Gitee Pages, translate the README, and build a Docker image on changes.
GitHub Actions workflows automatically deploy to GitHub Pages, sync to Gitee Pages, translate the README, and build a Docker image on changes.What are similar projects?TikTokDownloader, soybean-admin, vue2-elm, vue-pure-admin, vue-manage-system, it-tools, downvid, newbee-mall
TikTokDownloader, soybean-admin, vue2-elm, vue-pure-admin, vue-manage-system, it-tools, downvid, newbee-mallWhich topics is it in?pinia, short-video, mock, mobile-web, single-page-app, douyin, tiktok, js, vue3, gpl, github-actions, vite
pinia, short-video, mock, mobile-web, single-page-app, douyin, tiktok, js, vue3, gpl, github-actions, vite