Nadim Chowdhury

Posted on Oct 8

I Built a Discord Clone in React Native (And My Gaming Friends Actually Switched to It)

#reactnative #architecture #tutorial #showdev

Six months ago, my gaming squad complained about Discord's mobile app one too many times during a raid. "The UI is clunky," "voice chat keeps cutting out," "why does it drain my battery so fast?"

I said: "Fine, I'll build a better one."

They laughed. I was serious.

What started as spite-driven development turned into the most challenging and rewarding project I've ever built. A fully-functional community platform with servers, channels, voice chat, video streaming, and a UI that doesn't make you want to throw your phone.

The best part? My friends actually migrated their server to my app. That's when I knew I'd built something special.

Let me break down exactly how I architected this beast, from WebRTC to that smooth server-switching animation everyone keeps asking about.

Why Another Community Platform?

Discord is great. But their mobile app has issues:

Sluggish UI with dropped frames
Voice quality issues on spotty connections
Battery drain that'll kill your phone in 2 hours
Notification spam that's impossible to manage

Plus, I wanted to understand how platforms like Discord actually work. How do you handle thousands of concurrent users in voice channels? How do you manage permissions across nested channel hierarchies? How do you make rich text formatting work on mobile?

Building a Discord clone touches every interesting problem in real-time app development:

Multi-room voice/video infrastructure
Complex permission systems
Rich media and embeds
Thread-based discussions
Server and channel organization
Presence and status systems

It's basically a PhD in mobile architecture disguised as a gaming app.

The Architecture (Built for Scale)

I spent three weeks just designing the architecture. My whiteboard looked like a conspiracy theory by the end.

High-Level System Design

┌──────────────────────┐
│   Mobile App         │
│  (React Native)      │
└──────────┬───────────┘
           │
    ┌──────┴──────┐
    │             │
┌───┴───┐    ┌───┴─────┐
│  REST │    │WebSocket│
│  API  │    │ Gateway │
└───┬───┘    └───┬─────┘
    │            │
┌───┴────────────┴────┐
│   Redis Cluster     │
│  (Presence, Cache)  │
└──────────┬──────────┘
           │
    ┌──────┴──────────────┐
    │                     │
┌───┴────┐          ┌─────┴─────┐
│Postgres│          │  MongoDB  │
│(Users, │          │(Messages, │
│Servers)│          │ Threads)  │
└───┬────┘          └─────┬─────┘
    │                     │
┌───┴─────────────────────┴───┐
│    Microservices Layer      │
├─────────────────────────────┤
│ Voice Service (Mediasoup)   │
│ Media Service (S3/CDN)      │
│ Search Service (Elastic)    │
│ Notification Service        │
└─────────────┬───────────────┘
              │
         ┌────┴─────┐
         │          │
    ┌────┴───┐  ┌──┴─────┐
    │Firebase│  │  S3    │
    │Storage │  │ (CDN)  │
    └────────┘  └────────┘

Critical Architectural Decisions:

WebSocket Gateway: Custom gateway built on Socket.io with horizontal scaling. Each user connects to one gateway server, but messages route through Redis Pub/Sub.

Voice Infrastructure: Mediasoup SFU (Selective Forwarding Unit) handles voice channels. Way more efficient than peer-to-peer for group calls.

Database Split:

PostgreSQL: Users, servers, channels, roles, permissions (relational data)
MongoDB: Messages, threads, reactions (document-based, better for chat)
Redis: Presence, typing indicators, rate limiting, caching

CDN Strategy: CloudFlare for static assets, custom CDN (S3 + CloudFront) for user uploads.

The Folder Structure (After Many Iterations)

Here's the final structure that actually scales:

