Cover graphic for Build an Instagram Clone from Scratch Part 3 with the Picbit photo feed

About this tutorial series

In this series of tutorials, we will create a full-stack Instagram clone app with Draftbit and Xano. At the end of this 3-part tutorial series, you will have built a fully-functional Instagram clone (we’ll call it Picbit) that allows your users to sign up, login, create posts to their profile, and like and comment on other peoples’ posts. This series is divided into three parts:

Setting up Authentication: Sign Up, Sign In, and Log Out
Uploading a photo and Creating a Feed screen
(You are here) Adding Likes, Comments, and Follow a user

Draftbit is a visual programming app builder whose interface will build the mobile app with native code running in the background. The app itself is cross-platform and will run on both iOS and Android. We will also use Xano, which is a no-code scalable and secure backend.

Part 3: Adding Likes, Comments and Follow a user

In this tutorial, let’s dive in and implement the following features:

Add a like to a photo
Add a comment on a photo
Follow a user account

We will create the endpoints from scratch for the functionalities mentioned above and develop appropriate screens to add the user experience in the Draftbit app.

Here is an example of creating a photo detail screen that displays total likes received on the photo, and the comments.

Picbit photo detail screen with a snow photo, 2 likes, a comment field, and two comments

All the API endpoints from Xano’s photo-sharing backend template we will add to the Draftbit app will require a user to be authorized as well as screens like user profile, settings and feed screen to be already set up. Please follow part 1 on how to implement authentication and part 2 of this series to implement features like uploading an image using either a device’s media library or camera and display them as posts on a Feed screen.

Prerequisites

A Draftbit account to build the cross-platform mobile app.
A Xano account to access and use their free and scalable photo-sharing API that is accessible via their marketplace.
Please make sure that you have implemented the authentication from part 1 and set up the user profile screen and feed screen in part 2 to continue building features from this tutorial.

How to setup Like a Photo endpoint

In Xano’s photo-sharing API, a sub-group of API endpoints provides the functionality of adding likes to a photo.

Xano Likes endpoints for adding, deleting, and querying likes records on a photo

The endpoint /likes is used to create a record in the likes database table. For example, when an authenticated user likes a photo, the record is added to the likes database table in Xano. It saves the photo’s id and the id of the user who liked the photo.

Xano likes table with two records linking photos to the user who liked them

Start by adding the endpoint /likes in your Draftbit’s REST API service:

In Step 1: add the endpoint’s name and set the Method to POST. Set the Role to Create since this endpoint is creating a new record in the database. Set the Object Type to likes.
In Step 2: add the endpoint: /likes.
In Step 3: add the following structure. The endpoint /likes requires the id of the photo as the input to create a record. Provide a test value for the photoId.

{
  "photo_id": {{photoId}}
}

In Step 4: add the Authorization header and set its value to AUTH_TOKEN. By identifying the user from their authenticated state, the user’s id will be added to the database table.
In Step 5: Click Test to test and verify the endpoint.

Animation of creating the Add Like POST endpoint with an Authorization header and testing it

How to setup a Like button in Draftbit

Start by setting up the Feed screen to add a header to each photo. This header displays the user’s avatar, handle, and a “like a post” button. Every post in the Feed screen will have this header. Take a look below at how the Components layout looks like after setting up the header:

Draftbit Feed screen with the post header row highlighted in the canvas and Components tree

In the above, add an API Request action to the Icon Button component to send the POST request to like a photo, set up the service name and the endpoint from the dropdown menu, and pass the id of the photo in the Configuration > Body.

Draftbit Icon Button API Request action calling Add Like with the photo id in the body

Also, add a Text component next to the Like button to show the likes count. The /wall endpoint setup in Part 2 of this series returns a JSON object returned from Xano’s REST API. This object contains a field called like_count to display the total like count of a particular photo.

Draftbit Feed screen with the likes count Text bound to the like count field from the Fetch data

The value of the like_count field is a number. The initial value for any photo newly added to the Feed screen will be 0. This value will only increase when an authenticated user likes a photo.

Draftbit preview of the Picbit Feed with photo posts, each showing a like count and heart button

How to setup Add a Comment endpoint

In Xano’s photo-sharing API, a sub-group of API endpoints provides the functionality of adding a comment on a photo.

Xano Comment endpoints for adding, deleting, getting, and editing comment records

