Rebuilding TikTok with api.video, PWA, Next.js and Typescript 🎵

An open-source example application that allows users to list and upload videos in the TikTok style using api.video

View Demo

Table of Contents

1. About The Project
2. Getting Started
   • Step 1. Clone
   • Step 2. Get API Key by creating an account
   • Step 3. Get your token for delegated uploads
   • Step 4. Set Up Environment Variables

About The Project

api.video:

• 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.

NextJS:

• /pages/api routes — 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.

Getting Started

Step 1. Clone

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

Step 2. Get API Key by creating an account

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.

Step 3. Get your token for delegated uploads

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.

Step 4. Set Up Environment Variables

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.local

Then 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