communify/
├── src/
│   ├── app/                              # Expo Router
│   │   ├── (auth)/
│   │   │   ├── login.tsx
│   │   │   ├── register.tsx
│   │   │   └── invite/[code].tsx
│   │   ├── (main)/
│   │   │   ├── _layout.tsx              # Main navigation
│   │   │   ├── servers/
│   │   │   │   └── [serverId]/
│   │   │   │       ├── index.tsx        # Server view
│   │   │   │       ├── channels/[channelId].tsx
│   │   │   │       ├── settings.tsx
│   │   │   │       └── members.tsx
│   │   │   ├── dms/
│   │   │   │   ├── index.tsx            # DM list
│   │   │   │   └── [userId].tsx
│   │   │   └── explore.tsx              # Server discovery
│   │   ├── voice/
│   │   │   └── [channelId].tsx          # Voice channel UI
│   │   ├── thread/
│   │   │   └── [threadId].tsx
│   │   └── _layout.tsx
│   │
│   ├── components/
│   │   ├── ui/                           # Base components
│   │   │   ├── Button.tsx
│   │   │   ├── Input.tsx
│   │   │   ├── Avatar.tsx
│   │   │   ├── Badge.tsx
│   │   │   ├── Modal.tsx
│   │   │   ├── BottomSheet.tsx
│   │   │   ├── Dropdown.tsx
│   │   │   └── ContextMenu.tsx
│   │   ├── server/
│   │   │   ├── ServerIcon.tsx
│   │   │   ├── ServerList.tsx
│   │   │   ├── ServerSidebar.tsx
│   │   │   ├── ChannelList.tsx
│   │   │   ├── CategoryHeader.tsx
│   │   │   └── ServerBanner.tsx
│   │   ├── channel/
│   │   │   ├── MessageList.tsx
│   │   │   ├── MessageItem.tsx
│   │   │   ├── MessageInput.tsx
│   │   │   ├── EmojiPicker.tsx
│   │   │   ├── FileUpload.tsx
│   │   │   ├── RichTextEditor.tsx
│   │   │   └── TypingIndicator.tsx
│   │   ├── voice/
│   │   │   ├── VoiceControls.tsx
│   │   │   ├── VoiceParticipant.tsx
│   │   │   ├── VoiceSettings.tsx
│   │   │   └── VideoGrid.tsx
│   │   ├── member/
│   │   │   ├── MemberList.tsx
│   │   │   ├── MemberItem.tsx
│   │   │   ├── RoleTag.tsx
│   │   │   └── UserProfile.tsx
│   │   ├── thread/
│   │   │   ├── ThreadPreview.tsx
│   │   │   ├── ThreadHeader.tsx
│   │   │   └── ThreadList.tsx
│   │   └── common/
│   │       ├── Header.tsx
│   │       ├── SearchBar.tsx
│   │       ├── LoadingSpinner.tsx
│   │       ├── EmptyState.tsx
│   │       └── ErrorBoundary.tsx
│   │
│   ├── features/
│   │   ├── auth/
│   │   │   ├── hooks/
│   │   │   │   ├── useAuth.ts
│   │   │   │   └── useSession.ts
│   │   │   ├── services/
│   │   │   │   └── authService.ts
│   │   │   └── types.ts
│   │   ├── servers/
│   │   │   ├── hooks/
│   │   │   │   ├── useServer.ts
│   │   │   │   ├── useChannels.ts
│   │   │   │   └── usePermissions.ts
│   │   │   ├── services/
│   │   │   │   ├── serverService.ts
│   │   │   │   └── permissionService.ts
│   │   │   └── types.ts
│   │   ├── messaging/
│   │   │   ├── hooks/
│   │   │   │   ├── useMessages.ts
│   │   │   │   ├── useSocket.ts
│   │   │   │   └── useThreads.ts
│   │   │   ├── services/
│   │   │   │   ├── messageService.ts
│   │   │   │   ├── socketService.ts
│   │   │   │   └── threadService.ts
│   │   │   └── types.ts
│   │   ├── voice/
│   │   │   ├── hooks/
│   │   │   │   ├── useVoiceChannel.ts
│   │   │   │   ├── useWebRTC.ts
│   │   │   │   └── useAudioProcessing.ts
│   │   │   ├── services/
│   │   │   │   ├── voiceService.ts
│   │   │   │   ├── webRTCService.ts
│   │   │   │   └── audioService.ts
│   │   │   └── types.ts
│   │   ├── presence/
│   │   │   ├── hooks/
│   │   │   │   └── usePresence.ts
│   │   │   ├── services/
│   │   │   │   └── presenceService.ts
│   │   │   └── types.ts
│   │   └── media/
│   │       ├── hooks/
│   │       │   ├── useImageUpload.ts
│   │       │   ├── useVideoUpload.ts
│   │       │   └── useEmbed.ts
│   │       ├── services/
│   │       │   ├── uploadService.ts
│   │       │   ├── embedService.ts
│   │       │   └── compressionService.ts
│   │       └── types.ts
│   │
│   ├── store/                             # Zustand stores
│   │   ├── authStore.ts
│   │   ├── serverStore.ts
│   │   ├── channelStore.ts
│   │   ├── messageStore.ts
│   │   ├── voiceStore.ts
│   │   ├── presenceStore.ts
│   │   └── uiStore.ts
│   │
│   ├── services/
│   │   ├── api/
│   │   │   ├── client.ts
│   │   │   ├── auth.ts
│   │   │   ├── servers.ts
│   │   │   ├── channels.ts
│   │   │   ├── messages.ts
│   │   │   ├── members.ts
│   │   │   └── media.ts
│   │   ├── socket/
│   │   │   ├── socketManager.ts
│   │   │   ├── eventHandlers.ts
│   │   │   └── reconnection.ts
│   │   ├── database/                      # Local SQLite
│   │   │   ├── schema.ts
│   │   │   ├── queries.ts
│   │   │   └── migrations.ts
│   │   ├── voice/
│   │   │   ├── mediasoup.ts
│   │   │   └── audioProcessor.ts
│   │   ├── notifications/
│   │   │   ├── pushNotifications.ts
│   │   │   └── localNotifications.ts
│   │   └── storage/
│   │       ├── secureStorage.ts
│   │       ├── fileSystem.ts
│   │       └── cache.ts
│   │
│   ├── utils/
│   │   ├── formatters.ts
│   │   ├── validators.ts
│   │   ├── permissions.ts
│   │   ├── markdown.ts
│   │   ├── mentions.ts
│   │   └── linkParser.ts
│   │
│   ├── hooks/
│   │   ├── useKeyboard.ts
│   │   ├── useNetworkStatus.ts
│   │   ├── useAppState.ts
│   │   ├── useDebounce.ts
│   │   ├── useHaptics.ts
│   │   └── useInfiniteScroll.ts
│   │
│   ├── constants/
│   │   ├── colors.ts
│   │   ├── typography.ts
│   │   ├── layout.ts
│   │   ├── permissions.ts
│   │   └── config.ts
│   │
│   └── types/
│       ├── models.ts
│       ├── api.ts
│       ├── permissions.ts
│       └── navigation.ts
│
├── assets/
│   ├── fonts/
│   ├── images/
│   ├── icons/
│   ├── sounds/                            # Notification sounds
│   └── animations/
│
├── app.json
├── package.json
└── tsconfig.json

