Aller au contenu

Template Réseaux sociaux

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 écrans
  • iOS et Android
  • Nécessite Supabase
  • Mis à jour le 4 nov. 2026
  • Version vérifiée
  • 1 copie créée

Copie gratuite · Code source complet · Sans carte bancaire

Écrans

6 écrans de l’app fonctionnelle.

Contenu

  1. A photo-first feed with stories and double-tap likes
  2. Explore as a mosaic of photos, clips and live rooms
  3. Profiles with places, posts, videos and tags
  4. Messages and group chats with photos, shared posts and reactions
  5. Full-screen videos and live rooms with comments
  6. Supabase accounts, posts, media and messages, with sample data until connected

À propos de ce modèle

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

social networkphoto feedstoriessupabasereact nativemessaginglive streamingcommunity

Ce que vous obtenez

  • Code source complet — Expo et React Native en TypeScript, en app dans votre espace de travail.
  • Aperçu en direct — testez chaque changement dans votre navigateur ou sur votre téléphone.
  • Version vérifiée — elle compile et chaque écran s’ouvre sans erreur.
  • Assistant IA — modifiez tout par chat ; chaque changement consomme des crédits.
  • Builds et envoi aux stores — builds iOS et Android, envoyés à l’App Store et à Google Play depuis Publier.
  • Aucun crédit pour copier — la copie elle-même est gratuite.

Conçu avec la version actuelle de FluxNative.

Ce qu’il vous faut

  • Un compte FluxNative — le forfait Free accepte jusqu’à 2 apps.
  • Votre propre Supabase — pour vos données ; d’ici là, l’app tourne sur des données d’exemple.
  • Creator ou plus — pour les builds natifs et l’envoi aux stores.
  • Comptes de store — Apple Developer Program (99 US$ par an) et Google Play (25 US$ une fois), pour publier.

Ce que contient le code

écrans
25
fichiers dans votre copie
397
lignes écrites pour cette app
11,7 k
composants d’interface prêts à l’emploi
142

Textes de l’app en anglais et vietnamien

Stack technique

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

Tiré du package.json de cette version.

Système de design

Titres
Fraunces
Texte
Police du système
  • Modes clair et sombre
  • Liquid Glass
  • Boutons en pilule
  • Cartes simples

Configuration après le fork

Votre copie s’ouvre avec l’assistant IA qui l’a créée. Suivez les étapes dans l’ordre : connectez sous Serveur ce qu’une étape demande, puis envoyez chaque prompt.

  1. 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 pour l’IA

    Supabase 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.

  2. 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 pour l’IA

    Add 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.

  3. 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 pour l’IA

    I 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.

  4. 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 pour l’IA

    Add 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].

  5. 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 pour l’IA

    Run 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.

Comment utiliser ce modèle

  1. Utilisez le modèle pour obtenir une copie modifiable, avec son code source, dans votre espace de travail (Modèles).
  2. Demandez à l’assistant IA les changements voulus, avec vos propres mots (Travailler avec l’assistant).
  3. Essayez chaque changement dans l’aperçu en direct ou sur votre téléphone (Aperçu).
  4. Avec Creator ou plus, compilez-le pour iOS et Android et envoyez-le aux stores (Vue d’ensemble de la publication).

Licence et support

Licence

L’app créée pour vous vous appartient ; le code du modèle reste à InspireUI et vous est concédé sous licence pour vos apps (Conditions › Notre propriété intellectuelle).

Aide

  • Guides sur les templates, l’assistant et la publication.
  • Contacter le support depuis Aide ; réponse en général sous 1 à 2 jours ouvrés.
  • Dans votre copie, interrogez l’assistant IA sur n’importe quel écran ou fichier.

Créé par FluxNative

Politique de support

Questions

Est-ce gratuit ?

Copier un template gratuit ne coûte rien, pas même des crédits ; un template Premium est un achat unique par site web. Les changements par chat et les builds consomment des crédits.

Qu’est-ce qui m’appartient ?

L’app créée pour vous vous appartient. Le code du template reste à InspireUI et vous est concédé sous licence pour vos apps (Conditions › Notre propriété intellectuelle).

Faut-il savoir coder ?

Non. Demandez des changements à l’assistant en mots simples ; le code source complet est là si vous le voulez.

Y a-t-il un backend inclus ?

Non. Une app complète nomme le backend requis et vous connectez le vôtre sous Server ; un design tourne sur des données d’exemple.

Puis-je changer le design ?

Oui. L’onglet Design règle la couleur de marque, les couleurs, les polices et les angles sans coût en crédits ; l’assistant change le reste.

Quel forfait pour publier ?

Creator ou plus compile et envoie aux stores, avec vos propres comptes Apple et Google. L’app d’un template Premium se compile avec tout forfait dès que son site web est connecté.

Puis-je télécharger le code source ?

Oui, avec Télécharger le code source ou Push vers GitHub, dès que votre espace de travail a acheté un forfait, des crédits ou un template payant. L’app d’un template Premium exige aussi son site web connecté.

Et si elle a été créée avec une version antérieure de FluxNative ?

Votre copie fonctionne telle quelle. Demandez à l’assistant de la mettre à jour pour les nouveautés comme les langues et devises de l’app ; c’est la dernière étape de configuration.

Prêt à en faire votre app ?

Partez de Mosaic Social Community App et changez tout par chat. Votre copie inclut tout le code source.

Copie gratuite. Sans carte bancaire.

Taking a little longer than usual…

Loading FluxNative