Skip to content
/ TickChat Public

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.

github.com/cusaldmsr/TickChat-Backend.git
3 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

cusaldmsr/TickChat

BranchesTags

Repository files navigation

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

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/light theme preference
  • Provides theme switching functions
  • Applies theme to all components
  • Stores theme preference

UserRegistrationProvider

  • Manages user data during registration flow
  • Maintains form data across screens
  • Provides context for user creation

Custom Hooks

useChatList

  • Retrieves friend chat list from server
  • Subscribes to real-time updates
  • Handles loading and error states

useSingleChat

  • Fetches messages from specific conversation
  • Implements pagination for message history
  • Updates on new messages

useUserList

  • Retrieves all available users
  • Filters and searches users
  • Manages user list state

useSendChat

  • Handles message sending logic
  • Manages sending state
  • Integrates with WebSocket

useUserProfile

  • Retrieves current user profile data
  • Manages profile state
  • Handles profile updates

useWebSocketPing

  • Sends periodic ping messages to server
  • Maintains WebSocket connection health

WebSocket Integration

WebSocketProvider

Central provider for WebSocket connection management across the application.

Responsibilities:

  • Establishes persistent WebSocket connection
  • Manages connection lifecycle
  • Implements reconnection logic
  • Broadcasts events to subscribed components

Message Types Supported:

  • ping - Server health check
  • send_chat - Send chat message to specific user
  • get_chat_list - Retrieve all friend conversations
  • get_single_chat - Retrieve messages with pagination
  • send_message - Send message with friend status tracking
  • get_friend_data - Retrieve friend information
  • get_all_users - Get all available users
  • delete_message - Delete message (for me/everyone)
  • save_new_contact - Add new contact
  • set_user_profile - Retrieve user profile data

Connection Management

  • Automatic reconnection on connection loss
  • Proper cleanup on component unmount
  • Error handling and recovery
  • Connection state tracking

Styling & Theme

NativeWind/Tailwind CSS

The application uses NativeWind for styling, which brings Tailwind CSS utility classes to React Native.

Key Features:

  • Utility-first CSS approach
  • Responsive design with breakpoints
  • Dark mode support with automatic switching
  • Consistent spacing and typography
  • Smooth transitions and animations

Styling Approach:

// Inline className styling with Tailwind classes
<View className="bg-white dark:bg-black flex-1">
  <Text className="font-bold text-lg text-slate-700 dark:text-slate-200">
    Hello World
  </Text>
</View>

Theme Support

Light Theme

  • White backgrounds
  • Dark text
  • Light borders

Dark Theme

  • Black backgrounds
  • Light text
  • Dark borders

System Theme

  • Automatically follows device settings

Color Scheme

  • Primary: sky-500
  • Background: white/black
  • Text: slate-700 (light) / slate-200 (dark)
  • Borders: gray-200/gray-800

Navigation

Bottom Tab Navigation

Primary navigation structure with four main sections:

  1. Chats Tab - Main messaging interface with chat list
  2. Status Tab - Status sharing and updates
  3. Communities Tab - Group management interface
  4. Calls Tab - Voice/video calling interface

Stack Navigation

Authentication Stack

  • SplashScreen → SignUpScreen/SignInScreen
  • Contact verification and avatar selection
  • OTP verification

Main App Stack

  • HomeScreen (with bottom tabs)
  • SingleChatScreen - Individual conversations
  • ProfileScreen - User profile management
  • SettingScreen - Application settings
  • NewChatScreen - Start new conversations
  • NewContactScreen - Add contacts
  • StatusScreen - Status features
  • CallsScreen - Calling interface

Navigation Features:

  • Fade animation between screens
  • Modal presentations for overlays
  • Proper back button handling
  • Navigation state persistence

API Integration

UserService (API Client)

Methods:

createNewAccount(userData)

  • Registers new user with backend
  • Sends: firstName, lastName, countryCode, contactNo, profileImage
  • Returns: {status, userId, user}

uploadProfileImage(userId, image)

  • Updates user's profile picture
  • Sends: multipart form data with image
  • Returns: {status, message}

HTTP Endpoints

POST /SignInController

  • Authentication via phone number
  • Request: country_code, contact_no
  • Response: {status, userId, user}

POST /UserController

  • User registration
  • Request: firstName, lastName, countryCode, contactNo, profileImage
  • Response: {status, userId, user}

POST /ProfileController

  • Profile image upload
  • Request: userId, profileImage (multipart)
  • Response: {status, message}

Error Handling

  • Toast notifications for user feedback
  • Network error handling
  • User-friendly error messages
  • Automatic retry logic for failed requests

Authentication Flow

