Skip to content

Latest commit

 

History

History
137 lines (92 loc) · 8.71 KB

README.md

File metadata and controls

137 lines (92 loc) · 8.71 KB
Raw

Tiktik - A Next JS TikTok Clone

A Next JS TikTok Clone

Ask Me Anything! GitHub license Maintenance GitHub branches Github commits Vercel Deployment GitHub issues GitHub pull requests

⚠️ 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

  1. Clone this repository to your local computer.

  2. Open terminal in root directory. Run npm install or yarn install.

  3. Now, cd tiktik-backend. Run npm install or yarn install again.

  4. Now all required packages are installed, let's setup sanity.

  5. Create an account in Sanity.

  6. In terminal, type sanity init to initialize our sanity project.

  7. Once sanity project is initialized, Type sanity start to start sanity studio on localhost. URL will be shown in terminal.

  8. After going to localhost, login in with your account. Now, your account is connected with this project.

  9. To get NEXT_PUBLIC_SANITY_PROJECT_ID and NEXT_PUBLIC_SANITY_TOKEN, go to Sanity.

  10. Copy your project id as shown below: Copy project id

  11. 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. Copy project token

  12. Now, Sanity backend is setup. Let's setup Google OAuth.

  13. Go, to Google Cloud Developers Console and create a project.

  14. Once you created the project, make sure to select it from Header section.

  15. Go to APIs & Services > Credentials and create OAuth Client ID. Follow on-screen instructions.

  16. Add Both front end and sanity backend to Authorized URLs as shown below: Change the following settings

  17. Copy NEXT_PUBLIC_GOOGLE_API_TOKEN and paste it in .env file. Copy Google API Token

  18. 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:

Post Details

Profile Page

Upload New Posts

⚙️ Built with

Built with Love

🔧 Stats

Stats for this App

🙌 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

GitHub followers Twitter YouTube

⭐ 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:

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.