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

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:

1. Setting up Authentication: Sign Up, Sign In, and Log Out
2. Uploading a photo and Creating a Feed screen
3. (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.

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.

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.

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.

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:

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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

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.

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.

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.

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.

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

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.

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.

‍

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.

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.

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

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

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

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

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

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

• Learn how to reset a TextInput field after a Screen is unfocused and clear the TextInput field component.
• Add inline validation using Custom Function and Low-code in Draftbit.
• To integrate a Backend of your choice, check out the list of all backends that have first-class support in Draftbit.
• Ask for Help in the Draftbit community

‍