---
# System prepended metadata

title: Build an Instagram Clone
tags: [Builds]

---

---
tags: Builds
---
<h1>Build an Instagram Clone</h1>

Author: [@sydneylai](https://twitter.com/sydneylai)

<h3>Scope of this Tutorial</h3>

This example will demonstrate how to build your own Instagram Clone with OutSystems. You will walk through how to connect a database, manage dependencies for plugins and replicate the front-end of a social media application. This app is  easy to build with only a few drag and drops and you will have yourself a super sweet clone!

**Finished Demo:** 

![](https://i.imgur.com/aGuAkAe.png)

<h3>
 Start Here
</h3>


**Step 1: Start with a Phone app**
When you launch Service Studio, you want to create a mobile application by clicking on the Phone app. 

Drag a Screen Widget into the center and name it 'Home' as your homescreen. Set the screen to Anonymous so anyone can access without a login account.

![](https://i.imgur.com/85Ewxo0.png)

**Step 2: Set the foundations**
In your navigation find the electric plug icon to Manage Dependencies so that you can have a reusable service: 
Camera Plugin
OutStagram Core - the core is the database, and its methods to create posts

![](https://i.imgur.com/KUOCp1M.png)

**Step 3: Connect the database**
Drag a screen widget into the canvas. Name the Empty Screen "Home Screen"

Pre-load the database that was previously created by dragging OutStagramCore onto the screen and creating an Entities titled “Post”. 

Data > OutStagramCore > Post (Entities) and drag into the screen

[The Image]
Remove any non-relevant descriptions in the x.y Expressions and remove the StyleClass “img-circle” and head to Styles to adjust the width to “FILL”. 

**WARNING:**

![](https://i.imgur.com/P0a4Eu4.png)

:bulb: If your image is not properly sizing then go to the Widget Tree and drag and drop the image file out of the containers. 

**Step 4: Save and Publish**
Save and publish by clicking on the green arrow in the center, now this version is available on the server. 

**Step 5: Posting images**
On your Interface tab, head to GetPosts Entity and add a source named "PostLike" On the second “Joins”, the Post will be switched to “With or Without” PostLike. The folder structure and script will show the Post.Id, UserId and GetUserId

>Post.Id = PostLike.PostId and PostLike.UserId = GetUserId()

![](https://i.imgur.com/FyyMSFJ.png)

**Step 6: Heart Icon**
Search for the Icon widget and drag it over into the proper container, otherwise the image will be stuck in an improper container: 


Continue on by decreasing the size to “Font Size” and set the color of the heart. 

Enclose the Icon in an If, and set the open If condition by the following folder structure: 
GetPosts > Lists > Current > PostLike > UserId where the script will return: 

>GetPosts.List.Current.PostLike.UserId = GetUserId()

![](https://i.imgur.com/Kj2sgOe.png)

Go back to search an Icon for an empty heart to drop an If Statement into. 

Make sure your Heart icons are enclosed in a false/white branch. 

![](https://i.imgur.com/HNgecew.png)


**Step 7: Backend for “Liking” an image**
Link an If to action, where when a user likes an image, the action will toggle the like of the post, which will be added to the action logic flow. 

Right-click on the heart icon and add a New Client Action,and  rename that action from “LinkOnClick” to “ToggleLink”, and run the Server Action. Drag and drop the Run Server Action to the Action Flow, select the OutStagramCore

![](https://i.imgur.com/mnP2qiF.png)


![](https://i.imgur.com/HZVgyY3.png)

Now set the following
>UserId: GetUserId()
PostId: GetPosts.List.Current.Post.Id

Now drag & drop your GetPost Entity onto your logic flow so that you see a refresh for GetPosts. Since you made changes to your serverside, you need the referesh to reflect the changes.

**Step 8: Show Likes**
Head to your MainFlow screen, right-click and add a Block, rename the block to ”ShowLikes”. Add an Input Parameter in your ShowLikes and rename the PostId. Double-check that the built-in AI has recognized your Data Type, otherwise ensure that it’s a Post Identifier. 

**Step 9: Post Database**
Right click to Fetch data from the database and drag the Data > OutStagramCore > PostLike entity onto your screen, the Aggregate you just created. I want the likes for the given PostId, so head to Filters and Add Filter, which should appear as: 

>PostLike.PostId = PostId

**Step 10: Show Likes Continued**
Click on the ShowLikes block and drag a x.y Expressions widget and set the parameters to: 
>GetPostLikesByPostId
GetPostLikesByPostId.Count

![](https://i.imgur.com/idhhKSa.png)


Put in an Example value to maintain the WYSIWYG aka a placeholder, and then type next to it “likes” in the text space. 

![](https://i.imgur.com/sB1MvxU.png)

Back in Interface, HomeScreen, drag the Block ShowLikes > PostId

>“GetPosts.List.Current.Post.Id”

**Step 11: Take and Post Photos**

Back in the Home Screen, drag and drop the camera icon into the top right corner. 

Now right click and link the camera to a new screen named UploadPicture. 
![](https://i.imgur.com/WGf9KBi.png)

Within the UploadPicture Screen and add a Local Variable to store the picture, named "Picture". You can see the embedded AI will suggest the data type: Binary Data. Add a second Local Variable to add the Post’s Description. 

In UploadPicture > Events > add OnInitialize to bootstrap the camera plug-in

![](https://i.imgur.com/oOi0raL.png)

Run (drag and drop) a Client-side Action, Select Action: CheckCameraPlugin

![](https://i.imgur.com/5tq8iYD.png)

Drag & drop an If to test to test the output of the camera check: 
>CheckCameraPlugin.IsAvailable

Right-click on the If Statement and Swap Connectors

For the following If statement branches: 
**False Branch:** Add a False, in case the Camera is not working, add an End widget after the Message widget. Message can be written as: "No camera available" and drop an End to end the logic.

**True Branch**:If action is available, add a Run Client Variable > Camera PlugIn > Take a Picture

* Drag Assign to the logic flow
* Assign the Variable = Picture
* Assign the x.y Expression = TakePicture.ImageCaptured
* Click on UploadPicture Interface screen and set the UploadPicture Screen's  title to “Upload Picture”
* Add a Form widget to edit the post
* From the right, drag the ‘Picture’ Local Variable to the center
* Drag the description into the center
* Change the button from ‘Save’ to ‘Upload’

![](https://i.imgur.com/8fXPvvW.png)


**Step 12 Edit Button**
Double click the 'Upload' button to the Action Flow
Run a Server action: OuStagramCore > API > NewPost

![](https://i.imgur.com/L8WkACU.png)


![](https://i.imgur.com/OlpnCDh.png)

Click on “NewPost
>UserId: GetUserId()
    Picture: Picture
    Description: Description 

To finish this flow, on UploadPicture > UploadOnClick action flow, and send the user back to the homepage by adding the Destination widget and Select Destination: Home

Delete the End button and drag the logic from New Post to the MainFlow\Home

![](https://i.imgur.com/zshcbPj.png)


**Save and Publish Once More**, now play with your Instagram Clone app!
