Build your own TikTok with PWA and api.video

This tutorial will show how quick and straightforward it is to build a TikTok clone as a progressive web app (PWA) with api.video and Next.js. A PWA is a website that looks and behaves like a mobile app. It can have all the capabilities of a native mobile app, like design and functionality, and you can even install it on your phone!

TikTok’s core functionality is to create and share short-form content. So today, we will focus on these crucial features:

• Get videos with @api.video-node.js-client package
• Display videos with @api.video/react-player package
• Upload videos with @api.video-typescript-uploader package

Thanks to these 3 easy-to-use api.video tools, you will have everything you need to build a smooth scrolling TikTok feed. Let's start 🎬

NB: You can see the demo here and the complete code here. We invite you to clone the project, insert your free-to-use API key from our Sandbox environment and start testing it with your videos!

Quick Setup

As in this tutorial, we will focus on the core features. We provide two links on how to start the project easily:

We created a dedicated tutorial on building a new Next.js application using Create Next App and Typescript. Please follow these instructions to get an up-to-date Next.js app.

1. Transform the Next.js app into a PWA with next-pwa. Complete all steps with this article here.
2. Once inside our project, install api.video’s Node.js client, typescript video uploader, react’s player SDK, and swr for data fetching.

Get videos

Back-end: Create API routes with api.video/nodejs-client

You can declare the API under the pages/api directory. When you declare a file or folder inside pages/api, it will generate an URL endpoint that matches /api/<folder>/<file>. We set our API key in an environment variable in the .env.local file for security.

Now create a pages/api/videos/index.ts file. Inside this file, add the following code:

We can get videos in just a few lines of code by applying the method list. Check more methods you can use with our nodejs client here.

Front-end: Client-side data fetching

Initialize swr

useSWR is a React Hook library made by Vercel. It fetches data from an API or other external source, then saves that data in a cache and renders the data. We configure swr in _app.tsx.

The useSWR hook takes two parameters and returns data. It accepts the following:

• A Key: API URL we are calling.
• A fetcher: a function that returns the fetched data.

We call useSWR hook. Once we get the result, we store data in the state videos. Then, we map videos around VideoComponent, whose role is to display videos.

How to create smooth scrolling

The app has a height: 100vh. It has 2 sections. The first one, the div app__video, is scrollable with a height: calc(100%-50px), and the second one, the upload section, has a fixed height: 50px.

CSS scroll snap

As written above, the class app__videos has the property scroll-snap-type: y mandatory; and overflow-y: scroll; making the scroll vertical. This property allows for the creation of well-controlled scroll experiences by declaring a scroll snapping position, in our case, at the start of the video. To obtain this perfect result, we just need to add the property scroll-snap-align: start to the child component, here the ApiVideoPlayer (see code in the section below.)

Display videos

We are going to use api.video react player component, which allows us to display our videos in just a few lines of code. The only requirement is to pass the videoId. Create a ref to manipulate methods like pause or play easily. We set the object-fit CSS property in cover to ensure that even a landscape video will take the full size.

Upload a video

api.video provides a typescript library to upload videos to api.video using delegated upload token. The easiest way to create an upload token is to open your api.video’s dashboard, go to the upload tokens section from the sidebar, then click on the “Create upload token” button. Find the full guide here.

Upload using delegated upload token

We create a hidden input with a type file that we activate programmatically. Create a new object VideoUploader, and add two options, the upload token set as an environment variable for security purposes and the current file to upload.

That’s it. You are done 🎉. Now you can safely and efficiently upload videos.

Conclusion

We recreated TikTok thanks to api.video’s features in just a few steps. We did not cover every topic, but the entire code is available here.

And we're done! To start building right now, check out our docs and sign up for a free account.

BONUS

In this part, I will explain how to send 💟’s

Each video object has a metadata property containing an array of key-value objects. So we can add a ‘likes’ metadata with a numeric value and increase this value when the user has pressed on the 🤍 icon!

To record the new data, we need to update the video by making an API call

Note: Find a full description of the upload method here.

Ready to build your own TikTok-like project? Get started by signing up with api.video!