Chati - Real-time Chat Application

A modern, real-time chat application built with Flutter, WebSocket, and GetX for state management. This project demonstrates advanced Flutter development skills perfect for job interviews.

🚀 Features

Core Functionality

• Real-time messaging via WebSocket connection
• User authentication with username-based login
• Live user presence - see who's online/offline
• Message status tracking (pending, sent, delivered, read)
• Responsive design that works on all screen sizes
• Connection management with automatic reconnection

Technical Features

• GetX state management for reactive UI updates
• WebSocket service with heartbeat and reconnection logic
• Clean architecture with separation of concerns
• Local storage for user session persistence
• Error handling and connection recovery
• Type-safe models with JSON serialization

📱 Screenshots

Login Screen

• Clean, modern login interface
• Username validation with real-time feedback
• Clear instructions for users

Chat Screen

• Real-time message display with bubble UI
• Online users panel with avatars
• Connection status indicator
• Message input with send button

🏗️ Architecture

Project Structure

lib/
├── core/
│   ├── constants/          # App constants and configuration
│   ├── services/           # Business logic services
│   └── utils/              # Utility functions
├── models/                 # Data models
│   ├── user.dart           # User model
│   └── chat_message.dart   # Message model
├── controllers/            # GetX controllers
│   ├── auth_controller.dart    # Authentication logic
│   └── chat_controller.dart    # Chat functionality
├── views/
│   ├── screens/            # UI screens
│   │   ├── login_screen.dart
│   │   └── chat_screen.dart
│   └── widgets/            # Reusable UI components
│       ├── message_bubble.dart
│       └── user_list_item.dart
├── bindings/               # Dependency injection
│   └── app_bindings.dart
└── routes/                 # Navigation configuration
    └── app_routes.dart

State Management

• GetX for reactive state management
• Rx observables for real-time updates
• Bindings for dependency injection
• Controllers for business logic separation

WebSocket Implementation

• Connection management with automatic reconnection
• Heartbeat mechanism to keep connections alive
• Message queuing for offline scenarios
• Error handling and connection recovery

🛠️ Technology Stack

Frontend

• Flutter 3.10+ - UI framework
• Dart 3.0+ - Programming language
• GetX 4.6+ - State management and navigation
• WebSocket Channel - Real-time communication
• Shared Preferences - Local storage
• Dio - HTTP client

Backend (Demo Server)

• Node.js - Server runtime
• ws - WebSocket library
• HTTP - Server framework

📦 Installation

Prerequisites

• Flutter SDK (3.10 or higher)
• Dart SDK (3.0 or higher)
• Node.js (14 or higher)
• npm or yarn

Flutter App Setup

1. Clone and navigate to project

   cd chati

2. Install dependencies

   flutter pub get

3. Run the app

   flutter run

Demo Server Setup

1. Install Node.js dependencies

   npm install

2. Start the WebSocket server

   npm start

   Or for development with auto-restart:

   npm run dev

3. Server will start on

   • WebSocket: ws://localhost:8080
   • HTTP: http://localhost:8080

🎯 Usage

Starting the Application

1. Start the demo server (see above)
2. Launch the Flutter app
3. Enter a username (3-20 characters, letters/numbers/underscores)
4. Click "Join Chat"
5. Start messaging!

Features Demo

• Multiple Users: Open the app in multiple browser windows/devices
• Real-time Messages: Messages appear instantly across all clients
• User Presence: See who's online/offline in the users panel
• Connection Status: Monitor connection state in the app bar
• Message Status: See delivery status (pending → sent → delivered)
• Auto-reconnection: Test by stopping/starting the server

🔧 Configuration

WebSocket URL

Update the WebSocket URL in lib/core/constants/app_constants.dart:

static const String websocketUrl = 'ws://localhost:8080'; // Change for production

App Settings

• Connection timeout: 10 seconds
• Heartbeat interval: 30 seconds
• Max message length: 1000 characters
• Username length: 3-20 characters

🧪 Testing

Manual Testing

1. Connection Test: Start server, launch app, verify connection
2. Message Test: Send messages between multiple instances
3. User Management: Test login/logout functionality
4. Error Handling: Stop server, verify reconnection logic
5. Persistence: Close app, reopen, verify user session

Automated Testing

flutter test

🚀 Deployment

Production Considerations

• Update WebSocket URL for production server
• Add authentication (JWT tokens, etc.)
• Database integration for message history
• SSL/TLS for secure connections
• Error reporting (Sentry, Crashlytics)
• Analytics for user behavior tracking

Building for Production

# Android
flutter build apk --release

# iOS
flutter build ios --release

# Web
flutter build web --release

📚 API Documentation

WebSocket Protocol

Client → Server Messages

Join Chat

{
  "type": "join",
  "username": "john_doe",
  "timestamp": "2023-12-30T09:00:00.000Z"
}

Send Message

{
  "type": "message",
  "id": "12345",
  "content": "Hello world!",
  "senderId": "user123",
  "senderName": "john_doe",
  "timestamp": "2023-12-30T09:00:00.000Z"
}

Heartbeat

{
  "type": "ping"
}

Server → Client Messages

User Joined

{
  "type": "user_joined",
  "user": {
    "id": "user123",
    "username": "john_doe",
    "isOnline": true,
    "lastSeen": "2023-12-30T09:00:00.000Z"
  }
}

Chat Message

{
  "type": "message",
  "id": "12345",
  "content": "Hello world!",
  "senderId": "user123",
  "senderName": "john_doe",
  "timestamp": "2023-12-30T09:00:00.000Z",
  "status": "sent"
}

User List

{
  "type": "user_list",
  "users": [...]
}

🤝 Contributing

This is a demo project for job interview purposes. However, suggestions and improvements are welcome!

Development Guidelines

• Follow Flutter best practices
• Use meaningful commit messages
• Write clean, documented code
• Test thoroughly before submitting

📄 License

This project is created for educational and demonstration purposes.

🎯 Interview Highlights

Technical Skills Demonstrated

• Flutter Development: Modern UI with Material Design
• State Management: GetX with reactive programming
• Real-time Communication: WebSocket implementation
• Architecture: Clean architecture with separation of concerns
• Error Handling: Comprehensive error management
• Performance: Efficient state updates and UI rendering

Key Features for Interview

• Real-time messaging with WebSocket
• Responsive design for multiple screen sizes
• Connection management with auto-reconnection
• User authentication and session persistence
• Clean code architecture with proper abstractions
• Comprehensive error handling
• Production-ready code quality

Potential Improvements

• Database integration for message history
• Push notifications for new messages
• Message encryption for security
• File sharing capabilities
• Group chat functionality
• Message reactions and threading
• Dark mode support
• Accessibility improvements

📞 Contact

For questions about this project or interview discussions, please reach out through your preferred channel.

---

Built with ❤️ using Flutter and GetX