This structure separates concerns beautifully:

Features contain business logic
Components are purely presentational
Services handle external communication
Store manages application state

The Tech Stack (Battle-Tested for Real-Time)

Every technology here solved a specific problem, not just resume padding.

Frontend Arsenal

React Native 0.74 + Expo SDK 51

Expo Router for navigation (file-based like Next.js)
EAS for builds, OTA updates
Expo modules for native functionality

State Management: Zustand + React Query

Zustand for UI and client state
React Query for server state with optimistic updates
Jotai for granular component state
Why not Redux? Too much boilerplate for real-time apps

Real-Time: Socket.io Client

Room-based event handling
Automatic reconnection with exponential backoff
Binary support for voice data

Voice/Video: react-native-webrtc + Mediasoup Client

WebRTC for peer connections
Mediasoup for efficient multi-party calls
Custom audio processing with native modules

UI Framework: NativeWind + Reanimated 3

Tailwind utilities for styling
60fps animations with Reanimated
Gesture Handler for swipes and long presses

Rich Text: react-native-markdown-display

Markdown support (bold, italic, code blocks)
Custom mention and emoji rendering
Link previews with metadata

Local Database: WatermelonDB

SQLite with React Native optimization
Lazy loading and query optimization
Perfect for offline message caching

Media Handling:

Expo Image Picker for uploads
react-native-fast-image for caching
Video compression before upload

Permissions: Custom RBAC System

Hierarchical role structure
Granular channel permissions
Server-wide and channel-specific roles

Backend Infrastructure

API Gateway: Node.js + Express + TypeScript
WebSocket: Socket.io with Redis adapter
Voice Server: Mediasoup SFU on dedicated servers
Databases:
- PostgreSQL (users, servers, permissions)
- MongoDB (messages, threads)
- Redis (presence, rate limiting, cache)
Search: Elasticsearch for message search
Storage: AWS S3 + CloudFront CDN
Queue: Bull for background jobs
Monitoring: Grafana + Prometheus

The UI Philosophy: Discord but Better

I'm not a designer, but I studied Discord's UI for weeks. Then I made it better.

Design Principles

1. Familiar but Refined

Keep what users know from Discord
Remove unnecessary complexity
Add polish with micro-interactions

2. Dark-First Design

Optimized for OLED screens
True black backgrounds
Careful contrast for readability

3. Gesture-Driven

Swipe to open server sidebar
Long-press for context menus
Pull-to-refresh everywhere
Pinch-to-zoom on images

4. Hierarchy Through Color

System messages in gray
Mentions in yellow
Pinned messages highlighted
Color-coded roles

5. Smooth as Butter

60fps everywhere
Predictive loading
Skeleton screens
Optimistic updates

Color System

// Dark Theme (Primary)
const darkTheme = {
  background: {
    primary: '#1E1F22',      // Main background
    secondary: '#2B2D31',    // Sidebar, panels
    tertiary: '#313338',     // Elevated elements
    chat: '#313338',         // Message area
  },
  text: {
    primary: '#F2F3F5',      // Main text
    secondary: '#B5BAC1',    // Muted text
    muted: '#80848E',        // Timestamps, etc
    link: '#00A8FC',         // Links
  },
  interactive: {
    normal: '#4E5058',       // Buttons
    hover: '#6D6F78',        // Hover state
    active: '#00A8FC',       // Active/selected
    muted: '#3F4147',        // Disabled
  },
  status: {
    online: '#23A559',       // Green
    idle: '#F0B232',         // Yellow
    dnd: '#F23F43',          // Red
    offline: '#80848E',      // Gray
  },
  accent: {
    primary: '#5865F2',      // Blurple (Discord brand)
    success: '#248046',      // Green
    warning: '#F0B232',      // Yellow
    danger: '#DA373C',       // Red
  },
  message: {
    hover: '#2E3035',        // Message hover
    mention: '#F0B23233',    // Mention highlight
    reply: '#4E505833',      // Reply thread
  },
};

Core Features That Make It Discord

1. Server & Channel Architecture

The heart of the app. Here's how server organization works:

interface Server {
  id: string;
  name: string;
  icon?: string;
  banner?: string;
  ownerId: string;
  categories: Category[];
  roles: Role[];
  members: Member[];
}

interface Category {
  id: string;
  name: string;
  position: number;
  channels: Channel[];
}

interface Channel {
  id: string;
  name: string;
  type: 'text' | 'voice' | 'announcement';
  categoryId?: string;
  permissions: ChannelPermission[];
  position: number;
}

Features:

Nested categories with collapsible sections
Drag-to-reorder channels (with haptic feedback)
Channel-specific permissions
Announcement channels (one-way communication)
Slow mode for rate limiting

2. Advanced Permission System

This was a nightmare to implement but necessary:

// Permission hierarchy
const PERMISSIONS = {
  // General
  VIEW_CHANNEL: 1 << 0,
  MANAGE_CHANNEL: 1 << 1,
  MANAGE_ROLES: 1 << 2,
  MANAGE_SERVER: 1 << 3,

  // Text Channels
  SEND_MESSAGES: 1 << 4,
  EMBED_LINKS: 1 << 5,
  ATTACH_FILES: 1 << 6,
  MENTION_EVERYONE: 1 << 7,
  MANAGE_MESSAGES: 1 << 8,

  // Voice Channels
  CONNECT: 1 << 9,
  SPEAK: 1 << 10,
  MUTE_MEMBERS: 1 << 11,
  MOVE_MEMBERS: 1 << 12,

  // Special
  ADMINISTRATOR: 1 << 13,
};