The endpoint /comment is used to create a record in the comments database table. For example, when an authenticated user adds a comment on a photo, the record is added to the comments database table in Xano. It saves the photo’s id and the id of the user who commented on the photo.

Xano comments table with sample comments linked to photos and users

Start by adding the endpoint /comment in your Draftbit’s REST API service:

In Step 1: add the endpoint’s name and set the Method to POST. Set the Role to Create since this endpoint is creating a new record in the database. Set the Object Type to comments.
In Step 2: add the endpoint: /comment.
In Step 3: add the following structure. The endpoint /comment requires the value of the TextInput component and the id of the photo as the input to create a record. Provide a test value for the photoId.

{
  "comment": {{commentValue}},
  "photo_id": {{photoId}}
}

In Step 4: add the Authorization header and set its value to AUTH_TOKEN. By identifying the user from their authenticated state, the user’s id will be added to the database table.
In Step 5: Click Test to test and verify the endpoint.

Animation of creating the Add Comment POST endpoint with comment and photo id body fields and testing it

How to setup display Comments on a photo endpoint

To fetch and display comments for each photo, let’s add /comments/{{photoId}} endpoint in your Draftbit’s REST API service:

In Step 1: add the endpoint’s name and set the Method to GET. Set the Role to Get Many since this endpoint creates a new record in the database. Set the Object Type to comments.
In Step 2: add the endpoint: /comments/{{photoId}} and a test value for the photoId.
In Step 3: add the Authorization header and set its value to AUTH_TOKEN. By identifying the user from their authenticated state, the user’s id will be added to the database table.
In Step 4: Click Test to test and verify the endpoint.

Animation of creating the Get all comments GET endpoint and testing it for a list of comments

We will use the result returned from this endpoint to display comments on a Photo’s detail screen.

How to create a Photo Detail screen

When a user presses the image on the Feed screen, they will be navigated to another screen to find a photo’s details. To implement this inside Draftbit, you can wrap an Image component with a Touchable component and add a Navigate action on the Touchable component for navigating to the Photo Details screen.

Draftbit Feed screen with the Touchable around a post Image selected and a Navigate to Post Detail action

When navigating to the Photo Details screen, we will display the user’s avatar, handle, and the like count. However, the Photo details endpoint doesn’t contain this information. Instead, it requires the user’s id to fetch the details of the logged-in user.

To display information like the user’s avatar, handle, etc., is done by creating multiple Navigation Parameters for each field in Draftbit while setting up the Navigate action. You can create one or many Navigation Parameters by providing a custom key for the Parameter name under Create Navigation Parameters within the same action. This allows us to re-use field names from a particular endpoint from one screen two another.

Under Pass Data, define four custom variables and select their appropriate values from the current screen. For example, as shown below, we’re passing:

total likes count of a photo
a user’s handle
a user’s avatar
and the photo’s id

Draftbit Navigate action to Post Detail passing total likes, user handle, avatar, and photo id

Now, let’s add an endpoint to fetch the details of a photo from the /photos database table in Xano. This endpoint requires the photo’s id to be passed as a query parameter. The id here is received as a navigation parameter from the Feed screen. This determines that the endpoint will fetch the photo’s details that a user pressed in the Feed screen.

In Step 1: add the endpoint’s name and set the Method to GET. Set the Role to Get One since this endpoint creates a new record in the database. Set the Object Type to photos.
In Step 2: add the endpoint: /photo/{{id}} and a test value for the id.
In Step 3: add the Authorization header and set its value to AUTH_TOKEN. By identifying the user from their authenticated state, the user’s id will be added to the database table.
In Step 4: Click Test to test and verify the endpoint.

Animation of creating the Get Single Photo GET endpoint and testing it for one photo's details

The Components tree of a photo detail screen is shown below:

Draftbit Post Detail screen Components tree with arrows at its two Fetch components

In the above image, you will notice this screen contains two Fetch components. The first component queries the details of a single photo, and the second is to fetch all the comments and display them in a list.

When setting up the first Fetch component, select the REST Service and the endpoint to Get a photo’s details in the Properties panel. Then, under Configuration > Url Structure, select the photoId under Navigation from the dropdown menu as the query parameter value.

Draftbit Post Detail Fetch using Get Single Photo with the photo id navigation parameter in the URL

The second fetch component is configured the same way as the first one (as shown in the image above). It requires the photoId as a query parameter.

