CASE STUDY FOR CHAT APP

Overview

Chit Chat Talk was a personal project I built as part of my Full-Stack Web Development course at CareerFoundry. This chat application enables seamless 1-on-1 communication, where users can log in securely and engage in real-time messaging. The app allows users to share photos and their geolocation, enhancing the chat experience with rich media and location-based interactions. Designed for ease of use and privacy, the app ensures that users can connect with others and share meaningful content, all while maintaining control over their data.

Purpose

The purpose of this chat application is to provide a simple and intiuitive platform for one-on-one communitcation. It allows users to exchange text messages, share photos, and send their location in real-time. This project was built to deepen my understanding of React Native, Firebase (or your backend), and real-time data handling in mobile app development. It also helped me practice designing user-friendly mobile interfaces and managing app state effectively.

Technology Stack

Frontend	React Native( Gifted Chat, AsyncStorage, React Navigation), CSS	Github
Backend	Node.js, JSON, Firebase (to store user data and messages)	Github
Deployment	Github, AsyncStorage
Authentication	Firecase Authentication
Application Use	Expo

Implementation Process

Define Requirements and Features

User Authentication: Users must be able to log in, and authenticate
Real-time messaging: Messages should be sent and received in real-time (using a service Firebase)
User Profiles: Users should have profiles with display names and other customizable settings
Message Types: Consider text, images, video, or files
Message History: Store and retrieve past messages, whether it’s for one-on-one chats or group chats

Simple Chat Interface

Create a clean and simple chat window with a text input for sending messages and an area to display the chat history
Allow users to send photos by uploading images and display them in the chat window

Geolocation (Address)

Use the browser’s built-in geolocation API to get the user’s current location (latitude and longitude).
Send this data as a message to the other user to view the location on Google Maps.

Permission Requests

Give users a choice: Allow users to decide whether to grant the permission or not

Achievements & Lessons Learned

Achievements

1-on-1 Messaging Implementation: Successfully enabling users to send and receive messages in real-time with each other is a significant achievement.
File Transfer Feature: Adding the ability for users to send photos or files enhances the functionality of the app and is an impressive milestone.
Real-time Data Handling: Achieving seamless real-time message delivery with technologies like WebSocket is a major accomplishment.
UI Improvements: Designing a clean and intuitive user interface that ensures easy navigation for users.

Lessons Learned

Challenges of Real-time Communication: Working with technologies like WebSocket and long-polling teaches you the complexities of real-time messaging.

Error Handling & Exception Management: Dealing with issues like network disconnections or server errors helps you understand the importance of robust error handling.

Future Improvements

Message Encryption: Add end-to-end encryption to secure users' messages and protect their privacy.
Group Chat Functionality: Expand beyond 1-on-1 messaging by adding support for group chats, where multiple users can participate in a conversation.
User Presence Indicators: Show users when others are online or typing, enhancing the real-time feel of the app.
Push Notifications: Implement push notifications to alert users when they receive new messages, even when the app is not open.
Message Search and History: Allow users to search through their chat history and retrieve old messages easily.
Message Reactions: Enable users to react to messages with emojis or other reactions, adding an interactive layer to conversations.
File Previews: Add the ability to preview images or files before they are sent, improving the user experience.
User Blocking and Reporting: Implement features for users to block or report others, ensuring a safer environment.
Cross-Platform Support: Make the app available on multiple platforms (e.g., mobile and web) and ensure it works seamlessly across devices.