- Authentication π - (login | logout with google auth provider)
- Upload Video π
- Delete (videos | comments) by author π€π«£
- Video Detail β¨
- Different Topic page πβ¨
- Search (by topic | by keywords) ππ
- User Profile π§Έπ©πΏβπ» (editable bio)
- Follow | Unfollow π₯
- Like | Comment β€οΈβπ₯π¬
- Social share ππ (native sharing mechanism on mobile device)
- Theme ππ (light | dark)
- Progressive web app (PWA) ππ₯
- Fully Responsive π±π»
- Frontend - Nextjs
- Type checking - Typescript
- Backend - Sanity
- Styling - Tailwindcss
- UI Component - HeadlessUI
- Auto play on scroll - IntersectionObserver
- Authentication - Nextauth
- State management - Zustand
git@github.com:zwelhtetyan/tiktok-clone.git
cd tiktok-clone
git remote remove origin
yarn
To run this project, you will need to add the following environment variables to your .env.local
file
GOOGLE_CLIENT_ID
- (your google client id
)
GOOGLE_CLIENT_SECRET
- (your google client secret
)
NEXT_PUBLIC_ROOT_URL
- (http://localhost:3000
)
NEXTAUTH_URL
- (http://localhost:3000
)
Firstly, follow the instructions from sanity's official documentation here.
After creating sanity account from above instructions, you will get create command
to install sanity studio like this npm create sanity@latest -- --template get-started --project PROJECTID --dataset production --provider PROVIDER_NAME
And then, create a new folder under the root folder
mkdir sanity-backend
cd sanity-backend
npm create sanity@latest -- --template get-started --project `YOUR_PROJECTID` --dataset production --provider `YOUR_PROVIDERNAME`
And then, replace your schemas
folder with mine (from sanity/schemas
);
Note: If you have an error Cannot read property of undefined (reading 'config')
, simply add tailwind.config.js
file in the root of sanity-backend
folder with below content.
// tailwind.config.js
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
yarn dev
And then, you can view sanity studio on http://localhosts:3333
Get your TOKEN
and PROJECTID
from sanity studio
NEXT_PUBLIC_SANITY_TOKEN
- (your sanity token
)
NEXT_PUBLIC_SANITY_PROJECT_ID
- (your sanity projectId
)
NEXT_PUBLIC_SANITY_API_VERSION
- (2023-11-11
)
Note: Please make sure you allow the
CORS
orgin in you sanity-studio
Please make sure you are in the root folder (/tiktok-clone:
)
yarn dev
Finally, you can view the app on http://localhosts:3000