Instagram UI profile clone with tailwindCSS and Nextjs (all articles)
In this project, we are going to create the profile page UI clone with Next.js and tailwind CSS. 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.
If you liked this story, you might also like a Youtube membership. It’s only $14.99 a month (less than $0.5 per day!) but it will give you unlimited access to all source code in the YouTube channel and free Udemy courses by joining the channel which can help you get a job.
React NextJS Create Instagram UI clone — Profile Page Part 1
React NextJS Create Instagram UI clone — Profile Page Part 2
React NextJS Create Instagram UI clone — Profile Page Part 3
React NextJS Create Instagram UI clone — Profile Page Part 4
React NextJS Create Instagram UI clone — Profile Page Part 5
React NextJS Create Instagram UI clone — Profile Page Part 6
React NextJS Create Instagram UI clone — Profile Page Part 7
React NextJS Create Instagram UI clone — Profile Page Part 8
If you liked this story, you might also like a Medium membership. It’s only $5 a month (a price of a cup of coffee!) but it will give you unlimited access to stories while supporting your favorite writers. If you sign up using this link, I’ll earn a small commission. Thanks!
