ChatSync

A mobile chat UI built with Expo and React Native — message bubbles, a live-looking "Online" status badge, and a keyboard-aware input bar, styled to look like a modern messaging app. Currently runs with local in-memory state as a UI prototype for a planned real-time backend.

---

Features

• Chat UI — message bubbles that differ in style for your own messages vs. others'
• Keyboard-aware input — KeyboardAvoidingView keeps the input bar visible on iOS/Android
• Online status badge — animated indicator in the header
• Cross-platform — runs on iOS, Android, and web via Expo

Current state: messages are held in local component state (useState) — sending a message appends it to the local list under a randomly generated username. The header text references "real-time messaging powered by Elixir & Socket.IO," which reflects the planned backend, not what's wired up yet. There is currently no socket.io-client (or any networking) dependency in this repo.

A matching Socket.IO backend — ChatSync-API — is already built and running (rooms, join/leave presence, message broadcasting). It just isn't connected from this frontend yet: the next step is adding socket.io-client here and replacing the local useState message list with real events from that server.

Tech Stack

Layer	Technology
Framework	Expo (SDK 56)
Runtime	React Native 0.85
Language	TypeScript
Navigation/UI	React Native core components (FlatList, TextInput, KeyboardAvoidingView)

Prerequisites

• Node.js 20 or later
• npm
• Expo Go app on your phone (for quick device testing), or Android Studio / Xcode for emulators
• The Expo CLI (installed automatically via npx)

Installation

# 1. Clone the repository
git clone https://github.com/phiwakonkem/ChatSync.git
cd ChatSync

# 2. Install dependencies
npm install

# 3. Start the Expo dev server
npm start

This opens the Expo Dev Tools in your terminal/browser. From there:

npm run android   # run on Android emulator/device
npm run ios       # run on iOS simulator/device (macOS only)
npm run web       # run in the browser

Or scan the QR code shown in the terminal with the Expo Go app on your phone.

Project Structure

ChatSync/
├── App.tsx           # Main chat screen: message list, input, styles
├── index.ts           # Expo entry point
├── app.json           # Expo app configuration
├── assets/            # Icons and splash screens
└── tsconfig.json

Related

• Backend: ChatSync-API (Socket.IO server — built, not yet connected here)

Roadmap

• Add socket.io-client and connect to ChatSync-API for real multi-user messaging
• Add persistent chat history (currently in-memory on the backend)
• Add multiple chat rooms/conversations
• Push notifications for new messages

Author

Phiwakonke Mthethwa — Full-Stack Developer, South Africa GitHub · LinkedIn · phiwakonkem@gmail.com

License

MIT