Skip to content

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

Notifications You must be signed in to change notification settings

John-Weeks-Dev/tiktok-clone-nextjs

Repository files navigation

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

GO TO JOHN WEEKS DEV TUTORIAL VIDEOS

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.

Releases

No releases published

Packages

No packages published

Languages