{ M.Ghaly }
← All Projects
Mobile App

Sagar App

Real-time chat application with instant messaging, built on Socket.IO for live communication and React Query for efficient data synchronization.

Year

2023

Company

WhyNotTech

Status

Live

React NativeSocket.IOReact QueryReal-time

Overview

Sagar is a real-time chat application built for WhyNotTech, enabling instant messaging between users with a mobile-first experience built in React Native.

The Challenge

Chat has a deceptively hard requirement: messages must arrive instantly, in order, and without polling. A standard REST approach would mean constant requests, delayed delivery, and poor battery life on mobile. On top of that, the app needed to handle reconnection gracefully — a dropped connection mid-conversation shouldn't lose messages or leave the UI in a broken state.

My Role

React Native Developer — built the full mobile application from scratch, including the real-time messaging layer, server-state management, and connection lifecycle handling.

Architecture & Technical Decisions

Real-Time Messaging → Socket.IO

I used a persistent WebSocket connection via Socket.IO for the messaging layer. This gives true bidirectional, low-latency delivery — the server pushes new messages to clients instantly rather than waiting for a poll. I implemented reconnection logic so the client automatically re-establishes the connection and re-syncs missed messages when connectivity is restored.

Server State → React Query

Not everything in a chat app is real-time — message history, user profiles, and conversation lists are fetched on demand. React Query handles this layer: it caches fetched data, manages loading/error states, and provides a clean invalidation model. When a new Socket.IO message arrives, I invalidate the relevant React Query cache so both layers stay in sync without duplication.

Key Features

  • Real-time bidirectional messaging with instant delivery
  • Automatic reconnection and missed-message recovery
  • Message history fetching with caching
  • Clean separation between real-time (WebSocket) and request/response (React Query) data layers

Results

  • Delivered a fully functional real-time chat experience on iOS and Android
  • Clean architecture that kept the real-time and server-state layers independent and easy to extend