3nstagram. Web3, Rails and React — Web3 intagram / Let’s cook it! (Part 2)

Photo by Prateek Katyal on Unsplash

Welcome to the next chapter! Today we will be developing the UI for interacting with the contracts we developed on the last episode.

For this, we will be developing a Next.js project using React.

Let's get hands on! The basic idea would be to create a simple UI that would allow us to display our uploaded posts and upload a new one.

I have done a quick sketches on Figma to help you wrap your head around it.

Main idea for the design

So, the main idea would be something like the screenshot above.

For starters, let's create our next.js project by running:

npx create-next-app 3nstagram

Then, let's add Tailwind for easiness of design.

Now that we have eveything in place, let's start with the components.

First of all, we would need to have a main hader for this profile view, where we will put the user's profile image as well as username and posts uploaded (we will use mocked up data for now)

Go ahead and create a components folder under your src folder for storing the new components we will be creating.

On that, create a new folder called ProfileHeader , this will contain the code for the header:

This component can later be mounted into any page within our next.js project. In this case, we will be using the root index.tsx . Go ahead and import it there. It will give you the following result:

Here, you can see how we are saving space for the user profile image as well as their username and posts.

However, why is it showing an account if we don't have any yet? We have passed it as a prop to the component, as at the moment we were just designing the UI but let's connect it to Metamask so we can have the right wallet address.

Create a new button on the main page of the webapp, that we will use for calling a handler that will request Metamask for the user's accounts.

Also, we would need to store the user's wallet address in a variable, so that it can be displayed later. For such matter, we will be using the useEffect hook.

After all, the page will look as follows:

In my case, instead of using the button itself, I have created a div that has the onClick handler, which triggers the Metamask connection handler.

It will look as follows:

Now, let's just add a ProfileBody to finish up the whole UI mockup.

The resulting component will be:

And the final look at the UI will be as follows:

And that's it! Now we have our wallet address displayed and stored within our app context so that later on, we can use it to mint and retrieve our NFTs

Stick around for more incoming chapters of 3nstagram and have a great day!

Pavs.