Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/john-weeks-dev/tiktok-clone-nextjs
Build and Deploy a Full Stack TikTok Clone with Next JS, React, Typescript, Tailwind CSS, AppWrite, and Vercel
https://github.com/john-weeks-dev/tiktok-clone-nextjs
appwrite fullstack html5 javascript nextjs nextjs13 react reactjs tailwind tailwindcss tiktok-clone typescript vercel vercel-deployment
Last synced: 17 days ago
JSON representation
Build and Deploy a Full Stack TikTok Clone with Next JS, React, Typescript, Tailwind CSS, AppWrite, and Vercel
- Host: GitHub
- URL: https://github.com/john-weeks-dev/tiktok-clone-nextjs
- Owner: John-Weeks-Dev
- Created: 2023-08-25T16:54:42.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-06T23:14:57.000Z (7 months ago)
- Last Synced: 2024-12-28T20:08:58.387Z (24 days ago)
- Topics: appwrite, fullstack, html5, javascript, nextjs, nextjs13, react, reactjs, tailwind, tailwindcss, tiktok-clone, typescript, vercel, vercel-deployment
- Language: TypeScript
- Homepage: https://www.youtube.com/watch?v=7zLyVzItZlQ
- Size: 22.3 MB
- Stars: 119
- Watchers: 3
- Forks: 65
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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**
[](https://www.youtube.com/watch?v=7zLyVzItZlQ)
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.