💬 Chat App — React Native + Node.js + Socket.IO

A real-time 1:1 chat application built using React Native (Expo) on the frontend and Node.js (Express + Socket.IO + MongoDB) on the backend. Implements authentication (JWT), real-time messaging, typing indicators, and online/offline presence.

🚀 Features

🔐 Authentication

• JWT-based Register & Login
• Persistent login with AsyncStorage
• Protected routes (Expo Router + Zustand state management)

💬 Chat Functionality

• Real-time 1:1 messaging via Socket.IO
• Messages saved & fetched from MongoDB
• Typing indicators
• Online/Offline status
• Last message preview in user list

🧭 UI & Navigation

• React Native + Expo Router navigation
• Home screen with user list
• Chat screen with scrollable messages
• Clean, minimal UI with Tailwind (NativeWind)

UI Previews

Login Screen	Signup Screen	Home Screen	Signup Screen

🛠️ Tech Stack

Frontend

• React Native (Expo)
• Zustand (state management)
• Socket.IO Client
• NativeWind (TailwindCSS for RN)

Backend

• Node.js + Express
• Socket.IO
• MongoDB + Mongoose
• JSON Web Tokens (JWT)
• bcrypt (password hashing)

⚙️ Setup & Installation

Clone the repository

git clone https://github.com/Asim-Mulla/OpenChat.git

Backend Setup

1. Navigate to backend directory

cd backend/

2. Install dependencies

npm install

3. Create .env file in the backend directory

MONGO_URI=your_mongodb_connection_string

JWT_SECRET=your_jwt_secret_key

4. Start the server

npm run dev

Frontend Setup

1. Open new terminal and navigate to frontend directory

cd frontend/

2. Install dependencies

npm install

3. Replace the SERVER_URL to your IPv4 Address (http://your_ipv4_address:3000)

4. Run the Expo app

npx expo