Building Synapse: A Full-Featured Social Media App with React Native & Supabase (Launching Soon!)

Alex — Tue, 23 Dec 2025 21:41:53 +0000

What is Synapse?

Synapse is a social media platform designed for meaningful connections. Think X/Threads, but with support for rich content blocks, mathematical equations, audio posts, files, and a privacy-first approach and much more.

Key Features:

Multi-block posts (text, images, videos, audio, files, live photos)
Markdown with syntax highlighting and MathJax support
Feed recommendations
Real-time direct messaging
Full-text search

Why We Built This

The idea for Synapse came from a frustration that many researchers and developers share: existing social platforms aren't built for technical discourse.

The Problems We Kept Running Into

1. Fragmented Discussions

Try following a machine learning research discussion on X (Twitter). A single paper breakdown gets split into 15+ tweets in a thread. Equations are screenshots. Code is images. Context gets lost in quote tweets and replies. It's chaos.

2. No Built-in Support for Rich Content

Want to share a PDF of your paper? Upload an audio explanation of your code? Attach a dataset file? You can't. Current platforms treat everything as text + images/video, forcing researchers and developers to link out to external services for anything beyond basic media.

3. Discovery is Broken

Finding the right people to follow in your niche is surprisingly hard. Algorithms optimize for engagement, not relevance. There's no good way to discover researchers in your specific subfield or developers working on similar problems.

The Vision

We wanted a platform where you could write a single, cohesive post that includes:

Your explanation in markdown with proper formatting
Mathematical equations rendered beautifully (LaTeX/MathJax)
Code snippets with syntax highlighting
The actual PDF or dataset file
An audio walkthrough for those who prefer listening

All in one place. No threads. No external links. No screenshots of equations.

Who Is This For?

We're building Synapse primarily for two communities:

Researchers & Academics

Scientists who want to share their work, discuss papers, and connect with peers in their field. Whether you're in ML, physics, biology, or any technical discipline, you deserve a platform that speaks your language - literally, with native LaTeX support.

Developers & Technical Creators

Programmers who want to share ideas, tutorials, and projects in a beautiful, readable format. Write technical content with proper code highlighting, attach relevant files, and build an audience that cares about substance over virality.

We believe the best ideas deserve better than a character limit and a thread of fragmented thoughts.

The Tech Stack

Frontend

React Native 0.81 with the new architecture enabled
Expo SDK 54 for rapid development and OTA updates
React 19 with the latest concurrent features
TypeScript in strict mode (no any allowed!)

State Management

We went with a hybrid approach:

React Query 5 for server state and caching
Zustand for client-side stores
Context API for global app state (Auth, Audio, Analytics)

Backend

Supabase as our Backend-as-a-Service
- PostgreSQL for the database
- Supabase Auth with email OTP
- Supabase Storage (S3-compatible) for media
- Realtime subscriptions for live updates
- Edge Functions (Deno) for serverless compute

Technical Deep Dives

1. The Content Block System

Instead of storing posts as flat text, we designed a flexible block-based architecture:

type ContentBlock = TextBlock | MediaBlock | AudioBlock | FileBlock;

interface MediaBlock {
  type: 'media';
  items: MediaItem[];
}

interface MediaItem {
  type: 'image' | 'video' | 'live_photo';
  storagePath: string;
  width: number;
  height: number;
  thumbnailUrl?: string;
  // Live photos have separate video/photo URLs
  videoStoragePath?: string;
}

Why this matters:

Posts can contain mixed content types
Each block handles its own rendering logic
Easy to add new block types in the future
Type-safe with runtime type guards

2. Optimistic Messaging

Nobody wants to wait for a server response to see their message. We implemented optimistic updates with local IDs:

// Generate local ID for immediate display
const localId = `local_${Date.now()}_${Math.random().toString(36)}`;

// Show message immediately with "pending" status
addMessageToCache({
  id: localId,
  content,
  status: 'pending',
  created_at: new Date().toISOString()
});

