قالب التواصل الاجتماعي
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 شاشة
- iOS وAndroid
- يحتاج إلى Supabase
- حُدّث في 4 نوفمبر 2026
- إصدار موثّق
- نسخة واحدة
نسخ مجاني · الشيفرة كاملة · دون بطاقة ائتمان
الشاشات
6 شاشات من التطبيق الفعلي.
ما الذي يتضمنه
- 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
عن هذا القالب
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
ما تحصل عليه
- الشيفرة كاملة — Expo وReact Native بلغة TypeScript، كتطبيق في مساحة عملك.
- معاينة مباشرة — جرّب كل تغيير في المتصفح أو على هاتفك.
- إصدار موثّق — يُبنى وتُفتح كل شاشة دون أخطاء.
- مساعد الذكاء الاصطناعي — غيّر أي شيء بالمحادثة؛ كل تغيير يستهلك رصيدًا.
- عمليات البناء والرفع إلى المتاجر — بناء iOS وAndroid، يُرسل إلى App Store وGoogle Play من Publish.
- النسخ لا يستهلك رصيدًا — النسخ نفسه بلا تكلفة.
صُنع بالإصدار الحالي من FluxNative.
ما تحتاج إليه
- حساب FluxNative — تتسع خطة Free لتطبيقين.
- Supabase الخاص بك — لبياناتك؛ وإلى ذلك الحين يعمل التطبيق ببيانات تجريبية.
- Creator أو أعلى — لعمليات البناء الأصلية والرفع إلى المتاجر.
- حسابات المتاجر — Apple Developer Program (99 دولارًا أمريكيًا سنويًا) وGoogle Play (25 دولارًا أمريكيًا مرة واحدة)، للنشر.
ما الذي تتضمنه الشيفرة
- شاشات
- 25
- ملفات في نسختك
- 397
- أسطر كُتبت لهذا التطبيق
- 11.7 ألف
- مكوّنات واجهة جاهزة
- 142
نصوص التطبيق بـالإنجليزية والفيتنامية
التقنيات المستخدمة
- 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
من package.json لهذا الإصدار.
نظام التصميم
- العناوين
- Fraunces
- النص
- خط النظام
- الوضعان الفاتح والداكن
- Liquid Glass
- أزرار كبسولية
- بطاقات بسيطة
الإعداد بعد النسخ
تُفتح نسختك مع مساعد الذكاء الاصطناعي الذي بناها. نفّذ الخطوات بالترتيب: صِل ضمن Server ما تطلبه الخطوة، ثم أرسل كل موجّه.
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.
طلب للذكاء الاصطناعي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.
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.
طلب للذكاء الاصطناعي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.
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.
طلب للذكاء الاصطناعي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.
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.
طلب للذكاء الاصطناعي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].
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.
طلب للذكاء الاصطناعي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.
كيفية استخدام هذا القالب
- استخدم القالب لتحصل على نسخة قابلة للتعديل، مع شيفرتها المصدرية، في مساحة عملك (القوالب).
- اطلب من مساعد الذكاء الاصطناعي التغييرات التي تريدها بكلمات بسيطة (العمل مع المساعد).
- جرّب كل تغيير في المعاينة المباشرة أو على هاتفك (المعاينة).
- مع خطة Creator أو أعلى، أنشئ إصدار iOS وAndroid وأرسله إلى المتاجر (نظرة عامة على النشر).
الترخيص والدعم
الترخيص
التطبيق الذي أُنشئ لك ملكك؛ وتبقى شيفرة القالب ملكًا لـ InspireUI ومرخّصة للاستخدام في تطبيقاتك (الشروط › ملكيتنا الفكرية).
المساعدة
- أدلة عن القوالب والمساعد والنشر.
- التواصل مع الدعم من المساعدة؛ نردّ عادةً خلال 1–2 يوم عمل.
- في نسختك، اسأل مساعد الذكاء الاصطناعي عن أي شاشة أو ملف.
من صنع FluxNative
سياسة الدعمأسئلة
هل هو مجاني؟
نسخ قالب مجاني لا يكلّف شيئًا، ولا حتى رصيدًا؛ والقالب Premium شراء لمرة واحدة لكل موقع. تغييرات المحادثة وعمليات البناء تستهلك رصيدًا.
ماذا أملك؟
أنت تملك التطبيق المصنوع لك. تبقى شيفرة القالب ملكًا لـInspireUI ومرخّصة للاستخدام في تطبيقاتك (Terms › Our intellectual property).
هل أحتاج إلى معرفة البرمجة؟
لا. اطلب التغييرات من المساعد بكلماتك؛ والشيفرة الكاملة متاحة متى شئت.
هل يأتي مع خادم خلفي؟
لا. يسمّي التطبيق الكامل الخادم الخلفي الذي يحتاجه وتصل خادمك ضمن Server؛ أما التصميم فيعمل ببيانات تجريبية.
هل أستطيع تغيير التصميم؟
نعم. يضبط تبويب Design لون العلامة والألوان والخطوط والزوايا دون رصيد؛ ويغيّر المساعد الباقي.
أي خطة أحتاج إليها للنشر؟
تبني خطة Creator أو أعلى وترفع إلى المتاجر بحساباتك في Apple وGoogle. يُبنى تطبيق القالب Premium على أي خطة بعد ربط موقعه.
هل أستطيع تنزيل الشيفرة؟
نعم، عبر Download source أو Push to GitHub، بعد أن تشتري مساحة عملك خطة أو رصيدًا أو قالبًا مدفوعًا. يحتاج تطبيق القالب Premium أيضًا إلى ربط موقعه.
ماذا لو صُنع بإصدار أقدم من FluxNative؟
تعمل نسختك كما هي. اطلب من المساعد تحديثها بميزات أحدث، مثل لغات التطبيق وعملاته؛ وهي آخر خطوة إعداد.
هل أنت مستعد لتجعله تطبيقك؟
ابدأ من Mosaic Social Community App وغيّر أي شيء عبر الدردشة. تتضمن نسختك الشيفرة المصدرية كاملة.
نسخ مجاني. لا حاجة إلى بطاقة ائتمان.