1440px
Key Highlights
Full social experience
Stories feature
Real-time messaging
Engagement-focused
About this template
Create the next social media sensation with this comprehensive template. Features feed, stories, posting, messaging, profiles, and discovery. Designed for engagement and ease of use.
What's included
Photo/Video feed
Stories feature
Direct messaging
User profiles
Discover page
Notifications
Post creation
Social interactions
Best for
Social NetworksCommunity AppsPhoto SharingCreator Platforms
Industries
Social MediaEntertainmentCommunity
AI Generation Prompt
Create a social media mobile app: 1. FEED: - Stories bar at top (circular avatars with ring) - Posts with: - User avatar, name, time, location - Photo/Video content - Like, Comment, Share, Save buttons - Like count - Caption with "more" truncation - Comment preview - Pull to refresh - Infinite scroll 2. STORIES: - Full-screen story view - Progress bar at top - User info overlay - Tap to skip, swipe for next user - Reply input - Reactions 3. CREATE POST: - Photo/Video selector - Filters carousel - Crop/Edit tools - Caption input - Location tag - Tag people - Share button 4. EXPLORE/DISCOVER: - Search bar - Grid of trending posts - Category tags - Suggested users - Trending hashtags 5. MESSAGES: - Conversation list - Unread badges - Online status indicators - Message thread: - Bubbles (sent/received) - Images/Videos inline - Typing indicator - Read receipts 6. PROFILE: - Profile photo and cover - Bio, Link - Stats: Posts, Followers, Following - Edit profile button - Posts grid / Saved / Tagged tabs - Settings access 7. NOTIFICATIONS: - Like, Comment, Follow, Mention notifications - Grouped by time - Profile photos - Action buttons (Follow back) DESIGN: - Clean, content-focused - Bottom navigation - Smooth transitions - Native feel COLORS: - Background: #ffffff or #000000 - Primary: #e11d48 (for likes) or brand - Text: #1f2937 RESPONSIVE DESIGN (CRITICAL): - Mobile-first approach: Design for 375px width first, then scale up - Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px) - Touch targets: Minimum 44x44px for all interactive elements - Navigation: Hamburger menu on mobile, full nav on desktop - Typography: Scale down headings on mobile (text-2xl → text-lg) - Spacing: Reduce padding/margins on mobile (p-8 → p-4) - Images: Use responsive images with srcset, object-fit: cover - Grid: Stack columns on mobile (grid-cols-1), expand on desktop - Hide non-essential elements on mobile with hidden md:block - Test at 375px, 768px, 1024px, and 1440px widths SEO & AI OPTIMIZATION (CRITICAL FOR DISCOVERABILITY): 1. HTML HEAD REQUIREMENTS: - <title> tag: Primary keyword first, brand last (max 60 chars) - <meta name="description"> : Action-oriented, include primary keyword (max 155 chars) - <link rel="canonical" href="[full-url]"> - <meta name="robots" content="index, follow"> - Open Graph: og:title, og:description, og:image (1200x630), og:url, og:type - Twitter Card: twitter:card="summary_large_image", twitter:title, twitter:description, twitter:image - AI crawler discovery links in <head>: <link rel="alternate" type="text/markdown" href="[url].md" title="Markdown"> <link rel="alternate" type="application/ld+json" href="[url].json" title="Structured Data"> 2. SEMANTIC HTML STRUCTURE: - Single <h1> containing primary keyword (first 40-60 words answer the page's main query) - Logical heading hierarchy: h1 > h2 > h3 (never skip levels) - Use <main>, <article>, <section>, <nav>, <header>, <footer>, <aside> landmarks - Each <section> should have an aria-label or heading - Use <figure> and <figcaption> for images with context 3. JSON-LD STRUCTURED DATA (in <script type="application/ld+json">): - WebSite schema with SearchAction for site search - Organization schema with logo, sameAs social links - BreadcrumbList schema for navigation context - Match primary schema to content type: - Landing pages: WebPage or Product - Blogs: Article with author, datePublished, dateModified - E-commerce: Product with offers, price, availability - FAQ sections: FAQPage schema (critical for AI answer engines) - Local business: LocalBusiness with address, hours, geo - Events: Event with startDate, location, offers 4. CONTENT STRUCTURE FOR AI CITATION (GEO/AEO): - First paragraph (40-60 words): Direct answer to page's primary intent - Use clear, factual language - AI prefers authoritative, non-fluffy content - Include specific numbers, statistics, dates where relevant - Each H2 section should stand alone as a complete answer - Add statistics/facts every 150-200 words (increases citation likelihood) - FAQ sections: Use consistent ## FAQ heading with ### Question / Answer pattern - Use <hr> or --- between distinct content sections (helps AI chunking) 5. IMAGES & MEDIA: - All <img> must have descriptive alt text (not "image" or "photo") - Use loading="lazy" for below-fold images - Include width and height attributes to prevent CLS - Use WebP format with fallback, srcset for responsive - Add structured data for key images (ImageObject schema) 6. PERFORMANCE (Core Web Vitals): - Largest Contentful Paint: Hero image/text visible < 2.5s - Cumulative Layout Shift: Reserve space for images, ads, embeds - First Input Delay: Minimize JS blocking, defer non-critical scripts - Use font-display: swap for web fonts - Preload critical resources: <link rel="preload"> 7. ACCESSIBILITY (also helps SEO): - All interactive elements keyboard accessible - Focus states visible on all focusable elements - Color contrast ratio minimum 4.5:1 for text - aria-label on icon-only buttons - Skip link to main content
This prompt will be used to generate your project. Feel free to customize it in the builder.
Integrations Ready
Real-time DBPush NotificationsCloud Storage
Start building now
Use AI to customize this template and launch in minutes.
Template overview
Responsive Dark Mode Animations A11y
Components85+
Pages10
Build time25 min
Difficultyadvanced
Popularity
96%
AuthorSpawned Team
Design system
Color palette
#ffffff
#000000
#e11d48
#1f2937
#6366f1
Typography
SF Pro DisplayAll text
Tech stack
React NativeTailwind CSSSupabaseWebSocket
Related templates
View all
Ready to build your project?
Start with this template and customize it with AI in minutes. No coding required.