51 |
52 |
Tik Tok Clone
53 |
54 |
59 | {videos &&
60 | videos?.map((e, id) => {
61 | let {
62 | videoUrl,
63 | comments,
64 | imageUrl,
65 | songName,
66 | description,
67 | likes,
68 | user,
69 | _id,
70 | liked,
71 | userImage,
72 | } = e;
73 |
74 | return (
75 |
88 | );
89 | })}
90 |
91 |
92 |
93 |
](https://nextjs.org/)
7 |
8 | **TikTok Clone build using next js.**
9 |
10 | [](https://tiktokclone-prajyu.vercel.app/)
11 | Click the icon above to access demo app ☝️
12 | ## Features
13 |
14 | - Upload videos.
15 | - Google Authentication
16 | - Watch and like them
17 |
18 | ## Tech
19 |
20 | - [Next js](https://nextjs.org/) - The React Framework
21 | for Production
22 | - [Mognodb](https://www.mongodb.com/) - No SQL database
23 |
24 | ## Installation
25 |
26 | TikTok Clone requires [Node.js](https://nodejs.org/) to run.
27 |
28 | prequisites:
29 |
30 | - node.js
31 | - npm
32 | - next.js
33 | - mongodb (driver)
34 |
35 | Create a `.env` file
36 |
37 | ```
38 | GOOGLE_CLIENT_ID=XXXXXXXXXXXXXX // Obtain google client id to make google auth work
39 | GOOGLE_CLIENT_SECRET=XXXXXXXXXXXXXX // Obtain google client secret to make google auth work
40 | NEXTAUTH_URL=http://localhost:3000/ // Change this to your deployed url in production
41 | JWT_SECRET=XXXXXXXXXXXXXX // A random string to use in JWT
42 | ```
43 |
44 | Install the dependencies and start the server.
45 |
46 | ```sh
47 | git clone https://github.com/prajyu/TikTok-Clone.git
48 | cd TikTok-Clone
49 | npm i
50 | npm run dev
51 | ```
52 |
53 | For production environments...
54 |
55 | edit the `.env` file and add these three enviornment variables
56 |
57 | ```
58 | USER=XXXXXXXXXXXXXX // Mongo DB credentials
59 | PASSWORD=XXXXXXXXXXXXXX // Mongo DB credentials
60 | DATABASE=XXXXXXXXXXXXXX // Mongo DB credentials
61 | ```
62 |
63 | ```sh
64 | npm run build
65 | npm start
66 | ```
67 |
68 | Verify the deployment by navigating to your server address in
69 | your preferred browser.
70 |
71 | ```sh
72 | localhost:3000
73 | ```
74 |
75 | ## License
76 |
77 | MIT
78 |
--------------------------------------------------------------------------------
/components/HomeNav.jsx:
--------------------------------------------------------------------------------
1 | import { useRef } from "react";
2 | import UploadForm from "./UploadForm";
3 | import { useRouter } from "next/router";
4 |
5 | const HomeNav = () => {
6 | const uploadRef = useRef();
7 | const router = useRouter();
8 | const handleUpload = async () => {
9 | uploadRef.current.classList.remove("animate-down");
10 | uploadRef.current.classList.add("animate-vertical");
11 | uploadRef.current.classList.remove("translate-y-full");
12 | uploadRef.current.classList.remove("hidden");
13 | uploadRef.current.classList.add("block");
14 | };
15 |
16 | return (
17 | <>
18 |