How to Build an Instagram Clone With React Js, Next Js and Bootstrap 5 Tutorial for Beginners

Intro to how to build an Instagram clone with react js and next js

Hello, you will learn how to build an Instagram clone with react js and next js in today’s episode.

To build our Instagram clone template, we will use Bootstrap 5.

I’m super excited to show you all of that because it’s one of the coolest applications we will build together.

You will learn many useful things today.

One of them will be to get items from API, build a photostream or user profile.

This article is like a plan for our application and tells us what we do step by step.

You can build the application by yourself and write the code that you feel will be good or build it step by step.

If you prefer the second version, here is the youtube video where you will learn how to build that in a practical way by writing real code with me:

How to create Next.JS application

To save tons of the time and focus just on coding, I’ve created a project’s starter that you can find here:

https://github.com/Duomly/nextjs-photo-app-duomly/tree/start-here

You need to clone the GitHub repository and start coding in that branch.

How to create a header in Next.js

The header is the element that almost every app needs, and we’ll need that element as well.

In this case, we need to create a single component named header.jsx and add the necessary template.

How to create footer in Next.JS

Same as with the header, we’ll need the bottom element named footer.

We’ll need to create a footer.jsx file and component named footer.

Next, we need to add a footer template that will contain the necessary buttons. In my case, there is a button that redirects to the homepage, and the second one that redirects into the user’s profile.

Add header and footer in app.jsx

Our header and footer elements are ready, great!

Now, we need to implement them in our application.

To do that, we need to open the app.jsx file and put these elements into the template that we’ll render.

How to get data from API in the React or Next.JS

What is the main element of the photo applications?

Photos!

To get photos, we need to call a fake API that will return a json file containing mocked data.

Open app.jsx and fetch data from ‚/mocks/items.json’).

To have the first fire call, you can add it in the “useEffect” hook.

How to create card component Next.js

The second important element that we can observe in the photo-related applications is the card that contains photos, hashtags, and data related to the picture.

To have this logic in our application, we need to create a component “Card” in the file card.jsx.

I’ve created that component in the “components/home” path.

Create cards component template

Next, inside the card component, we should create an HTML template that will look similar to Instagram.

I’ve used the bootstrap 5 card element with some modifications, and I’d recommend you to do the same.

Bootstrap 5 is a very cool CSS framework now, they changed the method of building applications now, and it’s kinda similar to the Tailwind CSS.

I’d say elements design is improved a bit as well.

Add card component into the homepage

The card was one of the biggest HTML templates to build, and you already made it, congratulations!

Now, we should let our app to render these cards.

To do that, we should visit the homepage, in this case, it’s pages/index.jsx.

Next, we should create a map function and apply it to our data, render Card components, and pass the photo’s data into each of them.

How to create a route in Next.js

Next.js doesn’t require us to create separated routing.

It’s very useful, especially when we need to build an app quickly.

To set up routing, we just need to visit directory “pages”, and create a directory/file related to the path we want to hit later.

For example, in the case when we want to have path “/user/1”, and “1” is an id, we should create directory “user”, and file “[id].jsx” inside that folder.

Let’s do it now, so we will be able to visit users’ profiles in the next steps.

How to create details view in Next.JS

When we have our routing done, we should visit [id].jsx and create some logic there.

Le’ ts start from creating a standard functional component with the name “UserPage”.

That component should accept props.

How to get routing id in Next.JS

Because it’s a very small app that uses fake API, we’ll not go into big stuff like redux or handle state somewhere.

In this case, we just took all the data, and we need to filter it now.

Let’s create a logic that will be able to take the user’s id from the routing.

Next, we need to create a function that will filter all the photos and pick only those related to our user.

If the visited user doesn’t have any data, let’s assume the user doesn’t exist, and the router should redirect us into the “/” path.

As the last step, we should create useState hook and setup its getter as “bookmarked”, and setter as “setBookmarked”, the default value should be set as “false”.

Create UserPage template

This is the last part when we need to create templates.

As well as in the step with creating cards, here I’ve used bootstrap 5 to create that template.

You can check the youtube video of how I’ve made it, or you can do it by your own code and just compare later if you did it similarly.

Trying to complete by yourself is a much better way of learning. Even if you do many mistakes, it’s still better.

How to add styles in Next.js

The last part of the application is the styling.

Always, with every front-end project, styling is a crucial thing.

Even if you use ready-made frameworks like bootstrap or tailwind, there will be a bit to change.

In my case, I had to polish some paddings or setup white-space as “break-spaces”.

The next thing that I had to add was to change the bootstrap color configuration to have the pure black.

Conclusion of how to build an Instagram clone with react js and next js

Your Instagram clone application is ready, congratulations!

In today’s episode, you’ve learned how to use React.JS and Next.JS to build fantastic applications.

I’m super excited to teach you all of these fantastic things and see when our students get that strong skills.

What is even better, in the next episodes, we will build together something much bigger, so don’t forget to subscribe to our channel and follow us.

Here is the GitHub repository with my code, so you can verify if your code is the same.

Ready code: https://github.com/Duomly/nextjs-photo-app-duomly/tree/master

See you in the next episode, and thanks for coding with us,
Radek from Duomly

Twitter LinkedIn Pinterest