Mehfil – Social Media App

Mehfil is a real-time social media app built with Expo Router, React Native, and Supabase.
It enables users to create, share, and interact with media-rich posts in real time — featuring authentication, live likes/comments, profile management, and notifications powered by Supabase Realtime.

A demonstration of how to architect a scalable, production-grade mobile app using modern serverless tools and clean UI principles.

Demo

Features

• Authentication with Supabase (email/password)
• Real-time posts, likes, comments, and notifications
• Create and edit posts with text, images, and videos
• Optimistic UI updates for instant feedback
• Share posts directly using Expo Sharing
• Responsive and adaptive layout for Android and iOS
• Persistent session management via AuthProvider
• Expo Router–based navigation with modular routes
• Supabase Storage for media uploads
• Smooth rendering with react-native-render-html

Recent Enhancement

To improve real-time synchronization, subscriptions were added on the Home Feed for:

• postLikes (insert/delete)
• comments (insert)

This ensures that likes and comments appear instantly across user sessions without requiring manual refreshes — enhancing responsiveness and scalability as the app grows.

Technologies

• Framework: Expo Router + React Native
• Backend: Supabase (Auth, Database, Realtime, Storage)
• Rich Text: react-native-pell-rich-editor
• HTML Rendering: react-native-render-html
• Media Handling: Expo Image Picker, File System, AV, and Sharing
• Utilities: base64-arraybuffer for binary decoding
• Timestamps: dayjs
• Icons: react-native-svg

Schema

How to Run (Android)

Debug

yarn install
npx expo prebuild --platform android --clean
cd android
./gradlew clean
cd ..
adb uninstall com.hassanarifmahmood.Mehfil
yarn android

Release

cd android
./gradlew app:assembleRelease
# or: ./gradlew app:bundleRelease

References & Credits

• Base setup inspired by Code With Nomi
• Welcome Illustration
• Avatar Illustration
• SVG Icons