// Server confirms and provides real ID
const { data } = await supabase
  .from('messages')
  .insert({ content, conversation_id })
  .select()
  .single();

// Reconcile local and server states
replaceLocalMessage(localId, data);

The tricky part? Handling edge cases:

What if the server response arrives before the optimistic update?
What if the user sends multiple messages quickly?
How do we handle failures gracefully?

We built an OptimisticMessageManager that handles all these scenarios with proper reconciliation logic.

3. Signed URLs with Smart Caching

Media files in Supabase Storage require signed URLs for private access. The challenge: these URLs expire!

Our solution:

Cache signed URLs with TTL tracking
Refresh URLs 5 minutes before expiration
Batch URL requests to reduce API calls
Propagate postId context for cache invalidation

class SignedUrlService {
  private cache = new Map<string, CachedUrl>();

  async getSignedUrl(storagePath: string, postId?: string): Promise<string> {
    const cacheKey = this.buildCacheKey(storagePath, postId);
    const cached = this.cache.get(cacheKey);

    if (cached && !this.isExpiringSoon(cached)) {
      return cached.url;
    }

    return this.fetchAndCache(storagePath, postId);
  }
}

4. Feed Recommendation Engine

We built a server-side recommendation RPC that scores posts using multiple factors:

Recency
Engagement metrics
User's social graph
Content type preferences

// Edge Function: feed-recommendation
const candidates = await fetchCandidates(userId, excludeIds);
const scored = candidates.map(post => ({
  ...post,
  score: calculateRelevanceScore(post, userPreferences)
}));

return scored
  .sort((a, b) => b.score - a.score)
  .slice(0, limit);

Users can toggle between chronological and recommended feeds.

5. Audio Recording with Gesture Detection

We built custom HoldToRecordButton and HoldToRecordOverlay components:

Long press starts recording
Drag to cancel zone aborts
Visual waveform feedback
Haptic feedback on state changes

This required deep integration with React Native Gesture Handler and Expo Audio.

Lessons Learned

1. Start with TypeScript Strict Mode

We enabled strict mode from day one. It caught countless bugs during development that would have been runtime errors otherwise. The upfront investment pays dividends.

2. Server-Side Logic > Client-Side Complexity

Instead of managing complex state on the client (like cascade deletes when blocking a user), we use database triggers:

CREATE TRIGGER on_user_blocked
AFTER INSERT ON blocked_users
FOR EACH ROW
EXECUTE FUNCTION cleanup_follows_on_block();

This ensures data consistency even if the client crashes mid-operation.

3. Design for Offline First

We use MMKV (a fast key-value store) for local caching with TTLs:

Profiles: 5 days
Feed data: 2 days
Messages: Synced with pending states

The app feels snappy because most data is served from cache.

4. Don't Underestimate Media Handling

Image/video upload seems simple until you consider:

Compression for faster uploads
Thumbnail generation
Progress tracking
Upload cancellation
Quota enforcement
Signed URL management

Our postService.ts is 56KB for a reason.

5. React Query is a Game Changer

Before React Query, we had manual cache invalidation everywhere. Now:

const { data, isLoading, refetch } = useQuery({
  queryKey: ['posts', userId],
  queryFn: () => fetchUserPosts(userId),
  staleTime: 5 * 60 * 1000,
});

// Mutations automatically invalidate related queries
useMutation({
  mutationFn: createPost,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['posts'] });
  }
});

What's Next?

We're polishing the final details before App Store submission:

Performance profiling on older devices
Accessibility audit
Final round of beta testing
App Store assets and screenshots

Want to Follow Along?

We're building in public! Follow our journey:

X: https://x.com/alexrosrgz
LinkedIn: https://www.linkedin.com/in/alexrosrgz/
Landing page and waitlist: synapsehub.social

If you're building something similar or have questions about our approach, drop a comment below. Happy to share more details about any aspect of the stack!

What technical challenges have you faced building mobile apps? Let's discuss in the comments!

DEV Community: Alex