https://github.com/sanidhyy/tiktok-clone
Tiktik - A TikTok Clone using Typescript, Next JS and Sanity
https://github.com/sanidhyy/tiktok-clone
css google google-oauth html javascript js next nextjs node nodejs react reactjs sanity sanity-io tailwindcss
Last synced: about 1 year ago
JSON representation
Tiktik - A TikTok Clone using Typescript, Next JS and Sanity
- Host: GitHub
- URL: https://github.com/sanidhyy/tiktok-clone
- Owner: sanidhyy
- License: mit
- Created: 2022-07-23T10:11:07.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-03-30T17:55:23.000Z (about 1 year ago)
- Last Synced: 2025-04-13T08:07:11.130Z (about 1 year ago)
- Topics: css, google, google-oauth, html, javascript, js, next, nextjs, node, nodejs, react, reactjs, sanity, sanity-io, tailwindcss
- Language: TypeScript
- Homepage: https://tiktok-clone-react.vercel.app/
- Size: 904 KB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Tiktik - A Next JS TikTok Clone
[](https://github.com/Technical-Shubham-tech "Ask Me Anything!")
[](https://github.com/Technical-Shubham-tech/tiktok-clone/blob/main/LICENSE.md "GitHub license")
[](https://github.com/Technical-Shubham-tech/tiktok-clone/commits/main "Maintenance")
[](https://github.com/Technical-Shubham-tech/tiktok-clone/branches "GitHub branches")
[](https://github.com/Technical-Shubham-tech/tiktok-clone/commits "Github commits")
[](https://tiktok-clone-react.vercel.app/ "Vercel Deployment")
[](https://github.com/Technical-Shubham-tech/tiktok-clone/issues "GitHub issues")
[](https://github.com/Technical-Shubham-tech/tiktok-clone/pulls "GitHub pull requests")
## :warning: Before you start
1. Make sure [Git](https://git-scm.com "Git") and [NodeJS](https://nodejs.org "NodeJS") are installed
2. **Yarn** is faster than Npm. So use [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/ "Yarn").
3. Create `.env.development` file in root folder.
4. Contents of `.env.development`
```
NEXT_PUBLIC_SANITY_PROJECT_ID=XXXXXXXXXX
NEXT_PUBLIC_SANITY_TOKEN=XXXXXXXXXXXXXXXXXXXXXXXXXXX
NEXT_PUBLIC_GOOGLE_API_TOKEN=XXXXXXXXXXXXXXXXXXXX
NEXT_PUBLIC_BASE_URL=http://localhost:3000
```
5. Clone this repository to your local computer.
6. Open terminal in root directory. Run `npm install` or `yarn install`.
7. Now, cd `tiktik-backend`. Run `npm install` or `yarn install` again.
8. Now all required packages are installed, let's setup sanity.
9. Create an account in [Sanity](https://www.sanity.io/ "Sanity").
10. In terminal, type `sanity init` to initialize our sanity project.
11. Once sanity project is initialized, Type `sanity start` to start sanity studio on localhost. URL will be shown in terminal.
12. After going to localhost, login in with your account. Now, your account is connected with this project.
13. To get `NEXT_PUBLIC_SANITY_PROJECT_ID` and `NEXT_PUBLIC_SANITY_TOKEN`, go to [Sanity](https://www.sanity.io/ "Sanity").
14. Copy your **project id** as shown below:
15. Under API Tab, go to tokens section and create a token. You can name it whatever you want. Just Don't fotget to copy your project token. You will not be able to copy later.
16. Now, Sanity backend is setup. Let's setup Google OAuth.
17. Go, to [Google Cloud Developers Console](https://console.cloud.google.com/projectcreate "Google Cloud Developers Console") and create a project.
18. Once you created the project, make sure to select it from Header section.
19. Go to APIs & Services > Credentials and create OAuth Client ID. Follow on-screen instructions.
20. Add Both front end and sanity backend to Authorized URLs as shown below:
21. Copy `NEXT_PUBLIC_GOOGLE_API_TOKEN` and paste it in `.env` file.
22. Now Google OAuth is setup successfully :fire:
_NOTE_: Make sure you don't share these keys publicaly.
## :pushpin: How to use this App?
1. Clone this **repository** to your local computer.
2. Open **terminal** in root directory.
3. Type and Run `npm install` or `yarn install`.
4. Once packages are installed, you can start this app using `npm start` or `yarn start`
5. Now app is fully configured and you can start using this app :+1:
## :camera: Screenshots:
## :gear: Built with
[
](https://www.javascript.com/ "JavaScript")
[
](https://reactjs.org/ "React JS")
[
](https://tailwindcss.com/ "Tailwind CSS")
[
](https://nextjs.org/)
[
](https://github.com/Technical-Shubham-tech "Built with Love")
## :wrench: Stats
## :raised_hands: Contribute
You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.
## Buy Me a Coffee 🍺
[
](https://www.buymeacoffee.com/sanidhy "Buy me a Coffee")
## :rocket: Follow Me
[](https://github.com/Technical-Shubham-tech "Follow Me")
[](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2FTechnical-Shubham-tech%2Fmedical-chat-app "Tweet")
[](https://www.youtube.com/channel/UCNAz_hUVBG2ZUN8TVm0bmYw "Subscribe my Channel")
## :star: Give A Star
You can also give this repository a star to show more people and they can use this repository.
## :books: Available Scripts
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
First, run the development server:
```bash
npm run dev
# or
yarn dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
## :page_with_curl: Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.