Real-Time Chat App Project

Project Concept

A real-time one-to-one chat app with read/unread state and live events via Socket.IO. The same backend serves two separate clients — a React web app and a React Native mobile app.

What the Interface Shows

A fully RTL Arabic conversation, an inbox with multiple threads, two profile pages showing both avatar states (real and default), and a login screen.

My Role and Decisions

When I noticed Arabic messages rendering LTR despite Arabic content, the fix wasn’t manually forcing the whole section to RTL — it was adding dir="auto" at the individual message text level, letting the browser infer direction from the actual content, so Arabic messages render RTL and English ones stay LTR without breaking anything. I also traced a login autofill issue to a missing autocomplete="current-password" attribute — a one-line password-manager autofill fix, but only after understanding the real cause.

Technical Aspects

Express + Mongoose + Socket.IO for the backend, with separate React web and React Native mobile clients (not bundled together). Authentication uses JWT with native bcrypt, and image storage is swappable between local and Cloudinary. Separating the server from the frontend means independent deployment for each (Heroku for the server, GitHub Pages for the web client).

Project Value in the Portfolio

This project demonstrates handling bidirectional text with a simple, appropriately-scoped fix rather than an over-engineered one, and a two-client (web and mobile) architecture sharing one backend.