Tiktik - A Next JS TikTok Clone

⚠️ Before you start

1. Make sure Git and NodeJS are installed
2. Yarn is faster than Npm. So use 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.

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.

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 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 🔥

NOTE: Make sure you don't share these keys publicaly.

📌 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 👍

📷 Screenshots:

⚙️ Built with

🔧 Stats

🙌 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 🍺

🚀 Follow Me

⭐ Give A Star

You can also give this repository a star to show more people and they can use this repository.

📚 Available Scripts

This is a Next.js project bootstrapped with create-next-app.

First, run the development server:

npm run dev
# or
yarn dev

Open 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 can be accessed on 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 instead of React pages.

📃 Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.