Up next in 10
Build a Next.js Full Stack TikTok Clone Video Streaming & Sharing Web App in Browser Using TS
Mar 5, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-next-js-full-stack-tiktok-clone-video-streaming-sharing-web-app-in-browser-using-ts/
Show More Show Less View Video Transcript
0:00
Uh hello guys in this video I'll show
0:02
you the how to make a Tik Tok clone
0:04
inside NexJS. So let's get started. So
0:07
this is actually the directory
0:08
structure. I built out a complete full
0:11
stack Tik Tok clone video streaming and
0:13
video sharing website. So it's all the
0:16
files are customizable. It's built
0:19
inside TypeScript next.js
0:22
and you can just see all the components
0:24
are divided into its appropriate
0:26
TypeScript files here. This is a search
0:28
component. This is let me first of all
0:31
show you the demo. So we are running
0:32
this application npm rundev. You will
0:34
see that
0:36
we are running this on localhost 3000.
0:39
If you need the source code uh the link
0:41
is given you can directly purchase the
0:43
source code and you will see
0:47
it loads right here.
0:50
It has authentication as well. So
0:54
we basically integrated the Google
0:57
login. So first of all, you come to the
0:59
website. You loging in with your Google
1:01
account. I've already done that. We have
1:03
uploaded a couple of videos right here.
1:05
You'll see that you can scroll out the
1:08
video. If you want to upload, you can
1:11
like the video as well by clicking this
1:13
like button, comment, share, everything
1:15
is there which you see inside Tik Tok.
1:19
So it's completely responsive as well.
1:21
So as you can just see it will look
1:24
right here inside this mobile phone. And
1:27
now you can
1:30
also comment here. You will see that
1:33
the comment will be inserted.
1:37
You also have the search functionality
1:39
as well where you can search for the
1:41
videos. So right here you can search for
1:44
accounts and videos. So whatever name
1:47
that you give you can search.
1:51
So all these things are stored inside
1:52
the database. So once you upload the
1:55
videos or everything is stored in the
1:56
database. You will see that the video
1:58
will show up right here. And now let's
2:01
suppose you want to login with a
2:02
different account.
2:07
So again if I open the application with
2:09
a different account you can login once
2:11
again. So once you open the application
2:14
you will be granted to login with your
2:17
Google account.
2:20
So you click the login button.
2:34
So you can just see I have already
2:35
logged in here. So now there are two
2:37
accounts right here.
2:40
So similarly I can
2:46
login with a different account as well.
2:48
So we have opened this application in
2:50
three different windows. So you can just
2:52
see the authentication is there Google
2:55
authentication. So now if you refresh it
3:01
so we have different categories as well.
3:03
So once you upload the video it will
3:06
have different categories for you.
3:09
So now this is the upload screen. So now
3:12
you want to upload a video, you simply
3:15
click the upload button and that
3:18
screen will come. So everything as you
3:21
can see it's divided into its
3:23
appropriate files. So you can directly
3:25
purchase it. This is a profile
3:27
component, search component. So it will
3:29
save you a lot of time and
3:35
everything is customizable.
3:39
We have different categories here. You
3:40
can see that.
3:46
So right here you will simply select
3:49
whatever video you want to upload.
4:02
So there is also this file size should
4:05
not exceed. We have given this so
4:09
validation is also there.
4:17
So once you select the video
4:20
you will see that
4:22
here you can give it a title here
4:27
and give a category here whatever
4:29
category you want to and then click post
4:32
and that uh video will be uploaded to
4:34
the database and it will refresh. You
4:37
will see that now we have three videos.
4:41
So you can see the video successfully
4:43
uploaded
4:45
and then you can like share everything.
4:52
So if you're looking forward for
4:53
building a Tik Tok fullstack clone in
4:55
nextJS, this is the application. The
4:57
link is given in the description. You
4:59
can directly purchase it.
5:03
So as I showed you that has all the
5:05
functionalities right here. You can have
5:08
the search screen, you can have upload
5:10
screen, everything is there for you.
5:13
So the link is given guys in the
5:15
description. You can directly purchase
5:16
it. Uh if you face any sort of problem
5:20
in deploying the application, you can
5:21
email me. I will definitely help you. So
5:26
if I show you the package.json JSON
5:28
file. Uh
5:31
as you can see we are using the latest
5:34
version of next
5:38
for building this. It has all the
5:40
functionalities right here.
5:42
So the link is given.
5:46
You can directly purchase the