// Check if user has permission
const hasPermission = (
  member: Member,
  channel: Channel,
  permission: number
): boolean => {
  // Admin override
  if (member.permissions & PERMISSIONS.ADMINISTRATOR) {
    return true;
  }

  // Check channel-specific overrides
  const override = channel.permissions.find(
    p => p.roleId === member.roleId
  );

  if (override) {
    // Explicit deny
    if (override.deny & permission) return false;
    // Explicit allow
    if (override.allow & permission) return true;
  }

  // Check role permissions
  return (member.permissions & permission) !== 0;
};

3. Rich Messaging System

Messages support way more than plain text:

interface Message {
  id: string;
  content: string;
  authorId: string;
  channelId: string;
  timestamp: number;
  edited?: number;
  attachments: Attachment[];
  embeds: Embed[];
  mentions: string[];
  reactions: Reaction[];
  replyTo?: string;
  pinned: boolean;
  type: 'default' | 'system' | 'reply';
}

Markdown Support:

Bold, italic, ~~strikethrough~~
inline code and

code blocks
Block quotes
User mentions (@username)
Channel links (#channel)
Role mentions (@role)

Features:

Embeds for links (auto-fetch metadata)
Image/video attachments
Reactions with emoji
Reply threads
Message editing/deletion
Pin important messages

4. Voice Channels (The Hard Part)

Voice took me a month to get right. Here's the flow:

const joinVoiceChannel = async (channelId: string) => {
  // 1. Request access token
  const token = await voiceApi.getToken(channelId);

  // 2. Connect to voice server
  const transport = await mediasoupClient.createTransport(token);

  // 3. Get local audio stream
  const stream = await getAudioStream();
  const audioTrack = stream.getAudioTracks()[0];

  // 4. Create producer (send audio)
  const producer = await transport.produce({ track: audioTrack });

  // 5. Subscribe to other users
  socket.on('voice:user-joined', async (userId) => {
    const consumer = await transport.consume(userId);
    playAudioStream(consumer);
  });

  // 6. Handle disconnection
  socket.on('voice:user-left', (userId) => {
    stopAudioStream(userId);
  });
};

Voice Features:

Noise suppression
Echo cancellation
Voice activity detection
Push-to-talk mode
Server deafening/muting
Individual volume control

Video Features:

Screen sharing
Camera toggle
Grid/speaker view
Up to 25 participants
Automatic quality adjustment

5. Threads (For Organized Chaos)

Keep discussions organized without cluttering channels:

const createThread = async (
  messageId: string,
  name: string
) => {
  const thread = await threadApi.create({
    messageId,
    name,
    autoArchiveDuration: 1440, // 24 hours
  });

  // Thread UI appears as sidebar
  showThreadSidebar(thread.id);
};

Thread Features:

Auto-archive after inactivity
Thread member tracking
Notification preferences per thread
Search within threads

The Animations That Sell It

Animations make the app feel premium. Here are the key ones:

Server Switch Animation

const ServerSwitcher = ({ servers }) => {
  const scrollY = useSharedValue(0);

  return (
    <Animated.FlatList
      data={servers}
      onScroll={(e) => {
        scrollY.value = e.nativeEvent.contentOffset.y;
      }}
      renderItem={({ item, index }) => (
        <ServerIcon
          server={item}
          index={index}
          scrollY={scrollY}
        />
      )}
    />
  );
};

const ServerIcon = ({ server, index, scrollY }) => {
  const inputRange = [
    (index - 1) * 60,
    index * 60,
    (index + 1) * 60,
  ];

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [
      {
        scale: interpolate(
          scrollY.value,
          inputRange,
          [0.8, 1, 0.8],
          Extrapolate.CLAMP
        ),
      },
    ],
    opacity: interpolate(
      scrollY.value,
      inputRange,
      [0.5, 1, 0.5],
      Extrapolate.CLAMP
    ),
  }));

  return (
    <Animated.View style={animatedStyle}>
      {/* Server icon */}
    </Animated.View>
  );
};

Message Send Animation

const MessageBubble = ({ message, isSent }) => {
  const translateY = useSharedValue(20);
  const opacity = useSharedValue(0);

  useEffect(() => {
    translateY.value = withSpring(0, {
      damping: 15,
      stiffness: 150,
    });
    opacity.value = withTiming(1, { duration: 200 });
  }, []);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateY: translateY.value }],
    opacity: opacity.value,
  }));

  return (
    <Animated.View style={animatedStyle}>
      {/* Message content */}
    </Animated.View>
  );
};

Performance: Making It Smooth

Discord's mobile app drops frames. Mine doesn't. Here's how:

1. Message List Optimization

The biggest performance bottleneck:

// Use FlashList instead of FlatList
import { FlashList } from '@shopify/flash-list';

<FlashList
  data={messages}
  renderItem={({ item }) => (
    <MessageItem message={item} />
  )}
  estimatedItemSize={80}
  drawDistance={500}
  removeClippedSubviews={true}
  maxToRenderPerBatch={10}
  windowSize={21}
/>

2. Image Loading Strategy

