Nextjs、Firebase 和 Tailwind CSS 项目 - Instagram 克隆

上次更新时间：2024-10-03

课程售价: 2.9 元

联系右侧微信客服充值或购买课程

课程内容

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

网站首页 > 编程开发 > 前端

Nextjs、Firebase 和 Tailwind CSS 项目 - Instagram 克隆

上次更新时间：2024-10-03 16:36

课程售价：2.9元

联系客服微信，购买课程或充值

请登录网站 , 没有账号点击这里注册

课程内容

11个章节 , 30个讲座

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