TickChat - Real-Time Chat Application

A cross-platform mobile messaging application built with React Native, enabling users to send and receive instant messages similar to WhatsApp or Messenger. TickChat provides seamless communication across iOS and Android platforms with a clean, intuitive user interface.

Repository: https://github.com/cusaldmsr/TickChat.git

Table of Contents

• Overview
• Features
• Technology Stack
• Installation & Setup
• Project Structure
• Key Components
• State Management
• WebSocket Integration
• Styling & Theme
• Navigation
• API Integration
• Authentication Flow
• Development
• Building & Deployment
• Testing
• Future Enhancements
• Contributors

Overview

TickChat is a modern real-time messaging platform designed to provide users with instant communication capabilities. The application integrates a robust backend infrastructure built with Java Servlets and Hibernate, connected via WebSocket technology to ensure low-latency message delivery.

Target Platforms

• Android
• iOS

Development Paradigm

Cross-platform mobile development using React Native with native modules

Features

Core Messaging Features

User Authentication

• Phone number-based registration and login
• Country code selection with automatic validation
• User profile creation with first and last names
• Optional profile image selection from gallery or predefined avatars (16 options)
• Session persistence using authentication tokens

Real-time Chat

• Instant message delivery via WebSocket connection
• Message status tracking (sent, delivered, read)
• Support for multiline messages and emoji
• Message timestamps with intelligent time formatting
• Typing indicators infrastructure ready

Chat Management

• Chat list with recent conversations displayed first
• Search functionality to filter conversations by name or message content
• Unread message counters
• Last message preview in chat list
• Conversation timestamps

Individual Chat Window

• Chronologically ordered message display
• User profile information in header with last seen status
• Message grouping for consecutive messages from same sender
• Horizontal date separators between conversation days
• Smart message bubbling and grouping

Message Operations

• Delete message for self only
• Delete message for everyone
• Visual indication of deleted messages with sender attribution
• Message status indicators
• Automatic message re-grouping after deletion

Profile Management

• View personal profile with all information
• Update profile picture with camera or gallery access
• View contact information and joined date
• Edit display name and status message

Contact Management

• Browse all app users
• Search contacts by name or phone number
• Add new contacts manually
• View user status (online/offline/last seen)
• Display names for saved contacts

Settings & Customization

• Dark mode and light mode theme support
• System default theme option
• Notification preferences
• Media visibility settings
• Read receipt preferences

Advanced Features

• Real-time online/offline status tracking
• Last seen timestamp for offline users
• Message deletion with attribution
• Pagination with infinite scroll for chat history

Technology Stack

Frontend Technologies

Core Framework

• React Native - Cross-platform mobile application framework
• TypeScript - Superset of JavaScript providing static typing
• Expo - Development platform and SDK for React Native

Styling & UI

• Tailwind CSS (NativeWind) - Utility-first CSS framework adapted for React Native
• React Native - Native UI components

State Management

• React Hooks - useState, useContext, useEffect
• Context API - Authentication, Theme, User Registration contexts

Navigation

• React Navigation - Native stack navigator and bottom tabs
• React Navigation Native Stack - Screen navigation management

Real-time Communication

• WebSocket - Persistent bidirectional communication protocol

Image & Media Handling

• Expo Image Picker - Gallery and camera access
• React Native Image - Image component and utilities

Utilities & Libraries

• Expo Image Picker - Media selection from device
• React Native Alert Notification - Toast and alert notifications
• Google libphonenumber - Phone number validation and parsing

Backend Integration

• RESTful APIs - HTTP requests for authentication and registration
• WebSocket APIs - Real-time message delivery and synchronization
• JSON - Data serialization format
• Backend Repository - Click Here

Installation & Setup

Prerequisites

• Node.js (v16 or higher)
• npm or yarn package manager
• Expo CLI installed globally
• iOS Simulator (Mac) or Android Emulator

Steps

1. Clone the Repository

   git clone https://github.com/cusaldmsr/TickChat.git
   cd TickChat
   

2. Install Dependencies

   npm install
   # or
   yarn install
   

