Creating Instagram Follow Card with Material-UI

The course is available at http://bit.ly/2SZDYyw

In this hands-on video, I will demonstrate how you can create an Instagram Follow Card with Material-UI and React.

You will see the use of Components from Material-UI being used such as Typography, Grid, makeStyles, Button, and Avatar.

The codebase is available at https://github.com/bonsaiilabs/instagram-follow-card

Full Transcript

Hello there, it’s Harit from bonsaiilabs. In today’s video I will show you how to create an instagram follow button using Material-UI, so let’s get started

If you have an instagram account, you may have seen these cards to follow users on Instagram. How about we create a this card today using ReactJS and Material-UI. In order to make the code manageable, I have divided it into smaller components. The first one will be called Header which will contain the cross icon. The second one will be called ChannelPhoto that will contain the photo of the user. The third one will be called ChannelUserName. This will contain 2 items, the username and the verified icon. Next up, I will create ChannelName component which will contain the name of the channel. And finally, we will have FollowButton Component which users click to follow a certain user on instagram. Let’s go ahead and create this card.

I will open up the code sandbox to create this card. We will use the official React template which created by the CodeSandbox team. Once the app is ready, I will first increase the font size so that it is easier for you and me to follow the code as I write it. Next, in App.js we can see the boilerplate code which is what is displayed on the right-hand side browser as the output. I will first create a new JSX file called InstaFollow.jsx. This is where I will write the complete code for the Instagram Follow Card. For now, I will import the React dependency and create a component that will return Coming Soon in the H1 heading. Next, I will go to App.js, remove the boilerplate code and add InstaFollow component so that it is called now. Once I do that, we can see the Coming Soon output in the browser. Great!

I will now add the dependency for @material-ui/core and @material-ui/icons which will be used in the creation of the card. Now, I will go to the InstaFollow.jsx file where we will write most of the code. I will first replace this code with the Grid container and add the import from material-ui/core. This is because the card has items which needs be contained in a box, and I will leverage Material-UI Grid system for that. Next up, I will place 5 components inside the grid, one for each sub component that we saw previously. These components do not exists and we will write them in just a few moments. For now, I will comment out all others except Header. I will create a component called Header which returns a H6 Typography component and the text is Header. I will also add the missing import. With that, we can see that errors are gone and we can see Header text in the browser. We will do the same thing for all other components for now, just so that we can call them and remove the commented out code. This will help us replace the implementation, one component at a time. However, as we see, all these components are placed next to each other which is not what we want. We want them to be aligned vertically with one component per row. For that, we will set the direction property of Grid to be column. By default, the value is row, which is why the elements were aligned one after the another in the row. After the change, we can see all elements are coming one after the another vertically aligned. But this looks no way closer to our Instagram card component. There are no borders, so we don’t even know how wide is the component? The time has come when we need to add some styles.

I will first import the makeStyles from material-ui/core. Next, I will create a useStyles const that will call the makeStyles() function, passing a higher-order function. The higher-order function takes the styles object and returns an object. This is where we will add our styles for the card. I will first add styles for root. I will apply the root style to our grid container in just a moment. I have added 4 properties here - the gray border, padding around the content, a border-radius to give a curve to the border and a maxWidth to fit the content inside the container. Now, I will create a classes variable and call useStyles() method. Then, I will use the className property on grid container and assign classes.root to it. And bam! Here you see the output as a card with 5 rows inside it. Now, that we have the structure of our instagram follow card, let’s work on the Header component. I will make the Header a Grid container and 1 grid item. I put a grid breakpoint of xs with a value of 1 out of the 12-point grid system. Then, I will import the Clear icon from material-ui icon and call it ClearIcon. Then, I will use this ClearIcon inside the Grid item and as we can confirm, it appears on the output now. But, it should be on the right side instead of left. Let’s change the container settings using justify property with the value of flex-end. With this we can see that ClearIcon now shift to right, the way we wanted. But it looks bigger and is not gray in color, so let’s add few styles. Back in our makeStyles method, I will add a new property called header. I will apply 2 styles here. First, I will add a color property, and assign a gray color from our theme with a 40 variant. Next, I will set the height to be 15 pixels to make it smaller. Great! Let’s assign this style next. Back in our component, I will add a classes prop to Header and pass the classes to it. Then, in our Header component I will accept classes prop. I will use className property on ClearIcon and assign value of classes.header to it. And we can see the clear icon with the gray color and smaller in size just how it looks in instagram follow card.