const MessageImage = ({ uri }) => {
  const [thumbUri] = useState(
    uri.replace('/original/', '/thumbnail/')
  );

  return (
    <Image
      source={{ uri }}
      placeholder={{ thumbUri }}
      cachePolicy="memory-disk"
      priority="normal"
      transition={200}
    />
  );
};

3. Memoization Everywhere

const MessageItem = memo(({ message }) => {
  return <View>{/* Message UI */}</View>;
}, (prev, next) => {
  return (
    prev.message.id === next.message.id &&
    prev.message.edited === next.message.edited &&
    prev.message.reactions.length === next.message.reactions.length
  );
});

Real-Time Architecture Deep Dive

The secret sauce is efficient WebSocket handling:

Socket Manager

class SocketManager {
  private socket: Socket | null = null;
  private reconnectAttempts = 0;
  private maxReconnectAttempts = 5;

  connect(token: string) {
    this.socket = io(WS_URL, {
      auth: { token },
      transports: ['websocket'],
      reconnection: true,
      reconnectionDelay: 1000,
      reconnectionDelayMax: 5000,
    });

    this.setupEventHandlers();
    this.setupReconnectionLogic();
  }

  private setupEventHandlers() {
    this.socket?.on('connect', () => {
      console.log('Connected to socket server');
      this.reconnectAttempts = 0;
      this.subscribeToUserRooms();
    });

    this.socket?.on('disconnect', (reason) => {
      console.log('Disconnected:', reason);
      if (reason === 'io server disconnect') {
        this.socket?.connect();
      }
    });

    // Message events
    this.socket?.on('message:new', this.handleNewMessage);
    this.socket?.on('message:edit', this.handleMessageEdit);
    this.socket?.on('message:delete', this.handleMessageDelete);

    // Typing events
    this.socket?.on('typing:start', this.handleTypingStart);
    this.socket?.on('typing:stop', this.handleTypingStop);

    // Presence events
    this.socket?.on('presence:update', this.handlePresenceUpdate);

    // Voice events
    this.socket?.on('voice:user-joined', this.handleVoiceJoin);
    this.socket?.on('voice:user-left', this.handleVoiceLeave);
  }

  private setupReconnectionLogic() {
    this.socket?.on('reconnect_attempt', () => {
      this.reconnectAttempts++;
      if (this.reconnectAttempts >= this.maxReconnectAttempts) {
        console.log('Max reconnection attempts reached');
        this.socket?.disconnect();
      }
    });

    this.socket?.on('reconnect', () => {
      console.log('Reconnected successfully');
      this.reconnectAttempts = 0;
      this.resyncState();
    });
  }

  private async resyncState() {
    // Fetch missed messages
    const lastMessageId = messageStore.getLastMessageId();
    const missedMessages = await api.getMessagesSince(lastMessageId);
    messageStore.addMessages(missedMessages);

    // Refresh presence
    const presence = await api.getPresence();
    presenceStore.updateBulk(presence);
  }

  emit(event: string, data: any) {
    this.socket?.emit(event, data);
  }

  joinRoom(room: string) {
    this.socket?.emit('room:join', { room });
  }

  leaveRoom(room: string) {
    this.socket?.emit('room:leave', { room });
  }
}

export const socketManager = new SocketManager();

Message Handling with Optimistic Updates

const useSendMessage = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: async (message: NewMessage) => {
      return await messageApi.send(message);
    },
    onMutate: async (newMessage) => {
      // Cancel outgoing refetches
      await queryClient.cancelQueries(['messages', newMessage.channelId]);

      // Snapshot previous value
      const previousMessages = queryClient.getQueryData(['messages', newMessage.channelId]);

      // Optimistically update to the new value
      const optimisticMessage = {
        ...newMessage,
        id: `temp-${Date.now()}`,
        timestamp: Date.now(),
        status: 'sending',
      };

      queryClient.setQueryData(['messages', newMessage.channelId], (old: any) => ({
        ...old,
        pages: old.pages.map((page: any, index: number) => 
          index === 0 
            ? { ...page, messages: [...page.messages, optimisticMessage] }
            : page
        ),
      }));

      return { previousMessages, optimisticMessage };
    },
    onError: (err, newMessage, context) => {
      // Rollback on error
      queryClient.setQueryData(
        ['messages', newMessage.channelId],
        context?.previousMessages
      );

      showToast('Failed to send message');
    },
    onSuccess: (data, variables, context) => {
      // Replace temp message with real one
      queryClient.setQueryData(['messages', variables.channelId], (old: any) => ({
        ...old,
        pages: old.pages.map((page: any, index: number) => 
          index === 0 
            ? {
                ...page,
                messages: page.messages.map((msg: any) =>
                  msg.id === context?.optimisticMessage.id ? data : msg
                ),
              }
            : page
        ),
      }));
    },
  });
};

Presence System

const usePresence = () => {
  const { user } = useAuth();
  const lastActivity = useRef(Date.now());
  const presenceInterval = useRef<NodeJS.Timeout>();

  useEffect(() => {
    // Send presence every 30 seconds
    presenceInterval.current = setInterval(() => {
      const idleTime = Date.now() - lastActivity.current;
      const status = idleTime > 300000 ? 'idle' : 'online'; // 5 min

      socketManager.emit('presence:update', {
        userId: user?.id,
        status,
        lastSeen: Date.now(),
      });
    }, 30000);

    return () => {
      if (presenceInterval.current) {
        clearInterval(presenceInterval.current);
      }
    };
  }, [user]);

  // Track activity
  useEffect(() => {
    const updateActivity = () => {
      lastActivity.current = Date.now();
    };

    // Listen to user interactions
    const subscription = AppState.addEventListener('change', (state) => {
      if (state === 'active') {
        updateActivity();
        socketManager.emit('presence:update', {
          userId: user?.id,
          status: 'online',
        });
      } else {
        socketManager.emit('presence:update', {
          userId: user?.id,
          status: 'offline',
        });
      }
    });

    return () => subscription.remove();
  }, [user]);
};