3. Configure Backend Connection

   • Update WebSocket URL in environment configuration
   • Set API endpoint for authentication and registration
   • Configure country calling codes

4. Start Development Server

   npx expo start
   

5. Run on Emulator/Device

   • Press a for Android Emulator
   • Press i for iOS Simulator
   • Scan QR code with Expo Go app on physical device

Project Structure

TickChat/
├── src/
│   ├── screens/              # All screen components
│   │   ├── SplashScreen.tsx
│   │   ├── SignInScreen.tsx
│   │   ├── SignUpScreen.tsx
│   │   ├── AvatarScreen.tsx
│   │   ├── HomeScreen.tsx (HomeTabs)
│   │   ├── SingleChatScreen.tsx
│   │   ├── ProfileScreen.tsx
│   │   ├── SettingScreen.tsx
│   │   ├── ContactScreen.tsx
│   │   ├── NewContactScreen.tsx
│   │   ├── StatusScreen.tsx
│   │   ├── CallsScreen.tsx
│   │   ├── CommunitiesScreen.tsx
│   │   └── SignOutScreen.tsx
│   ├── components/           # Reusable components
│   │   ├── UserContext.tsx
│   │   └── AuthProvider.tsx
│   ├── theme/               # Theme configuration
│   │   └── ThemeProvider.tsx
│   ├── navigation/          # Navigation configuration
│   │   └── RootNavigation.ts
│   ├── socket/              # WebSocket integration
│   │   ├── WebSocketProvider.tsx
│   │   └── UseWebSocketPing.ts
│   ├── api/                 # API service clients
│   │   └── UserService.ts
│   ├── util/                # Utility functions
│   │   └── Validation.ts
│   └── global.css           # Global styles
├── assets/                   # Static assets
│   ├── logo.png
│   └── avatar/              # Avatar images
├── App.tsx                  # Main App component
├── index.ts                 # Entry point
├── app.json                 # Expo configuration
├── package.json             # Dependencies
├── tsconfig.json            # TypeScript configuration
└── nativewind.config.js     # NativeWind configuration

Key Components

AvatarScreen

Manages user profile image selection during registration. Allows users to either upload a custom image from their gallery or select from 16 predefined avatars.

Features:

• Image picker integration with Expo
• Display of 16 predefined avatars in horizontal scrollable list
• Image preview with rounded corners
• Account creation submission with loading state

HomeScreen (ChatListScreen)

Displays all user conversations with real-time updates. Main hub for messaging activity.

Features:

• List of conversations sorted by recent activity
• Search and filter functionality
• Unread message badges
• Last message preview
• Floating action button for new conversations
• Real-time updates via WebSocket

SingleChatScreen

Individual chat window between two users showing message history and enabling real-time communication.

Features:

• Chronological message display
• Date separators between conversation days
• Smart message grouping
• Message deletion with confirmation modal
• Input area with send/mic button toggle
• Pagination for loading older messages
• Real-time message status updates

ProfileScreen

Displays and allows editing of user profile information.

Features:

• Profile image with edit overlay
• User name and status message display
• Phone number with QR code share
• Email and social media links
• Account statistics
• Joined date display

SettingScreen

Application settings and preferences management.

Features:

• Theme selection (Light/Dark/System)
• Language selection infrastructure
• Notification preferences toggle
• Media visibility settings
• Read receipt preferences
• Logout functionality

NewContactScreen

Interface for adding new contacts to the application.

Features:

• First and last name input fields
• Country picker with calling codes
• Phone number input with validation
• Save contact button

State Management

React Hooks

useState

• Local component state for UI elements
• Form inputs and validation states
• Loading and error states
• Image selection state

useEffect

• Side effects and lifecycle management
• WebSocket connection setup
• Navigation side effects
• Data fetching on component mount

useContext

• Global state access across components
• Authentication context
• Theme context
• User registration context

Context Providers

AuthContext

• Manages user authentication state
• Persists user ID and session tokens
• Provides sign up and sign in methods
• Tracks loading state during authentication

ThemeProvider

• Manages dark