Nextjs、Firebase 和 Tailwind CSS 项目 - Instagram 克隆
- 1. Introduction
- 1. Intro to instageram clone project
- 2. Installation
- 1. Install Nextjs and Tailwind CSS and create homepage template
- 3. Header section
- 2. Add search bar to the header component
- 3. Add the menu and profile image at the right side of the header
- 4. Implement sticky header
- 4. Story section
- 1. Populate fake data using minifaker and create feed and story components
- 2. Style the story section and install tailwind-scrollbar
- 5. Feed section
- 1. Create posts and post components and make some dummy data
- 2. Create the header and image sections of the post component
- 3. Create the buttons section of the post component
- 4. Add the caption and input box of the post component
- 5. Make the feed section responsive
- 6. Mini profile and suggestion section
- 1. Create the mini profile component
- 2. Build the suggestion part of the feed component
- 7. Authentication using Firebase and next-auth
- 1. Install next-auth and firebase and initilize the firebase
- 2. Complete the signin page
- 3. Get the session and modify the header component with google data
- 4. Modify mini profile and story components to include the session
- 8. Upload modal
- 1. Install recoil and add atom and UploadModal component
- 2. Install and impliment react-modal
- 3. Complete the UploadModal component
- 9. Add functionality to the feed section
- 1. Create a post and add it to firestore and get the downloadURL
- 2. Get the post data from database and show it in the feed section
- 3. Hide buttons and input section when the user is logged out
- 4. Add comment to the firebase database
- 5. Show comments in the comments section and get data from the firebase database
- 6. Apply like functionality
- 10. Deployment
- 1. Deploy to vercel
- 11. Updates
- 1. Update 1 - show the number of likes
- 2. Update 2 - add firebase auth insead of next-auth