Soziale Netzwerke-Vorlage
Mosaic Social Community App
A photo-first community app: a feed with stories, an Explore mosaic, profiles, messages and group chats, short videos and live rooms.
- 25 Screens
- iOS & Android
- Benötigt Supabase
- Aktualisiert am 4. Nov. 2026
- Geprüfte Version
- 1 Kopie erstellt
Gratis kopieren · Voller Quellcode · Keine Kreditkarte
Screens
6 Screens aus der laufenden App.
Was drinsteckt
- A photo-first feed with stories and double-tap likes
- Explore as a mosaic of photos, clips and live rooms
- Profiles with places, posts, videos and tags
- Messages and group chats with photos, shared posts and reactions
- Full-screen videos and live rooms with comments
- Supabase accounts, posts, media and messages, with sample data until connected
Über diese Vorlage
Overview
Mosaic is a React Native photo community in the family of Instagram, VSCO and Retro. Photos carry the colour; the chrome is ink on white, and one coral accent means something is alive for you: a like, a new story, a live room, an unread message.
It opens on sample data so every screen works when you fork it: a cast of twelve people with their posts, stories, live rooms and conversations, while your own profile starts empty. Connect your Supabase project under Server for accounts, posts, media and messages.
Key features
Feed and stories — Posts edge to edge with double-tap likes, a stories rail, send to a chat and save.
Explore — Search and topics over a mosaic of big and tall tiles, with clips and live rooms in the mix.
Profiles — Name, bio, counts, follow and message, places that filter the grid, posts, videos and tags; private accounts.
Messages — Conversations and group chats with photos, shared posts, reactions and unread counts.
Videos and live — Full-screen videos with likes and comments, and live rooms with a comment stream.
Create — Choose up to ten photos, add a caption and a place, or open the camera.
Screens included
Community
Home
Explore
Profile
Post
Story
Activity
Follow requests
Messages and media
Messages
Conversation
Videos
Live
Live room
New post
Camera
Account
Your profile
Edit profile
Profile menu
Accounts
Log in
Sign up
Reset password
About
Privacy policy
Terms of use
Built with
Framework — React Native and Expo SDK 57 on the FluxNative base 13 kernel: native iOS and Android, Liquid Glass chrome on iOS.
Backend — Supabase Auth, Postgres and Storage for accounts, posts, media, stories and messages; a migration ships in the supabase folder.
Sample mode — With no backend connected, every service answers from realistic sample data kept on the device.
Good fit for
Photo and creator communities
Local and interest communities with group chats
Startups building a social app around photos
Das bekommst du
- Voller Quellcode — Expo und React Native in TypeScript, als App in deinem Workspace.
- Live-Vorschau — probiere jede Änderung im Browser oder auf deinem Handy aus.
- Geprüfte Version — sie kompiliert und jeder Screen öffnet ohne Fehler.
- KI-Assistent — ändere alles per Chat; jede Änderung kostet Credits.
- Builds und Store-Upload — iOS- und Android-Builds, aus Veröffentlichen an App Store und Google Play gesendet.
- Keine Credits fürs Kopieren — die Kopie selbst kostet keine.
Mit der aktuellen Version von FluxNative erstellt.
Das brauchst du
- Ein FluxNative-Konto — der Free-Tarif fasst bis zu 2 Apps.
- Dein eigenes Supabase — für deine Daten; bis dahin läuft die App mit Beispieldaten.
- Creator oder höher — für native Builds und Store-Upload.
- Store-Konten — Apple Developer Program (99 US$ im Jahr) und Google Play (25 US$ einmalig), zum Veröffentlichen.
Was im Quellcode steckt
- Screens
- 25
- Dateien in deiner Kopie
- 397
- Codezeilen eigens für diese App
- 11.706
- fertige UI-Komponenten
- 142
App-Texte auf Englisch und Vietnamesisch
Tech-Stack
- Expo SDK
- 57.0.22
- React Native
- 0.86.3
- React
- 19.2.8
- TypeScript
- 6.0.3
- Expo Router
- 57.0.21
- Supabase JS
- 2.112.0
Aus der package.json dieser Version.
Designsystem
- Überschriften
- Fraunces
- Fließtext
- Systemschrift
- Heller und dunkler Modus
- Liquid Glass
- Kapsel-Buttons
- Schlichte Karten
Einrichtung nach dem Fork
Deine Kopie öffnet sich mit dem KI-Assistenten, der sie gebaut hat. Geh die Schritte der Reihe nach durch: Verbinde unter Server, was ein Schritt verlangt, und sende dann jeden Prompt.
Connect your Supabase project
Add your Supabase project URL and access token under Server › Backend › Supabase first. Until then Mosaic runs on a sample community kept on the device.
Prompt für die KISupabase is connected under Server. Create the tables this app reads (profiles, follows, posts and their media and tags, likes, saves, comments, stories and views, conversations, members and messages, activity, live streams and live comments) with row-level security, the avatars and media storage buckets and the increment_post_views function, apply the migration in supabase/migrations, write the public values into .env, and check that sign-up, the feed, a new post and Messages work on my project.
Add reporting and blocking
The App Store and Google Play require apps where people post to let them report content and block other people. The template does not include this yet.
Prompt für die KIAdd reporting and blocking: a Report action on posts, comments, stories, messages and profiles that saves the report with its reason in my Supabase project, and Block on profiles that hides that person's posts, stories and messages from me. Add the tables and row-level security they need, and tell me where I can read new reports.
Set your app icon
Make an AI logo or upload your own icon in App settings. The launcher icon, splash screen and store listing all use it.
Prompt für die KII set a new app icon in App settings. Match the splash screen background and the Android icon background to its edge colour, so the icon sits on one continuous colour.
Write your community rules and legal pages
Prepare your community guidelines, support contact, privacy policy and terms. The app has its own Privacy and Terms screens with sample text to replace before you publish.
Prompt für die KIAdd my community guidelines where people sign up and in the profile menu: [your community guidelines]. Put my privacy policy and terms into the app's Privacy and Terms screens: [your privacy policy and terms], and set the support contact to [your support email].
Check and publish a build
Sign up, post a photo, add a story, message someone and open a live room on a phone, then build for the stores from Publish.
Prompt für die KIRun a final check of every screen in light and dark mode: sign-in, the feed, stories, Explore, posting, profiles, Messages and group chats, videos, live rooms and activity. Fix anything broken or still showing template content, then get the app ready for a store build.
So nutzt du diese Vorlage
- Nutze die Vorlage, um eine bearbeitbare Kopie samt Quellcode in deinem Workspace zu erhalten (Vorlagen).
- Bitte den KI-Assistenten in eigenen Worten um die gewünschten Änderungen (Mit dem Assistenten arbeiten).
- Probiere jede Änderung in der Live-Vorschau oder auf deinem Handy aus (Vorschau).
- Ab Creator baust du sie für iOS und Android und reichst sie in den Stores ein (Veröffentlichen im Überblick).
Lizenz und Support
Lizenz
Die für dich erstellte App gehört dir; der Code der Vorlage bleibt bei InspireUI und ist für die Nutzung in deinen Apps lizenziert (Bedingungen › Unser geistiges Eigentum).
Hilfe
- Anleitungen zu Vorlagen, Assistent und Veröffentlichung.
- Support kontaktieren über Hilfe; Antwort meist in 1–2 Werktagen.
- Frag in deiner Kopie den KI-Assistenten zu jedem Screen oder jeder Datei.
Von FluxNative
Support-RichtlinieFragen
Ist es kostenlos?
Eine kostenlose Vorlage zu kopieren kostet nichts, auch keine Credits; eine Premium-Vorlage ist ein Einmalkauf pro Website. Chat-Änderungen und Builds kosten Credits.
Was gehört mir?
Die für dich erstellte App gehört dir. Der Code der Vorlage bleibt bei InspireUI und ist für die Nutzung in deinen Apps lizenziert (Bedingungen › Unser geistiges Eigentum).
Muss ich programmieren können?
Nein. Bitte den Assistenten in einfachen Worten um Änderungen; den vollen Quellcode siehst du, wenn du willst.
Kommt sie mit Backend?
Nein. Eine vollständige App nennt das nötige Backend und du verbindest deines unter Server; ein Design läuft mit Beispieldaten.
Kann ich das Design ändern?
Ja. Im Tab Design stellst du Markenfarbe, Farben, Schriften und Ecken ohne Credits ein; den Rest ändert der Assistent.
Welchen Tarif brauche ich zum Veröffentlichen?
Ab Creator baust du und lädst in die Stores hoch, mit deinen eigenen Apple- und Google-Konten. Die App einer Premium-Vorlage baut mit jedem Tarif, sobald ihre Website verbunden ist.
Kann ich den Quellcode herunterladen?
Ja, mit Quellcode herunterladen oder Push zu GitHub, sobald dein Workspace einen Tarif, Credits oder eine bezahlte Vorlage gekauft hat. Die App einer Premium-Vorlage braucht zusätzlich ihre verbundene Website.
Was, wenn sie mit einem früheren FluxNative erstellt wurde?
Deine Kopie funktioniert wie sie ist. Lass sie vom Assistenten auf neuere Funktionen wie App-Sprachen und Währungen aktualisieren; das ist der letzte Einrichtungsschritt.
Bereit, daraus deine App zu machen?
Starte mit Mosaic Social Community App und ändere alles per Chat. Deine Kopie enthält den vollständigen Quellcode.
Kostenlos kopieren. Keine Kreditkarte nötig.