Moving on, let’s implement ChannelPhoto component. Here, I will return the Avatar component provided by Material-UI. I am using alt property and the src refers to the image of National Geographic. I will add the import for Avatar from Material-UI here. And we can see that the avatar image popped up in our grid container. Cool!. It looks smaller than what we need however, so let’s add some styles to it. I will first add a way in the component to receive the classes prop. Then, I will use the use classes.avatar property assign styles to out component. I will also pass the classes prop to ChannelPhoto from our top level grid container. And then, we will add a new property called avatar in our makeStyles method. I will add width and height property and assign the spacing value using theme.spacing method provided by Material-UI with value of 7. But wait, our photo still looks the same. Oh, its because in Avatar component I used classes instead of className property. Once I change that, we can see that our photo is larger than before. But, somehow it does not align in the center of the grid container. For that, I will add alignItems property on top-level grid with the value of center, and this will bring all the items in the center of the grid container. Cool! So, we have Header and ChannelPhoto ready. Let’s work on ChannelUserName next!

Now, this component contains 2 things - a text value and an image with arrow sign. So, I will first add an icon to src folder called verified.png. Then, I will import this image and call it verified. Now, we are ready to work on ChannelUserName component. I will replace its existing implementation with another Grid container. Let’s review what’s going on! The top level grid container contains 2 grid items. The first Grid items contains a xs breakpoint with value of 3. It contains a Typography component with body2 variant and prints the value of NatGeo. The next Grid item contains a xs breakpoint with value of 1 and contains an image tag with the value of verified image. Overall in this container, we keep thing aligned in center using justify and alignItems property of container to be center. To keep enough space between the two grid items, I have used spacing property on container with the value of 5. But hang on! This breaks our entire component with this large verified image. It’s time to add some styles to ChannelUserName component. I will first add classes props on the component and add className property to image with the value of classes.verified. Next, I will pass on the classes props to ChannelUserName from our top level component. And finally in our makeStyles method, we will add a new property called verified. I will add height property with the value of 20. With that, we can see that the verified icon looks smaller and the way we want it. I will also add a new property called channelUserName to make the font-weight: bold using the theme.typography.fontWeightBold property. Now, let’s put this to use. Back in our ChannelUserName component, I will add className property to Typography component with the value of classes.channelUserName. And with that, we can see that username is now bold. But there is very less space between the image above and the username, so let’s add some space between them. I will wrap our Avatar in a div and add className property with the value of classes.photoContainer. Then in the makeStyles, I will add a new property called photoContainer. I will add marginBottom property with theme.spacing of 1. And with that, we can see the space added between the 2 components. Probably added a space value of 2 gives much better view than spacing of 1.

Now let’s work on ChannelName property. It returns a Typography component with a textSecondary color, making it grey and also variant of caption which makes the text small as we can confirm here. And Finally, lets create the FollowButton component. I replace it’s implementation to return a Button component. I use disableElevation property to hide any shadows beneath the button. I use the primary color for the button and contained variant, which fills the primary color in the button. I also make the button small considering the follow card is not big in general. Now, I will add the import of Button component from @material-ui/core and as we can confirm that a button shows up. The button and the channel name have less space in between them so let’s fix that. I will wrap channelName in a div and assign its property className the value of classes.channelNameContainer. I will also add classes prop to the component. Then in the top level grid component, I will pass the classes prop to ChannelName component. Then in the makeStyles, I will add a new property called channelNameContainer. I will add a marginBottom property with the theme.spacing(1). I will also stretch our follow button. For that, I will add a new property called followButton. In this, first I will set the text transform property to none, because I the text label Follow exactly same as the instagram component, not all caps. Then, I will add paddingRight and left with theme.spacing of 6. I will also change the fontWeight to be medium using theme.typography.fontWeightMedium. Next we will use this property. First we will pass classes prop to FollowButton. Then, in our FollowButton component, I will first accept the classes prop. Then, I will add className property to Button and add value of classes.followButton and here you go! We have completed creating out Instagram follow card using React and Material-UI. We can go to the full browser window and compare our implementation with our desired version. Not bad right?

Now, you may see that button colours are different and font family looks a different too, right? Yes, and that’s where we can work to customize our theme to match with with exactly is needed. If you are a developer and interested in learning this cool stuff, look no other place than our Material-UI with React course at bonsaiilabs. You can find the link in the description below. You can watch out the trailer to find what’s covered. It’s got the review from library author himself. At this page, you can find the detailed description of the course, the complete syllabus and reviews from other learners who have taken this course. Best of all? You can watch out the FREE videos of the course on the website itself, so make sure to click on the link in the description below and checkout yourself. Thank you again and I will see you again in the future with a new hands-on demo!