Let's build an instagram profile page UI clone with Next.js and TailwindCSS🚀🚀🔥🔥

👨‍💻 Source code:

📚Read articles:

The Instagram clone looks the same as the real one. It contains an avatar and its username, description, tags, and also URL. For the avatar, we will use the DaisyUI. We will also use the Fontawesome and Heroicon to add different icons at different places, such as tab buttons and settings.

The following effect is exactly the same as real Instagram

The stories on the profile page will scroll smoothly by adding a custom scroll button, which on top of all the stories, the scroll left button will appear when it starts to scroll. When scrolling to the end, the scroll right button will disappear.

The button list has the effect that when the user clicks on it, it will have a dark line appear in line with the horizontal line.

For the image posts, we fetch the images from the Unsplash API with Axios. When mousing over the post, it will have a semi-transparent black cover the image, it will also show the number of hearts and number of comments.

00:00 introduction and create component
03:03 add avatar
05:41 user detail
09:44 profile stories
17:11 horizontal lines and buttons
22:29 consume unsplash API
27:28 render images
32:51 instagram hover effect

How to create Instagram stories?
How to create Instagram header and tooltip?
How to create Instagram login page?

📩 You can also subscribe or follow to get info or our (free) course coupons

📲 Follow Us:
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
🔥Complete Courses🔥
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Gumroad Web and mobile complete courses

Complete CSS course

React native Expo for multiplatform mobile app development

Complete NodeJS course with express, socket io and MongoDB
Complete Progress Web App BootCamp

Complete Modern JavaScript BootCamp from the beginning

React - The Complete Guide with React Hook Redux 2020 in 4hr

Vue JS and Firebase:Build an iOS and Android chat app [2020]

New SAT Math Course

New SAT Math Practice Test Explain

Get A* in GCSE Maths (Quadratic equations and graph)

ckmobile aims to provide quality tutorials like reactjs, nextjs, firebase, javascript, nodejs, mongodb, expo reactnative. Learn it easily and create professional website and apps.

#javascript
#webdevelopement
#reactjs
#firebase
#mongodb
#nodejs

[waifufx]

Thank you sir subscribed to the channel not long you teach NextJs well you are the 'next js master' sir

[philip.]

you didn't explain how to route through profile posts, tagged, etc.