next js project – Twitter clone

Welcome to the project. In this project, we are going to create a twitter clone using next js, tailwind css and firebase.

We are going to use next js version 12, tailwind css version 3, and firebase version 9 in the project.

Source code and final version:

Inspired by video created by Ali:
@ILW Yennefer

All the website is styled using only tailwind css version 3.0

0:00 Intro
5:07 Install Nextjs and Tailwind CSS
24:35 Create Sidebar component
1:17:02 Create feed component and its header
1:34:59 Add the input section of the feed component
2:01:10 Add the post section of the feed component
2:36:40 Create the widgets component and the search bar
2:52:43 Create the news section of the widgets component
3:26:00 Create the random users section of the widgets component
3:53:12 Install next-auth and firebase and initialize the firebase
4:11:13 Complete the signin page
4:39:26 Get the session and modify sidebar and input components
5:07:48 Send data to firebase and add loading effect
6:06:19 Get post data from firestore and show them in the post section
6:28:50 Add like functionality to the post
7:01:33 Add delete functionality to the post
7:20:52 Add animation effect using framer motion
7:36:17 Install and implement recoil
7:54:53 Install and implement react-modal
8:48:06 Send comments to firestore, show the number of comments, and redirect using useRouter
9:10:50 Create post page
9:50:05 Get the comments from firestore and create the comment component
10:06:28 Complete the comment component
10:33:58 Deploy to vercel and fix the errors


Leave a Reply

Your email address will not be published. Required fields are marked *