Registration Process

  1. Sign Up Screen

    • User enters first name, last name
    • Floating label inputs for better UX

  2. Contact Verification

    • Country code selection with flag display
    • Phone number input validation
    • Calling code display

  3. Avatar Selection

    • Option to upload custom image or select predefined avatar
    • Image preview in circular format

  4. Account Creation

    • Final submission with profile image
    • Loading state during registration
    • Success/failure feedback via toast

Login Process

  1. Sign In Screen

    • Phone number input
    • Country code selector
    • Navigation to OTP verification

  2. OTP Verification (Infrastructure ready)

    • Verification code input
    • Timer for code expiration

  3. Session Persistence

    • User ID stored in authentication context
    • Automatic navigation to home screen

Session Management

  • User ID persisted after successful login
  • Automatic status updates on app lifecycle
  • Token-based authentication ready for production
  • Logout functionality with account switching

Development

Available Commands

# Start development server
npx expo start

# Start with clearing cache
npx expo start --clear

# Build for development
npx expo build:android --dev
npx expo build:ios --dev

# View logs
npx expo logs

# Clear all cache
npx expo r -c

Code Quality

TypeScript Usage

  • Strict type checking enabled
  • Type definitions for all props and state
  • Interface definitions for data structures

Component Structure

  • Functional components with hooks
  • Proper prop typing
  • Clear component responsibilities
  • Reusable component patterns

Error Handling

  • Try-catch blocks for async operations
  • Graceful error recovery
  • User-friendly error messages
  • Console logging for debugging

Debugging

Debug Mode

  • React Native debugger support
  • Remote debugging via Expo
  • Console.log for tracking state changes

Performance Monitoring

  • FlatList optimization for long lists
  • Memoization for expensive computations
  • Lazy loading for images

Building & Deployment

Android Build

# Build release APK
npx expo build:android --release-channel production

# Sign with keystore
# Configure app signing in app.json

# Upload to Google Play Store
# Sign APK with production keystore

Requirements:

  • Production keystore file
  • Google Play Console account
  • Signing configuration

iOS Build

# Build release IPA
npx expo build:ios --release-channel production

# Configure provisioning profiles
# Configure certificates in app.json

Requirements:

  • Apple Developer account
  • Provisioning profiles
  • App signing certificates

Version Management

  • Use semantic versioning (MAJOR.MINOR.PATCH)
  • Update app.json version before release
  • Document all changes in release notes
  • Maintain backward compatibility

Environment Configuration

{
  "expo": {
    "name": "TickChat",
    "slug": "tickchat",
    "version": "1.0.0",
    "platforms": ["ios", "android"],
    "ios": {
      "bundleIdentifier": "com.cusaldmsr.tickchat"
    },
    "android": {
      "package": "com.cusaldmsr.tickchat"
    }
  }
}

Testing

Unit Testing

Component Testing

  • Test individual React Native components
  • Verify state updates and prop handling
  • Test user interactions and navigation

Service Testing

  • Test API client methods
  • Verify WebSocket message handling
  • Test validation functions

Integration Testing

Frontend-Backend Communication

  • Test WebSocket message sending/receiving
  • Verify HTTP POST requests
  • Test JSON serialization
  • Error response handling

Recommended Tools

  • Jest - JavaScript unit testing
  • React Native Testing Library - Component testing
  • Postman - API testing
  • Android Emulator/iOS Simulator - Device testing

Future Enhancements

Immediate Enhancements

  • Push notifications for message alerts
  • Real-time typing indicators
  • Message reaction with emoji
  • Read receipts UI improvements

Medium-term Features

  • Group messaging capabilities
  • Media sharing (images, videos)
  • Voice and video calling using WebRTC
  • End-to-end encryption

Long-term Enhancements

  • Full-text message search
  • Cloud sync and backup
  • AI-powered message suggestions
  • Business account features
  • Social features and user recommendations
  • Performance optimizations and scalability improvements

Contributors

Project Lead: P. Kusal Damsara
Institution: Java Institute for Advanced Technology
Supervisor: Mr. Anjana Dilhara Samarakoon

License

This project is licensed under the MIT License.

This project is part of the Handheld Device Programming I module at the Java Institute for Advanced Technology.

Support & Documentation

For detailed documentation, refer to the project documentation file included in the repository. For issues or questions, please open an issue on the GitHub repository.

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

Last Updated: 2025

About

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.

github.com/cusaldmsr/TickChat-Backend.git

Topics

nodejs json typescript react-native react-navigation expo tailwind-css react-hooks expo-image-picker nativewind react-native-alert-notification

Resources

Readme
Activity

Stars

3 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages