A modern, full-featured real-time chat application built with React Native (Expo) and Node.js.

• ✅ Email/password authentication with JWT
• ✅ User registration and login
• ✅ Secure password hashing with bcrypt
• ✅ Persistent sessions
• ✅ User profiles with display names and avatars

• ✅ Real-time one-to-one private chats
• ✅ Group chat support (backend ready)
• ✅ Message delivery status (sent ✓ / delivered ✓✓ / read ✓✓)
• ✅ Typing indicators with animations
• ✅ Emoji support
• ✅ Message timestamps
• ✅ Chat history with pagination
• ✅ Auto-scroll to latest messages

• ✅ Dark/Light theme toggle with iOS-style colors
• ✅ Color-coded user avatars
• ✅ Online/offline status indicators
• ✅ User search by username or email
• ✅ Contact list management
• ✅ Pull-to-refresh chat list
• ✅ Unread message badges
• ✅ Smooth animations and transitions
• ✅ Loading states and error handling

• Node.js 18+ and npm
• MongoDB Atlas account (or local MongoDB)
• Expo CLI for mobile app development
• Android Studio (for Android) or Xcode (for iOS)

cd backend
npm install

# Create .env file with your credentials
cp .env.example .env
# Edit .env with your MongoDB URI and JWT secret

# Start server
npm start

Backend will run on http://localhost:3000

cd frontend
npm install

# Start Expo development server
npm start

# Run on specific platform
npm run android  # Android
npm run ios      # iOS

• Backend: https://chatflix-sjfr.onrender.com
• Status: ✅ Live and operational
• Version: 2.0.0
• MongoDB: Atlas Cloud Database

Frontend:

• React Native 0.72.6 with Expo SDK 49
• React Navigation v6 for routing
• Socket.io-client v4.6 for real-time communication
• Axios for REST API calls
• AsyncStorage for local data persistence
• Moment.js for date/time formatting

Backend:

• Node.js with Express.js
• Socket.io v4 for WebSocket connections
• MongoDB with Mongoose ODM
• JWT for authentication
• bcryptjs for password hashing
• CORS enabled for cross-origin requests

ChatFlix/
├── backend/
│   ├── config/
│   │   └── database.js           # MongoDB connection
│   ├── controllers/
│   │   ├── authController.js     # Authentication logic
│   │   ├── userController.js     # User management
│   │   ├── chatController.js     # Chat room management
│   │   └── messageController.js  # Message handling (V1)
│   ├── middleware/
│   │   └── auth.js               # JWT verification
│   ├── models/
│   │   ├── User.js               # User schema (V1)
│   │   ├── EnhancedUser.js       # User schema with auth (V2)
│   │   ├── ChatRoom.js           # Chat room schema
│   │   ├── Message.js            # Message schema (V1)
│   │   └── EnhancedMessage.js    # Message with status (V2)
│   ├── routes/
│   │   ├── authRoutes.js         # Auth endpoints
│   │   ├── userRoutes.js         # User endpoints
│   │   ├── chatRoutes.js         # Chat endpoints
│   │   └── messageRoutes.js      # Message endpoints (V1)
│   ├── utils/
│   │   └── socketHandler.js      # Socket.io event handlers
│   ├── .env                      # Environment variables
│   ├── server.js                 # Application entry point
│   └── package.json
│
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── EnhancedMessageBubble.js  # Message display with status
│   │   │   ├── TypingIndicator.js        # Typing animation
│   │   │   └── UserAvatar.js             # Color-coded avatars
│   │   ├── screens/
│   │   │   ├── AuthScreen.js             # Login/Signup
│   │   │   ├── ChatListScreen.js         # Conversation list
│   │   │   ├── ChatRoomScreen.js         # Chat interface
│   │   │   └── ContactsScreen.js         # User search & contacts
│   │   ├── services/
│   │   │   ├── apiService.js             # REST API integration
│   │   │   └── socketService.js          # Socket.io client
│   │   └── utils/
│   │       ├── config.js                 # App configuration
│   │       └── theme.js                  # Dark/Light themes
│   ├── assets/                           # Images and icons
│   ├── App.js                            # Root component
│   ├── app.json                          # Expo configuration
│   ├── eas.json                          # EAS Build configuration
│   └── package.json
│
├── DEPLOY_NOW.md                         # Deployment guide
└── README.md                             # This file

POST /api/auth/register    # Register new user
POST /api/auth/login       # Login user

GET  /api/users/contacts          # Get user's contacts
GET  /api/users/search?query=     # Search users

GET  /api/chats/rooms                    # Get user's chat rooms
GET  /api/chats/rooms/private/:userId    # Get/create private room
POST /api/chats/rooms/group              # Create group room
GET  /api/chats/rooms/:roomId/messages   # Get room messages
POST /api/chats/rooms/:roomId/messages   # Send message (REST)

GET  /health    # Server status

'join:room'         // Join a chat room
'leave:room'        // Leave a chat room
'message:send'      // Send a message
'typing:start'      // User started typing
'typing:stop'       // User stopped typing

'message:new'       // New message received
'typing:start'      // Someone is typing
'typing:stop'       // Typing stopped
'user:online'       // User came online
'user:offline'      // User went offline

• Clean white/blue design
• High contrast for readability
• iOS-inspired colors

• Pure black background (#000000)
• iOS-style accent colors
• Reduced eye strain
• OLED-friendly

PORT=3000
MONGODB_URI=mongodb+srv://username:[email protected]/chatapp
JWT_SECRET=your_super_secret_key_here
JWT_EXPIRE=30d
NODE_ENV=production

EXPO_PUBLIC_API_URL=https://chatflix-sjfr.onrender.com
EXPO_PUBLIC_SOCKET_URL=https://chatflix-sjfr.onrender.com

cd frontend
npx eas-cli@latest build --platform android --profile preview

cd frontend
npx eas-cli@latest build --platform ios --profile preview

Build takes 10-15 minutes. Download link will be provided upon completion.

# Health check
curl https://chatflix-sjfr.onrender.com/health

# Register user
curl -X POST https://chatflix-sjfr.onrender.com/api/auth/register \
  -H "Content-Type: application/json" \
  -d '{"username":"test","email":"[email protected]","password":"test123"}'

# Login
curl -X POST https://chatflix-sjfr.onrender.com/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{"email":"[email protected]","password":"test123"}'

1. Install APK on Android device
2. Register a new account
3. Login with credentials
4. Search for other users
5. Start a conversation
6. Send messages and test real-time delivery
7. Toggle dark/light mode
8. Test typing indicators

See DEPLOY_NOW.md for detailed deployment instructions.

1. Backend on Render: Connect GitHub, add environment variables, deploy
2. Frontend APK: Run EAS build command, wait 10-15 minutes
3. Test: Install APK and verify all features

• Cannot connect to MongoDB: Check MONGODB_URI format and credentials
• JWT errors: Ensure JWT_SECRET is set in environment variables
• Port in use: Change PORT in .env or kill process using port 3000

• Cannot connect to server: Verify API_URL in config.js
• Build fails: Delete node_modules and package-lock.json, reinstall
• Socket disconnects: Check CORS settings on backend
• Dependencies conflict: Use exact versions specified in package.json

• Full authentication system with JWT
• Room-based architecture (private & group chats)
• Enhanced UI with dark/light themes
• Typing indicators and message status
• User search and contacts
• Improved security and scalability

• Basic real-time chat
• Simple username-based login
• Global chat room
• Message persistence

This is a personal project, but suggestions and feedback are welcome!

This project is open source and available for learning purposes.

Mahesh Singh

• GitHub: @maheshsingh20
• Project: ChatFlix

• Built with React Native and Expo
• Real-time powered by Socket.io
• Database: MongoDB Atlas
• Deployed on Render

Status: ✅ Production Ready | Version: 2.0.0 | Last Updated: July 2026