Build Instagram profile page UI clone w/Next.js TailwindCSS
What you'll learn
- Build a real world app
- Nextjs and tailwindcss integration
- Consume unsplash API
- Setup environment variable
- React hooks
- basic reactjs
- basic CSS
Create Instagram UI clone with Next.js and tailwind CSS
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.
All of the React components that make up a website's user-facing section are rendered on the server first. This means that after the HTML has been transmitted to the client (the user's browser), the user can read the material on the page without having to do anything further. The user perceives page loading speeds to be substantially faster as a result of this.
Why tailwind CSS?
Tailwind CSS is a popular low-level CSS framework with a lot of customization options. Bootstrap is widely used as a comparison. They are, nevertheless, essentially different. Rather of delivering pre-designed components like Bootstrap, Tailwind provides building pieces that allow developers to quickly create designs.
Why Daisy UI?
Daisy UI enhances Tailwind with attractive component classes that are totally customizable and themeable. Daisy UI creates a scalable and designer-friendly design system.
What we will cover
Using environment variables to store the data that need privacy. In this project, we store the Unsplash API to .env.local to prevent it from opening to the public. It will not upload to git during git push. We also demonstrate how to add the tailwind CSS plugin, add custom CSS at the tailwind config file.
Who this course is for:
- Developers who want to build a real world app with Nextjs and tailwindCSS
He got a master degree in data science and statistics, computer science in the University of Hong Kong.
He got GPA 3.55/4.0 and got A in the following subjects
Foundations of Data Science
Statistics of Management
Regression in Practice
Simulations and Statistical Computing
He now enjoys teaching others and continues to learn every single day.