Let's build a Instagram stories UI clone with Next.js and Tailwind CSS 🚀🚀🔥
👨💻 Source code:
/ @ckmobile
https://ckmobile.gumroad.com/l/build-...
📚Read articles:
/ instagram-ui-stories-clone-with-tailwindcs...
In this project, we are going to create the Instagram stories 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 and the gradient ring. For the avatar, we will use the DaisyUI. We will also use the Fontawesome and Heroicon to add different icons.
The following effect is exactly the same as real Instagram
The stories 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.
00:00 introduction
02:25 add components and dummy data
05:52 add tailwind css scrollbar plugin
08:40 create the gradient colored ring
11:04 add the scroll button to scroll the stories
15:23 conditonal render the scroll buttons
How to build an Instagram profile page?
• Let's build an instagram profile page...
How to create Instagram header and tooltip?
• Let's build an Instagram header and t...
📩 You can also subscribe or follow to get info or our (free) course coupons
https://app.gumroad.com/ckmobile
https://mailchi.mp/cb8cb6b3878e/javas...
📲 Follow Us:
Gumroad courses:https://app.gumroad.com/ckmobile
Udemy courses: https://www.udemy.com/user/cyruschan2/
Linkedin: / ckmobi
Telegram: https://t.me/ckmobi
Twitter: / ckmobilejavasc1
Instagram: / ckmobile8050
Quora: https://www.quora.com/profile/Ckmobile
Pinterest: / ckmobile8050
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
🔥Complete Courses🔥
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Gumroad Web and mobile complete courses
https://app.gumroad.com/ckmobile
Complete CSS course
https://www.udemy.com/course/draft/41...
React native Expo for multiplatform mobile app development
https://www.udemy.com/course/react-na...
Complete NodeJS course with express, socket io and MongoDB
https://www.udemy.com/course/create-n...
Complete Progress Web App BootCamp
https://www.udemy.com/course/complete...
Complete Modern JavaScript BootCamp from the beginning
https://www.udemy.com/course/complete...
React - The Complete Guide with React Hook Redux 2020 in 4hr
https://www.udemy.com/course/complete...
Vue JS and Firebase:Build an iOS and Android chat app [2020]
https://www.udemy.com/course/vuejs-an...
New SAT Math Course
https://www.udemy.com/course/new-sat-...
New SAT Math Practice Test Explain
https://www.udemy.com/course/new-sat-...
Get A* in GCSE Maths (Quadratic equations and graph)
https://www.udemy.com/course/get-a-in...
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