Nextjs, Firebase 9 & Tailwind CSS 3项目 - Twitter克隆
- 2. Installation
- 1. Install Nextjs and Tailwind CSS
- 3. The home page UI
- 1. Create Sidebar component
- 2. Create feed component and its header
- 3. Add the input section of the feed component
- 4. Add the post section of the feed component
- 4. The home page widgets section
- 1. Create the widgets component and the search bar
- 2. Create the news section of the widgets component
- 3. Create the random users section of the widgets component
- 5. Authentication using Firebase and next-auth
- 1. Install next-auth and firebase and initialize the firebase
- 2. Complete the signin page
- 3. Get the session and modify sidebar and input components
- 4. Send data to firebase and add loading effect
- 6. Feed section functionality (like, comment, delete)
- 1. Get post data from firestore and show them in the post section
- 2. Add like functionality to the post
- 3. Add delete functionality to the post
- 4. Add animation effect using framer motion
- 5. Install and implement recoil
- 6. Install and implement react-modal
- 7. Send comments to firestore, show the number of comments, & redirect by useRouter
- 7. Post page
- 1. Create post page
- 2. Get the comments from firestore and create the comment component
- 3. Complete the comment component
- 8. Deployment
- 1. Deploy to vercel and fix the errors
- 9. Updates
- 1. Update - add firebase auth and remove next-auth