Mirra Social Network App by ImadDhin Studio by Imad DhinMirra Social Network App by ImadDhin Studio | Contra

MIRRA mobile — client handoff brief

Product: MIRRA is a dark, location-aware social/networking app with Digital Personas (DP) — AI chat proxies for people. UI is Figma-driven (MIRRA Test / Tatum). Design tokens live in src/theme/tokens.ts.

Stack

Expo SDK ~56 (expo ~56.0.12), React 19.2, React Native 0.85. Expo Router for file-based navigation with typed routes and React Compiler enabled. TypeScript strict mode with path alias @/* → src/*.
Root navigation is a Stack with fade transitions. Tab switching uses a custom floating glass dock (not Expo native tabs). Dark-only UI (userInterfaceStyle: "dark"). Fonts: Inter 400–800 via @expo-google-fonts/inter. Images via expo-image. Glass via expo-glass-effect on supported iOS, falling back to expo-blur, then a solid panel on Android. Motion/gestures: Reanimated 4 and Gesture Handler. Icons: Ionicons, Feather, MaterialCommunityIcons. Deep-link scheme: mirra://. Target docs: Expo v56.
Not in the app yet: auth, backend/API, realtime chat, maps SDK, push, analytics, payments, AI training flows, or real product assets (Unsplash mocks only).

Design system

Black base (#000), matte surfaces (#141416#2A2A2E), frosted glass over photography. Signature accent is MIRRA lime #D4FF00 for badges, online dots, and positive deltas. Verified blue #2D9CFF. Active control blue #2F7BF6.
Typography goes through Txt (display → micro) with primary/secondary/tertiary and on-glass colors. Shared radius (xs–xxl + pill) and spacing (4–32). Core components: Glass / GlassPill / GlassDockAvatarVerifiedMirraMarkIconButtonSubtlePillPersonCard, floating BottomBar.
Bottom nav order: Profile · Network · DM · Chats · Search. Lime notification badges. Profile tab shows the user avatar with an active ring.

Screens and status

/ — MIRRA Network. Built as UI + mock feed. Discovery of people cards with location pill, filter/sort controls, Card/Map segment (Map not implemented), interest chips (Tennis, Golf, Travel, Videography), and an AI-sparkle search control. Each PersonCard has photo carousel dots, verified name/role, connections count, location + online, Connect/DM actions, and Interests / Pro Skills / Role meta.
/profile — Profile. Built. Own hero card with Train AI Chat, Edit, settings, notifications (badge), and overflow. Stats for profile views, DP chats, and connections (last 7 days with deltas). Location, identity, Instagram followers, View Profile / All Cards / Share. DP Conversations stack with anonymous-ask preview — UI only.
/messages — Messages / DM. Built inbox UI with mocks. Primary vs Requests tabs. Filters: All, Direct, Digital Persona. Rows support 1:1 and groups, Chat vs {Name}'s DP chips, online, location, unread badges, sent receipts.
/chats — Chats. Stub empty state (“Your group chats live here”).
/search — Search. Stub search bar (“Search people, skills, places”).
All content comes from src/data/mock.ts (current user Ariana Luterman, network people, conversations, categories). Swap Unsplash URIs for real assets later.

Product concepts to finish

Network: discovery by location, interests, and skills; Card + Map; connect and DM.
Digital Persona (DP): AI stand-in chat — Train AI Chat, DP conversation filters, anonymous asks.
Social graph: connections, verified badges, Instagram-linked follower display.
Messaging: direct, DP, and groups (Chats tab still empty).
Profile: analytics, edit, cards, share, notifications.

What’s left for production

Auth and real user/profile backend. Live network feed, search, filters, and Map mode. Real DM, group chat, and DP/AI endpoints. Wire all buttons (Connect, DM, Train AI, Edit, notifications). Replace mocks with CDN/product assets. Complete Chats and Search. Push, deep links (mirra://), analytics, and App Store / Play packaging (EAS).

Repo map

src/app/ — screens (index, profile, messages, chats, search, _layout).  src/components/mirra/ — glass, bottom-bar, person-card, txt, avatar, and related UI.  src/theme/tokens.ts — design tokens (source of truth).  src/data/mock.ts — mock content.  app.json — MIRRA, dark mode, splash #208AEF, scheme mirra.
UI fidelity target is the Figma frames; tokens are already aligned. Glass prefers native liquid glass on supported iOS, then blur, then opaque Android fallback.
Get it for$20.00
Tags
React Native
AI Application Developer
Mobile Designer
Mobile Engineer
React Native Developer
Mobile
Product created by
Imad Dhin maxRabat, Morocco
$50k+
Earned
33
Paid projects
5.00
Rating
197
Followers
Imad's other products
AI Automation Pack
$100.00
MCP Server Starter Kit
$150.00
Get it for$20.00
Tags
React Native
AI Application Developer
Mobile Designer
Mobile Engineer
React Native Developer
Mobile

MIRRA mobile — client handoff brief

Product: MIRRA is a dark, location-aware social/networking app with Digital Personas (DP) — AI chat proxies for people. UI is Figma-driven (MIRRA Test / Tatum). Design tokens live in src/theme/tokens.ts.

Stack

Expo SDK ~56 (expo ~56.0.12), React 19.2, React Native 0.85. Expo Router for file-based navigation with typed routes and React Compiler enabled. TypeScript strict mode with path alias @/* → src/*.
Root navigation is a Stack with fade transitions. Tab switching uses a custom floating glass dock (not Expo native tabs). Dark-only UI (userInterfaceStyle: "dark"). Fonts: Inter 400–800 via @expo-google-fonts/inter. Images via expo-image. Glass via expo-glass-effect on supported iOS, falling back to expo-blur, then a solid panel on Android. Motion/gestures: Reanimated 4 and Gesture Handler. Icons: Ionicons, Feather, MaterialCommunityIcons. Deep-link scheme: mirra://. Target docs: Expo v56.
Not in the app yet: auth, backend/API, realtime chat, maps SDK, push, analytics, payments, AI training flows, or real product assets (Unsplash mocks only).

Design system

Black base (#000), matte surfaces (#141416#2A2A2E), frosted glass over photography. Signature accent is MIRRA lime #D4FF00 for badges, online dots, and positive deltas. Verified blue #2D9CFF. Active control blue #2F7BF6.
Typography goes through Txt (display → micro) with primary/secondary/tertiary and on-glass colors. Shared radius (xs–xxl + pill) and spacing (4–32). Core components: Glass / GlassPill / GlassDockAvatarVerifiedMirraMarkIconButtonSubtlePillPersonCard, floating BottomBar.
Bottom nav order: Profile · Network · DM · Chats · Search. Lime notification badges. Profile tab shows the user avatar with an active ring.

Screens and status

/ — MIRRA Network. Built as UI + mock feed. Discovery of people cards with location pill, filter/sort controls, Card/Map segment (Map not implemented), interest chips (Tennis, Golf, Travel, Videography), and an AI-sparkle search control. Each PersonCard has photo carousel dots, verified name/role, connections count, location + online, Connect/DM actions, and Interests / Pro Skills / Role meta.
/profile — Profile. Built. Own hero card with Train AI Chat, Edit, settings, notifications (badge), and overflow. Stats for profile views, DP chats, and connections (last 7 days with deltas). Location, identity, Instagram followers, View Profile / All Cards / Share. DP Conversations stack with anonymous-ask preview — UI only.
/messages — Messages / DM. Built inbox UI with mocks. Primary vs Requests tabs. Filters: All, Direct, Digital Persona. Rows support 1:1 and groups, Chat vs {Name}'s DP chips, online, location, unread badges, sent receipts.
/chats — Chats. Stub empty state (“Your group chats live here”).
/search — Search. Stub search bar (“Search people, skills, places”).
All content comes from src/data/mock.ts (current user Ariana Luterman, network people, conversations, categories). Swap Unsplash URIs for real assets later.

Product concepts to finish

Network: discovery by location, interests, and skills; Card + Map; connect and DM.
Digital Persona (DP): AI stand-in chat — Train AI Chat, DP conversation filters, anonymous asks.
Social graph: connections, verified badges, Instagram-linked follower display.
Messaging: direct, DP, and groups (Chats tab still empty).
Profile: analytics, edit, cards, share, notifications.

What’s left for production

Auth and real user/profile backend. Live network feed, search, filters, and Map mode. Real DM, group chat, and DP/AI endpoints. Wire all buttons (Connect, DM, Train AI, Edit, notifications). Replace mocks with CDN/product assets. Complete Chats and Search. Push, deep links (mirra://), analytics, and App Store / Play packaging (EAS).

Repo map

src/app/ — screens (index, profile, messages, chats, search, _layout).  src/components/mirra/ — glass, bottom-bar, person-card, txt, avatar, and related UI.  src/theme/tokens.ts — design tokens (source of truth).  src/data/mock.ts — mock content.  app.json — MIRRA, dark mode, splash #208AEF, scheme mirra.
UI fidelity target is the Figma frames; tokens are already aligned. Glass prefers native liquid glass on supported iOS, then blur, then opaque Android fallback.
Imad's other products
AI Automation Pack
$100.00
MCP Server Starter Kit
$150.00
$20.00
Buy