Offline Support (Because Internet Isn't Always Perfect)

One feature Discord lacks: proper offline mode. Mine has it.

Local Database with WatermelonDB

// Database schema
const schema = appSchema({
  version: 1,
  tables: [
    tableSchema({
      name: 'messages',
      columns: [
        { name: 'channel_id', type: 'string', isIndexed: true },
        { name: 'author_id', type: 'string' },
        { name: 'content', type: 'string' },
        { name: 'timestamp', type: 'number', isIndexed: true },
        { name: 'synced', type: 'boolean' },
      ],
    }),
    tableSchema({
      name: 'servers',
      columns: [
        { name: 'name', type: 'string' },
        { name: 'icon', type: 'string', isOptional: true },
        { name: 'last_synced', type: 'number' },
      ],
    }),
  ],
});

// Sync strategy
const syncMessages = async (channelId: string) => {
  const lastSynced = await getLastSyncTime(channelId);

  if (!isOnline()) {
    // Return cached messages
    return await database.collections
      .get('messages')
      .query(Q.where('channel_id', channelId))
      .fetch();
  }

  try {
    // Fetch new messages
    const newMessages = await api.getMessages({
      channelId,
      after: lastSynced,
    });

    // Save to local DB
    await database.write(async () => {
      const messagesCollection = database.collections.get('messages');

      for (const msg of newMessages) {
        await messagesCollection.create((message) => {
          message.channelId = msg.channelId;
          message.authorId = msg.authorId;
          message.content = msg.content;
          message.timestamp = msg.timestamp;
          message.synced = true;
        });
      }
    });

    return newMessages;
  } catch (error) {
    // Fallback to cached
    return await getCachedMessages(channelId);
  }
};

Queue for Offline Actions

const offlineQueue = create<OfflineQueueStore>((set, get) => ({
  queue: [],

  addToQueue: (action: OfflineAction) => {
    set((state) => ({
      queue: [...state.queue, { ...action, id: uuid(), timestamp: Date.now() }],
    }));

    // Save to AsyncStorage
    AsyncStorage.setItem('offline_queue', JSON.stringify(get().queue));
  },

  processQueue: async () => {
    const { queue } = get();

    for (const action of queue) {
      try {
        switch (action.type) {
          case 'send_message':
            await api.sendMessage(action.payload);
            break;
          case 'edit_message':
            await api.editMessage(action.payload);
            break;
          case 'delete_message':
            await api.deleteMessage(action.payload);
            break;
        }

        // Remove from queue on success
        set((state) => ({
          queue: state.queue.filter((a) => a.id !== action.id),
        }));
      } catch (error) {
        console.error('Failed to process offline action:', error);
      }
    }

    AsyncStorage.setItem('offline_queue', JSON.stringify(get().queue));
  },
}));

// Process queue when back online
NetInfo.addEventListener((state) => {
  if (state.isConnected) {
    offlineQueue.getState().processQueue();
  }
});

Security & Privacy (Because Nobody Wants Their Memes Leaked)

End-to-End Encryption for DMs

import * as Crypto from 'expo-crypto';

class EncryptionService {
  private async generateKeyPair() {
    // Generate RSA key pair
    const keyPair = await Crypto.generateKeyPairAsync({
      algorithm: 'rsa',
      modulusLength: 2048,
    });

    return keyPair;
  }

  async encryptMessage(message: string, recipientPublicKey: string) {
    // Generate AES key for this message
    const aesKey = await Crypto.randomBytes(32);

    // Encrypt message with AES
    const encryptedMessage = await Crypto.encryptAsync(
      message,
      aesKey,
      { algorithm: 'aes-256-gcm' }
    );

    // Encrypt AES key with recipient's public key
    const encryptedKey = await Crypto.encryptAsync(
      aesKey,
      recipientPublicKey,
      { algorithm: 'rsa' }
    );

    return {
      encryptedMessage,
      encryptedKey,
    };
  }

  async decryptMessage(
    encryptedMessage: string,
    encryptedKey: string,
    privateKey: string
  ) {
    // Decrypt AES key
    const aesKey = await Crypto.decryptAsync(
      encryptedKey,
      privateKey,
      { algorithm: 'rsa' }
    );

    // Decrypt message
    const message = await Crypto.decryptAsync(
      encryptedMessage,
      aesKey,
      { algorithm: 'aes-256-gcm' }
    );

    return message;
  }
}

Rate Limiting

const rateLimitMiddleware = rateLimit({
  windowMs: 60 * 1000, // 1 minute
  max: 10, // 10 messages per minute
  message: 'Too many messages, please slow down',
  standardHeaders: true,
  legacyHeaders: false,
  // Store in Redis for distributed rate limiting
  store: new RedisStore({
    client: redisClient,
    prefix: 'rl:',
  }),
});

app.use('/api/messages', rateLimitMiddleware);

Input Sanitization

import DOMPurify from 'isomorphic-dompurify';

const sanitizeMessage = (content: string): string => {
  // Remove malicious scripts
  let sanitized = DOMPurify.sanitize(content, {
    ALLOWED_TAGS: ['b', 'i', 'u', 'code', 'pre', 'a'],
    ALLOWED_ATTR: ['href'],
  });

  // Escape markdown that could be exploited
  sanitized = sanitized.replace(/!\[.*?\]\(.*?\)/g, ''); // Remove images

  return sanitized;
};

Push Notifications (Without Annoying Users)

Smart Notification System

const notificationService = {
  async schedulePushNotification(message: Message) {
    const { user } = useAuthStore.getState();
    const settings = await getNotificationSettings(user.id);

    // Check if user has muted this channel
    if (settings.mutedChannels.includes(message.channelId)) {
      return;
    }

    // Check if user is mentioned
    const isMentioned = message.mentions.includes(user.id);

    // Check notification preferences
    if (!isMentioned && settings.onlyMentions) {
      return;
    }

    // Check DND schedule
    if (this.isInDNDSchedule(settings.dndSchedule)) {
      return;
    }

    // Group notifications by channel
    const existingNotif = await this.getExistingNotification(
      message.channelId
    );

    if (existingNotif) {
      // Update existing notification
      await Notifications.updateNotificationAsync(existingNotif.id, {
        content: {
          title: `${existingNotif.content.title}`,
          body: `${message.author.name}: ${message.content}`,
          data: { channelId: message.channelId, count: existingNotif.data.count + 1 },
        },
      });
    } else {
      // Create new notification
      await Notifications.scheduleNotificationAsync({
        content: {
          title: `#${message.channel.name}`,
          body: `${message.author.name}: ${message.content}`,
          sound: settings.notificationSound || 'default',
          badge: 1,
          data: { channelId: message.channelId, count: 1 },
        },
        trigger: null, // Send immediately
      });
    }
  },

  isInDNDSchedule(schedule: DNDSchedule): boolean {
    if (!schedule.enabled) return false;

    const now = new Date();
    const currentTime = now.getHours() * 60 + now.getMinutes();
    const startTime = schedule.start.hours * 60 + schedule.start.minutes;
    const endTime = schedule.end.hours * 60 + schedule.end.minutes;

    if (startTime < endTime) {
      return currentTime >= startTime && currentTime <= endTime;
    } else {
      // Handles overnight schedules
      return currentTime >= startTime || currentTime <= endTime;
    }
  },
};

Testing Strategy (Because Bugs in Production Suck)

Unit Tests

// Message formatting tests
describe('MessageFormatter', () => {
  it('should parse markdown correctly', () => {
    const input = '**bold** *italic* ~~strike~~';
    const output = formatMarkdown(input);

    expect(output).toContain('<strong>bold</strong>');
    expect(output).toContain('<em>italic</em>');
    expect(output).toContain('<del>strike</del>');
  });

  it('should handle mentions', () => {
    const input = 'Hey @john how are you?';
    const output = formatMentions(input, [{ id: '1', name: 'john' }]);

    expect(output).toContain('<mention data-id="1">@john</mention>');
  });
});

// Permission tests
describe('PermissionService', () => {
  it('should grant admin all permissions', () => {
    const member = { permissions: PERMISSIONS.ADMINISTRATOR };
    const hasPermission = checkPermission(member, PERMISSIONS.SEND_MESSAGES);

    expect(hasPermission).toBe(true);
  });

  it('should respect channel overrides', () => {
    const member = { roleId: 'role1', permissions: PERMISSIONS.SEND_MESSAGES };
    const channel = {
      permissions: [{ roleId: 'role1', deny: PERMISSIONS.SEND_MESSAGES }],
    };

    const hasPermission = checkPermission(member, channel, PERMISSIONS.SEND_MESSAGES);

    expect(hasPermission).toBe(false);
  });
});

Integration Tests

// Voice channel tests
describe('Voice Channel', () => {
  it('should connect to voice successfully', async () => {
    const channelId = 'test-channel';
    const token = await voiceApi.getToken(channelId);

    expect(token).toBeDefined();

    const connection = await joinVoiceChannel(channelId, token);

    expect(connection.status).toBe('connected');
  });

  it('should handle disconnection gracefully', async () => {
    const connection = await joinVoiceChannel('test-channel', 'token');

    await connection.disconnect();

    expect(connection.status).toBe('disconnected');
  });
});

E2E Tests with Detox

describe('Messaging Flow', () => {
  beforeAll(async () => {
    await device.launchApp();
  });

  it('should send a message successfully', async () => {
    await element(by.id('login-button')).tap();
    await element(by.id('email-input')).typeText('test@example.com');
    await element(by.id('password-input')).typeText('password123');
    await element(by.id('submit-button')).tap();

    await waitFor(element(by.id('server-list')))
      .toBeVisible()
      .withTimeout(5000);

    await element(by.id('server-0')).tap();
    await element(by.id('channel-general')).tap();

    await element(by.id('message-input')).typeText('Hello World!');
    await element(by.id('send-button')).tap();

    await expect(element(by.text('Hello World!'))).toBeVisible();
  });
});

Deployment & DevOps

EAS Build Configuration

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "env": {
        "API_URL": "http://localhost:3000"
      }
    },
    "preview": {
      "distribution": "internal",
      "env": {
        "API_URL": "https://staging-api.communify.app"
      }
    },
    "production": {
      "env": {
        "API_URL": "https://api.communify.app"
      }
    }
  },
  "submit": {
    "production": {
      "ios": {
        "appleId": "your-apple-id",
        "ascAppId": "your-asc-app-id",
        "appleTeamId": "your-team-id"
      },
      "android": {
        "serviceAccountKeyPath": "./google-play-key.json",
        "track": "production"
      }
    }
  }
}

