{"id":23439659,"url":"https://github.com/sanidhyy/tiktok-clone","last_synced_at":"2025-04-13T08:07:50.571Z","repository":{"id":112910521,"uuid":"517022869","full_name":"sanidhyy/tiktok-clone","owner":"sanidhyy","description":"Tiktik - A TikTok Clone using Typescript, Next JS and Sanity","archived":false,"fork":false,"pushed_at":"2025-03-30T17:55:23.000Z","size":926,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-13T08:07:11.130Z","etag":null,"topics":["css","google","google-oauth","html","javascript","js","next","nextjs","node","nodejs","react","reactjs","sanity","sanity-io","tailwindcss"],"latest_commit_sha":null,"homepage":"https://tiktok-clone-react.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sanidhyy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["sanidhyy"],"patreon":"sanidhy","custom":"https://www.buymeacoffee.com/sanidhy"}},"created_at":"2022-07-23T10:11:07.000Z","updated_at":"2025-04-02T22:09:48.000Z","dependencies_parsed_at":"2023-10-01T09:47:02.239Z","dependency_job_id":"df725dac-c7f8-4fea-b89b-1ccadb72ccd8","html_url":"https://github.com/sanidhyy/tiktok-clone","commit_stats":null,"previous_names":["sanidhyy/tiktok-clone"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanidhyy%2Ftiktok-clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanidhyy%2Ftiktok-clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanidhyy%2Ftiktok-clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanidhyy%2Ftiktok-clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sanidhyy","download_url":"https://codeload.github.com/sanidhyy/tiktok-clone/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248681490,"owners_count":21144700,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","google","google-oauth","html","javascript","js","next","nextjs","node","nodejs","react","reactjs","sanity","sanity-io","tailwindcss"],"created_at":"2024-12-23T15:33:10.211Z","updated_at":"2025-04-13T08:07:50.498Z","avatar_url":"https://github.com/sanidhyy.png","language":"TypeScript","funding_links":["https://github.com/sponsors/sanidhyy","https://patreon.com/sanidhy","https://www.buymeacoffee.com/sanidhy"],"categories":[],"sub_categories":[],"readme":"# Tiktik - A Next JS TikTok Clone\n\n![A Next JS TikTok Clone](https://user-images.githubusercontent.com/71302066/181027204-1bce32fa-d116-43f8-a601-3c8d4bc97513.png \"A Next JS TikTok Clone\")\n\n[![Ask Me Anything!](https://img.shields.io/badge/Ask%20me-anything-1abc9c.svg)](https://github.com/Technical-Shubham-tech \"Ask Me Anything!\")\n[![GitHub license](https://img.shields.io/github/license/Technical-Shubham-tech/tiktok-clone?)](https://github.com/Technical-Shubham-tech/tiktok-clone/blob/main/LICENSE.md \"GitHub license\")\n[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/Technical-Shubham-tech/tiktok-clone/commits/main \"Maintenance\")\n[![GitHub branches](https://badgen.net/github/branches/Technical-Shubham-tech/tiktok-clone/)](https://github.com/Technical-Shubham-tech/tiktok-clone/branches \"GitHub branches\")\n[![Github commits](https://badgen.net/github/commits/Technical-Shubham-tech/tiktok-clone/main/)](https://github.com/Technical-Shubham-tech/tiktok-clone/commits \"Github commits\")\n[![Vercel Deployment](https://img.shields.io/badge/Vercel-000000?style=for-the-badge\u0026logo=vercel\u0026logoColor=white)](https://tiktok-clone-react.vercel.app/ \"Vercel Deployment\")\n[![GitHub issues](https://img.shields.io/github/issues/Technical-Shubham-tech/tiktok-clone?)](https://github.com/Technical-Shubham-tech/tiktok-clone/issues \"GitHub issues\")\n[![GitHub pull requests](https://img.shields.io/github/issues-pr/Technical-Shubham-tech/tiktok-clone?)](https://github.com/Technical-Shubham-tech/tiktok-clone/pulls \"GitHub pull requests\")\n\n## :warning: Before you start\n\n1. Make sure [Git](https://git-scm.com \"Git\") and [NodeJS](https://nodejs.org \"NodeJS\") are installed\n2. **Yarn** is faster than Npm. So use [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/ \"Yarn\").\n3. Create `.env.development` file in root folder.\n4. Contents of `.env.development`\n\n```\nNEXT_PUBLIC_SANITY_PROJECT_ID=XXXXXXXXXX\nNEXT_PUBLIC_SANITY_TOKEN=XXXXXXXXXXXXXXXXXXXXXXXXXXX\nNEXT_PUBLIC_GOOGLE_API_TOKEN=XXXXXXXXXXXXXXXXXXXX\nNEXT_PUBLIC_BASE_URL=http://localhost:3000\n```\n\n5. Clone this repository to your local computer.\n6. Open terminal in root directory. Run `npm install` or `yarn install`.\n7. Now, cd `tiktik-backend`. Run `npm install` or `yarn install` again.\n8. Now all required packages are installed, let's setup sanity.\n9. Create an account in [Sanity](https://www.sanity.io/ \"Sanity\").\n10. In terminal, type `sanity init` to initialize our sanity project.\n11. Once sanity project is initialized, Type `sanity start` to start sanity studio on localhost. URL will be shown in terminal.\n12. After going to localhost, login in with your account. Now, your account is connected with this project.\n13. To get `NEXT_PUBLIC_SANITY_PROJECT_ID` and `NEXT_PUBLIC_SANITY_TOKEN`, go to [Sanity](https://www.sanity.io/ \"Sanity\").\n14. Copy your **project id** as shown below:\n    ![Copy project id](https://user-images.githubusercontent.com/71302066/182079379-1e1eec55-c6f3-453c-8000-95983b5da154.png \"Copy project id\")\n\n15. 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.\n    ![Copy project token](https://user-images.githubusercontent.com/71302066/182079373-75153621-58a1-4e77-b3e4-db33f92c0e1e.png \"Copy project token\")\n16. Now, Sanity backend is setup. Let's setup Google OAuth.\n17. Go, to [Google Cloud Developers Console](https://console.cloud.google.com/projectcreate \"Google Cloud Developers Console\") and create a project.\n18. Once you created the project, make sure to select it from Header section.\n19. Go to APIs \u0026 Services \u003e Credentials and create OAuth Client ID. Follow on-screen instructions.\n20. Add Both front end and sanity backend to Authorized URLs as shown below:\n    ![Change the following settings](https://user-images.githubusercontent.com/71302066/182080398-e940ce1e-8d69-42a8-aa42-3bac86494054.png \"Change the following settings\")\n21. Copy `NEXT_PUBLIC_GOOGLE_API_TOKEN` and paste it in `.env` file.\n    ![Copy Google API Token](https://user-images.githubusercontent.com/71302066/182080950-9f278d63-c911-45be-b8a0-19dfceae8603.png \"Copy Google API Token\")\n22. Now Google OAuth is setup successfully :fire:\n\n_NOTE_: Make sure you don't share these keys publicaly.\n\n## :pushpin: How to use this App?\n\n1. Clone this **repository** to your local computer.\n2. Open **terminal** in root directory.\n3. Type and Run `npm install` or `yarn install`.\n4. Once packages are installed, you can start this app using `npm start` or `yarn start`\n5. Now app is fully configured and you can start using this app :+1:\n\n## :camera: Screenshots:\n\n![Post Details](https://user-images.githubusercontent.com/71302066/182081631-e3c86b5f-4ec3-426f-bd32-79069ac375f8.png \"Post Details\")\n\n![Profile Page](https://user-images.githubusercontent.com/71302066/182081843-dfba11ce-0e5f-4bed-b10f-31b3eebeed5c.png \"Profile Page\")\n\n![Upload New Posts](https://user-images.githubusercontent.com/71302066/182081964-89731c6e-af4a-4879-aa9e-d525bbbcb29d.png \"Upload New Posts\")\n\n## :gear: Built with\n\n[\u003cimg src=\"https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white\" width=\"150\" height=\"40\" /\u003e](https://www.javascript.com/ \"JavaScript\")\n\n[\u003cimg src=\"https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB\" width=\"150\" /\u003e](https://reactjs.org/ \"React JS\")\n\n[\u003cimg src=\"https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white\" width=\"150\" /\u003e](https://tailwindcss.com/ \"Tailwind CSS\")\n\n[\u003cimg src=\"https://img.shields.io/badge/next.js-000000?style=for-the-badge\u0026logo=nextdotjs\u0026logoColor=white\" width=\"150\" /\u003e](https://nextjs.org/)\n\n[\u003cimg src=\"http://ForTheBadge.com/images/badges/built-with-love.svg\" alt=\"Built with Love\"\u003e](https://github.com/Technical-Shubham-tech \"Built with Love\")\n\n## :wrench: Stats\n\n![Stats for this App](https://user-images.githubusercontent.com/71302066/182082679-e25a4785-4194-456e-8c21-49b41cfe23ef.svg \"Stats for this App\")\n\n## :raised_hands: Contribute\n\nYou 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.\n\n## Buy Me a Coffee 🍺\n\n[\u003cimg src=\"https://img.shields.io/badge/Buy_Me_A_Coffee-FFDD00?style=for-the-badge\u0026logo=buy-me-a-coffee\u0026logoColor=black\" width=\"200\" /\u003e](https://www.buymeacoffee.com/sanidhy \"Buy me a Coffee\")\n\n## :rocket: Follow Me\n\n[![GitHub followers](https://img.shields.io/github/followers/Technical-Shubham-tech?style=social\u0026label=Follow\u0026maxAge=2592000)](https://github.com/Technical-Shubham-tech \"Follow Me\")\n[![Twitter](https://img.shields.io/twitter/url?style=social\u0026url=https%3A%2F%2Ftwitter.com%2FTechnicalShubam)](https://twitter.com/intent/tweet?text=Wow:\u0026url=https%3A%2F%2Fgithub.com%2FTechnical-Shubham-tech%2Fmedical-chat-app \"Tweet\")\n[![YouTube](https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white)](https://www.youtube.com/channel/UCNAz_hUVBG2ZUN8TVm0bmYw \"Subscribe my Channel\")\n\n## :star: Give A Star\n\nYou can also give this repository a star to show more people and they can use this repository.\n\n## :books: Available Scripts\n\nThis 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).\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.\n\n[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`.\n\nThe `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.\n\n## :page_with_curl: Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanidhyy%2Ftiktok-clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsanidhyy%2Ftiktok-clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanidhyy%2Ftiktok-clone/lists"}