Templates
Template Setup Guides

Clonegram - Images like Instagram Template

Template page link: https://zeroqode.com/template/clonegram---images-like-instagram-template-1509722383555x389657806226849800

Introduction

Clonegram no-code template beautifully showcases photos as a clone of Instagram functionality, looking great both on mobile & desktop devices. It comes with all the main features of Instagram like image posting (including filters), user following, post liking, messaging, and much more. If you are looking to build an image based social network or highlight your portfolio on a platform built without code, look no further than this Bubble-based no code app template.

Features

  • Responsive design

  • Messaging system

  • User following and followers

  • Uploading and sharing pictures

  • Post liking and comments.

  • Messaging between users.

  • Admin dashboard

Data Structure

User

The user data type holds fields that include userNumberOfFollowers (this field takes a number value), userLikes (takes a list of posts), userLikes__ (List of users), userLikes___ (list of Likes), userFollowing, userNotification, email, userProfilePicture, etc.

Comment

Users can always comment on posts and this type holds those comments. Fields like the commentContent, commentPost (associated post), user (associated user) and commentRegex.

Conversation

Conversations between users are stored within this data type inside the conversationparties (Takes a list of users) field and the Messages (Takes a list of messages) field

Filters

Posts made by users can be created with added effects using filters. This data type holds two fields that include filter ( takes an image) and filterURLEnconded(takes a text). Both fields are associated to the filters available for post creation.

Follow

This type only holds the field following ( Takes a value of the associated user).

Like

Like data type holds the field postLike that is associated to the post. So for every like, the post it is associated with is known here.

Message

The message data type stores the message content and recipient inside the messageContent field and messageRecipient respectively and also determines a recent message with messageNew.

Notification

Users can get notifications when they get follows or likes. Notification holds notifFollow field, notifLike, notifNew (takes either yes or no and is true when he notification is recent), notifReceiver (the associated user).

Post

When a post is created or image is uploaded, this type holds associated details in the following fields; postComment( takes a List of comments), postImage, postLikeCount (takes a number value), postNotifications, processed (takes either yes or no), etc.

Pages

This template has just three pages and more reusable elements. The pages include:

index

When logged in, the index page is the landing page for this template. It populates a list of uploaded images and shows the number of likes and comments. The index page also allows for a quick search of images posted, creating new posts and the user can navigate to views like the profile, explore section, notifications view, etc. All these views are reusable elements.

Custom States

State

Element

Note

userMenu

headerDesktop

This state sets and displays the navigation bar.

postStyle

index

This state determines how posts are displayed.

ready

postList User Profile, postList Main

Also determines how a view is displayed.

nicknameExists

1 Group Profile Main

Used to detemine how a view is displayed

style

1 Group Profile Main

Also used to determine how a view is displayed.

view-listing-1

This page contains a repeating group where images uploaded are populated on. This list also displays details about the post that include the user's picture, the date the post was created, number of likes, number of comments and options to like and comment on a particular image.

Custom States

State

Element

Note

posts

view-listing-1

Used to display to a view

view-listing-2

This page is similar to the view-listing-1 but it also has an edit button.

Custom States

State

Element

Note

posts

view-listing-2

Used to determine how a view is displayed.

Dashboard

This page contains tools for managing the app. Like viewing the list of users, delete the users, delete posts, view graph statistics of user and posts by month or year. The page maintains overall design of template.

Things to note

Most of the pages within the template are created as reusable elements.

Admin dashboard

For security purposes the template has limited rights for potential customers. What that means is that you will not be able to use the admin features until you buy this template and enable the editing features.

If you already bought the template you can enable the additional admin features by following the steps bellow:

  1. Go to Page “Dashboard” in editor and look for the Button “Delete” from the Popup “Delete Users”

  2. Select the Button and clear the restriction on the Conditional tab.

3. Do the same with the Popup “Post delete”.

4. To modify user’s details remove condition on Button “Save” from Popup “Profile edit”.

Demo to preview the template