CI/CD Pipeline

# .github/workflows/deploy.yml
name: Deploy

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm ci

      - name: Run tests
        run: npm test

      - name: Setup Expo
        uses: expo/expo-github-action@v8
        with:
          expo-version: latest
          token: ${{ secrets.EXPO_TOKEN }}

      - name: Build iOS
        run: eas build --platform ios --non-interactive --no-wait

      - name: Build Android
        run: eas build --platform android --non-interactive --no-wait

      - name: Deploy Backend
        run: |
          ssh ${{ secrets.SERVER_HOST }} 'cd /var/www/api && git pull && npm install && pm2 restart all'

Monitoring & Analytics

Error Tracking with Sentry

import * as Sentry from 'sentry-expo';

Sentry.init({
  dsn: process.env.SENTRY_DSN,
  enableInExpoDevelopment: false,
  debug: __DEV__,
  tracesSampleRate: 1.0,
});

// Custom error boundary
class ErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    Sentry.Native.captureException(error, {
      contexts: { react: errorInfo },
    });
  }

  render() {
    return this.props.children;
  }
}

Analytics Events

const analytics = {
  trackEvent(event: string, properties?: object) {
    if (__DEV__) return;

    // Amplitude
    amplitude.track(event, properties);

    // Mixpanel
    mixpanel.track(event, properties);
  },

  // Track user actions
  messagesSent: () => analytics.trackEvent('Message Sent'),
  voiceJoined: (channelId: string) => 
    analytics.trackEvent('Voice Channel Joined', { channelId }),
  serverCreated: () => analytics.trackEvent('Server Created'),
};

