Build a Social Media App with Codular

Build a Social Media App

With Codular's new social components, you can build apps like Instagram or Twitter without code. Here's how.

Components You'll Use

• StoryCircle - Story avatars with glow ring
• PostCard - Full social posts with image, text, likes, comments
• LikeButton - Animated heart with count
• ImageGallery - Photo grid for profiles
• ChatBubble + ChatInput - Direct messaging
• Avatar - User profile pictures

Screen 1: Feed

Stories Bar

Add a HorizontalScroll at the top with StoryCircle components:

• Your Story (with "+" icon)
• Friend stories (with gradient borders for unseen stories)

Post Feed

Add a ScrollView with multiple PostCard components:

Each PostCard has:

• author: Username
• authorAvatar: Profile picture URL
• content: Post text
• image: Post image URL
• likes: Like count (bind to variable)
• comments: Comment count
• timeAgo: "2h ago"

Events:

• onLike → flow to increment likes variable
• onComment → navigate to comments screen
• onShare → share flow (uses the "share" flow node)

Screen 2: Profile

• Avatar (large, centered) with user photo
• Text for username and bio
• Container (row) for stats: Posts | Followers | Following
• ImageGallery (columns: 3) showing user's photos

Screen 3: Create Post

• Image preview area
• Button "Add Photo" → pickImage flow node
• TextArea for caption (variableId: "postCaption")
• Button "Post" → flow to add to feed array

Post Creation Flow:

event → pickImage(variableId: "postImage") → generateId(resultVariableId: "postId") → arrayPush(variableId: "feedPosts", value: {id, image, caption, likes: 0, comments: 0, timeAgo: "just now"})

Like Button Logic

The LikeButton component handles this automatically:

• Set variableId to your likes count variable
• Set likedVariableId to a boolean variable tracking if liked
• On press, it toggles the liked state and increments/decrements the count

Adding Comments

Use MessageList on a comments screen:

• Each comment is an object: { text: "Great photo!", isSent: false }
• Add ChatInput at the bottom for new comments
• onSend → arrayPush to comments array

Pro Tips

• Use CircularProgress for profile completion indicators
• Use Badge for notification counts
• Use BottomTabs for Feed/Search/Create/Profile navigation
• Use SkeletonLoader while content loads

Start building your social app at mobcraft.in!