imthefounder / tt-clone-webapp

Video sharing web app

TikTok clone | video sharing web app

Features

• 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 📱💻

Tech stack

• Frontend - Nextjs
• Type checking - Typescript
• Backend - Sanity
• Styling - Tailwindcss
• UI Component - HeadlessUI
• Auto play on scroll - IntersectionObserver
• Authentication - Nextauth
• State management - Zustand

🏃 Run Locally

Clone the project

  [email protected]:zwelhtetyan/tiktok-clone.git

Go to the project directory

  cd tiktok-clone

Remove remote origin

  git remote remove origin

Install dependencies

  yarn

🔑 Environment Variables

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)

Create sanity studio

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

Install sanity studio

  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: [],
}

Run sanity studio

  yarn dev

And then, you can view sanity studio on http://localhosts:3333

Add env in the root folder (tiktok-clone/.env.local)

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

Run the app

Please make sure you are in the root folder (/tiktok-clone:)

  yarn dev

Finally, you can view the app on http://localhosts:3000

👋 Contributing

Contributions are always welcome!

Author

• @zwelhtetyan