The Challenges (And How I Solved Them)

Challenge 1: Voice Quality on Poor Connections

Problem: Choppy audio, dropped connections, high latency

Solution:

Implemented adaptive bitrate based on network conditions
Added jitter buffer for packet reordering
Used Opus codec with dynamic bitrate
Packet loss concealment for smooth audio

const adaptiveBitrate = () => {
  const connection = getNetworkConnection();

  if (connection.effectiveType === '4g') {
    return 128000; // High quality
  } else if (connection.effectiveType === '3g') {
    return 64000; // Medium quality
  } else {
    return 32000; // Low quality
  }
};

Challenge 2: Battery Drain

Problem: App killed battery in 2-3 hours

Solution:

Optimized WebSocket heartbeat interval
Reduced animation complexity when battery is low
Disabled unnecessary background processes
Used native modules for heavy computations

const batteryOptimization = () => {
  const batteryLevel = Battery.getBatteryLevelAsync();

  if (batteryLevel < 0.2) {
    // Enable battery saver mode
    disableAnimations();
    increaseHeartbeatInterval();
    pausePresenceUpdates();
  }
};

Challenge 3: Message Sync Conflicts

Problem: Messages appearing out of order after reconnection

Solution:

Implemented vector clocks for message ordering
Server-side reconciliation for conflicts
Optimistic updates with rollback on conflict

const resolveConflict = (localMessage, serverMessage) => {
  if (localMessage.vectorClock < serverMessage.vectorClock) {
    return serverMessage; // Server wins
  }

  return localMessage; // Local wins
};

What I Learned (The Hard Way)

1. Real-time is hard. Really hard. You need to think about race conditions, network partitions, eventual consistency, and a million edge cases.

2. Performance matters more on mobile. Desktop users tolerate dropped frames. Mobile users uninstall your app.

3. Offline-first is a game changer. Users love that messages load instantly from cache.

4. Voice is a different beast. WebRTC is powerful but complex. Budget extra time for voice features.

5. Animations sell the experience. A smooth 60fps animation makes users perceive your app as "faster" even if it's not.

6. Test on real devices. Simulators lie. Always test on actual phones, especially mid-range Android devices.

7. Security from day one. Adding encryption later is painful. Build it in from the start.

The Results

After six months:

12 gaming friends actively use it daily
99.9% uptime (better than Discord during outages)
Sub-100ms message latency
2 hours less battery drain compared to Discord
Zero complaints about UI performance

But more importantly, I learned more from this project than from three years of tutorials.

What's Next?

Current roadmap:

Stage channels for live events
Bot API for custom integrations
Server templates
Mobile screen sharing
Message translation
Custom emoji upload
Webhook integrations
Voice effects and filters

Should You Build This?

If you're learning:

Yes. You'll learn more from this project than any course
Start small: build basic chat first
Add voice later (it's 80% of the complexity)
Don't try to compete with Discord
Build it to learn, not to launch

If you're building a product:

Maybe. The market is saturated
Focus on a specific niche (gaming guilds, study groups, crypto communities)
Your differentiation can't just be "better UI"
Plan for $5k-10k/month in infrastructure costs at scale

Final Thoughts

Building a Discord clone taught me that the best way to learn is to build something impossibly hard and figure it out as you go.

My friends still use my app for our gaming sessions. That alone makes the countless hours of debugging WebRTC worth it.

If you're thinking about building something ambitious, stop thinking and start coding. The best time to start was yesterday. The second best time is now.

The code isn't perfect. The architecture could be better. But it works, and my friends love it.

That's what matters.

That's a wrap 🎁

Now go touch some code 👨‍💻

Catch me here:

LinkedIn | GitHub | YouTube