gameboy08 / tiktok-clone-nextjs

Build and Deploy a Full Stack TikTok Clone with Next JS, React, Typescript, Tailwind CSS, AppWrite, and Vercel

TikTok Clone NextJs 13 / (tiktok-clone-nextjs)

Learn how to build this!

If you'd like a step-by-step guide on how to build this just CLICK THE IMAGE BELOW

Come and check out my YOUTUBE channel for lots more tutorials -> https://www.youtube.com/@johnweeksdev

LIKE, SUBSCRIBE, and SMASH THE NOTIFICATION BELL!!!

App Setup (localhost)

git clone https://github.com/John-Weeks-Dev/tiktok-clone-nextjs.git

cp .env.example .env

You'll have to set up an AppWrite account, and then add all of the details into your .env file.

AppWrite Schema

Database Name: tiktok-clone

Profile Collection:

Key	Type
Document ID	String
image	String
bio	String
user_id	String
name	String

Profile Indexes:

KEY	TYPE	ATTRIBUTE	ASC/DESC
user_id	key	user_id	asc
name	fulltext	name	asc

Profile Settings (Update Permissions):

Add Role	PERMISSIONS
All guests	Read
All users	Create, Read, Update, Delete

Post Collection:

Key	Type
Document ID	String
user_id	String
video_url	String
text	String
created_at	String

Post Indexes:

KEY	TYPE	ATTRIBUTE	ASC/DESC
user_id	key	user_id	asc

Profile Settings (Update Permissions):

Add Role	PERMISSIONS
All guests	Read
All users	Create, Read, Update, Delete

Like Collection:

Key	Type
Document ID	String
user_id	String
post_id	String

Like Indexes:

KEY	TYPE	ATTRIBUTE	ASC/DESC
user_id	key	user_id	asc
id	unique	id	asc
post_id	key	post_id	asc

Like Settings (Update Permissions):

Add Role	PERMISSIONS
All guests	Read
All users	Create, Read, Update, Delete

Comment Collection:

Key	Type
Document ID	String
user_id	String
post_id	String
text	String
created_at	String

Comment Indexes:

KEY	TYPE	ATTRIBUTE	ASC/DESC
post_id	key	post_id	asc

Comment Settings (Update Permissions):

Add Role	PERMISSIONS
All guests	Read
All users	Create, Read, Update, Delete

Once you've connected your application to AppWrite. Run the commands.

npm i

npm run dev

You should be good to go! If you need any more help, take a look at the tutorial video by clicking the image above.