The last piece of the puzzle required to complete creating the Photo Detail screen is sending the API request to add a new comment for a photo. This is done by adding an API request action on a Button Solid component.

Draftbit Post Detail screen with the Add button selected and an Add comment API Request action

This action will trigger the endpoint “Add Comment” that was created in an earlier section of this tutorial. The body of this endpoint requires two inputs:

photoId is obtained from “Navigation” in the dropdown.
commentValue is the value of the Field Name prop on the TextInput component. It is available under “State” in the dropdown menu.

Draftbit Add comment API Request action with the photo id and commentValue state as body values

The value commentValue of the Field Name prop is set by selecting the TextInput component in the Components tree and then navigating to Configs (second tab) in the Properties panel.

Draftbit Text Input Configs tab with the Field Name set to commentValue

The Photo Detail app screen is now ready, and you can add a comment to a photo.

Animation of opening a photo from the Picbit feed and adding a comment on the Post Detail screen

How to follow another user

Currently, the logged-in user is adding a comment to their photo because the Feed screen only shows photos associated with one’s account. Xano’s photo-sharing API contains an endpoint /user to query all the user records from the user database table. We will add a screen where all the app users are shown so that currently logged-in users can follow them and see their posts on the Feed screen.

Let’s start by adding the /user endpoint.

In Step 1: add the endpoint’s name and set the Method to GET. Set the Role to Get Many since this endpoint creates a new record in the database. Set the Object Type to users.
In Step 2: add the endpoint: /user.
In Step 3: add the Authorization header and set its value to AUTH_TOKEN. By identifying the user from their authenticated state, the user’s id will be added to the database table.
In Step 4: Click Test to test and verify the endpoint.

Animation of creating the Fetch users GET endpoint and testing it for a list of user records

Add another endpoint to follow a user.

In Step 1: add the endpoint’s name and set the Method to POST. Set the Role to Create since this endpoint is creating a new record in the database. Set the Object Type to follows.
In Step 2: add the endpoint: /follows.
In Step 3: add the following structure. The endpoint /follows requires two ids in its body configuration. The logged-in user is the follower ( follower_id) and the user who is being followed (followed_id).

{
  "follower_id": {{followerId}},
  "followed_id": {{followedId}}
}

To successfully test this endpoint, please pass the authenticated user’s id as the value of followerId and the id of an existing user in the database table as followedId.
In Step 4: add the Authorization header and set its value to AUTH_TOKEN. By identifying the user from their authenticated state, the user’s id will be added to the database table.
In Step 5: Click Test to test and verify the endpoint.

Animation of creating the Follow POST endpoint with follower and followed ids and testing it

Then, let’s add a Users screen that will display a list of users, and a follow button on the User Profile screen.

Start by adding an Icon Button on the User Profile to allow the logged-in user to navigate to the Users screen. Setup a Navigate action on this button component in the Properties panel > Interactions. Under Pass Data, let’s pass the id of the logged-in user as the Navigation Parameter.

Draftbit Profile screen Icon Button with a Navigate action to Users passing the logged-in user id

The Users screen will display the user’s avatar, their handle, and an Icon button to follow them. It uses a Fetch component to get the users list from the user database table and a List component to display the list of users.

Draftbit Users to follow screen with a Fetch component using the Fetch users endpoint

The Icon button has two actions: API Request and Navigate.

Draftbit Users screen follow Icon Button with API Request and Navigate actions

The API request action will trigger the /follows endpoint. It requires two ids to be passed as the Body configuration.

Draftbit API Request action calling Follow a user with followed and follower ids in the body

The Navigate action will redirect the user to the Feed screen to view the followed user’s photos.

Draftbit follow Icon Button Navigate action set to the Bottom Tab Navigator

Once the logged-in user follows another, their photos are shown on the Feed screen.

Picbit Feed screen showing posts from the logged-in user and a followed user

The follows database table in Xano also stores a record of the follower’s and followed user’s ids:

Xano follows table with one record of a follower and the followed user

Conclusion

This concludes the series of building a photo-sharing app with Draftbit and Xano from scratch. Tools like Draftbit enable both non-developers and developers to develop apps without coding but using the same paradigms used in open source frameworks like React Native.

Next Steps

To integrate a Backend of your choice, check out the list of all backends that have first-class support in Draftbit.

Building an Instagram Clone from Scratch with No-Code, Part 3: Interact with Content