An open-source example application that allows users to list and upload videos in the TikTok style using api.video
View Demo
- Get videos: @api.video/nodejs-client - api.video's Node.js is a lightweight client built in TypeScript that streamlines the coding process. Chunking files is handled for you, as is pagination and refreshing your tokens.
- Display videos: @api.video/react-player - A React component for playing api.video videos.
- Upload videos: @api.video/video-uploader - Typescript library to upload videos to api.video using delegated upload token (or usual access token) from the front-end.
/pages/apiroutes — a couple endpoints for making requests to the api.video API.- client-side cache library swr.
- Usage of next-pwa to transform the Next.js app into a PWA.
First we need to clone the project
git@github.com:apivideo/tiktok_clone.git
cd tiktok_clone
# install deppedencies
npm install
# or
yarn install
# run the development server
npm run dev
# or
yarn dev
All you need to set this up is a api.video account. You can sign up for free. You can use our services in sandbox environment but the videos you upload will last 24 hours.
Once you signed up, you will have a sandbox API Key available on the home page.
Go to the api.video's dashboard. Go to upload token section and then create a new one. In case of interrogations follow this guide.
In order to see your videos by default, all you have to do is to use your API Key and an upload token. You need to create a environment variable at the root of the project.
touch .env.localThen edit the file like API_KEY should be your API_KEY available on the dashboard and NEXT_PUBLIC_UPLOAD_TOKEN your upload token
API_KEY = XXXXXXXXXXXXXXXXXXXXXXXXXXX
NEXT_PUBLIC_UPLOAD_TOKEN = XXXXXXXXXXXXXXXXXXXXXXXXXXX