CASE STUDY: CHAT APP


Overview

A chat app developed using React Native and optimized for both Android and iOS devices. The app provides users with a chat interface and options to share images and their location.

Objective

This project was created as a part of CareerFoundry’s Full-Stack Immersion Web Development program for use in my portfolio and gaining experience developing with React Native, a common tool used to create mobile applications, as well as server-side experience storing data with Google Firestore.

Key Features

  • A page where users can enter their username and choose a background color before joining the chat
  • A page displaying the conversation, as well as an input field and “send” button
  • A custom feature providing users with the capability to send images and location
  • Data gets stored online and offline

Tools Used

  • React Native
  • Gifted Chat
  • Expo
  • Google Firestore (v7)

Approach

Client-Side

I created the Chat App using Expo for development and testing, React Native for frontend mobile device coding and Gifted Chat for designing the chat interface and functionality. Utilizing React Native’s ActionSheet, I coded the custom actions for user’s to send their location, take a photo, or send an image from their device’s library- via Expo’s ImagePicker & Location tools- and display it in the chat. The app can be used offline using React Native’s NetInfo and AsyncStorage (client-side storage) to view previous chat conversations.

Server-Side

An essential part of a modern chat application is its ability to store and save a user’s previous conversation, including any images shared. For this project, I utilized Google Cloud Firestore, a NoSQL document database designed for creating serverless and scalable apps. The app authenticates users anonymously via Google Firebase authentication. Chat conversations (data including message text, message & user ID, date, location, etc) and images are stored in Google Firestore Database. Messages and images, once sent, get simultaneously uploaded to the cloud storage- and accessed upon initial Chat screen opening.

Challenges

While many aspects of this project were rather straightforward, a challenge for me came with developing the custom actions for users to send images and/or their location. One issue that arose was displaying the image or location map in the chat conversation while the other came from connecting both to the database for storage. With the help of an experienced developer and mentor, I was able to get out the kinks and gained greater insight into using both React Native and Google Firebase congruently with each other.

Duration

The frontend and backend aspects of this app were created synchronously over the course of 4 weeks as sole web developer on the project.

Summary & Future Steps

Beyond the initial challenges of learning React Native’s custom actions and understanding how to best connect a mobile app to a cloud database, the Chat App came out as expected and desired- a high-performing mobile chat app for users to send messages, photos and their location. Moving forward, I would like to redesign the app with a visual-centered approach including a logo and consistent branding. I enjoyed using Gifted Chat and look forward to further customizing the app beyond the initial guidelines given, such as stylistic alterations and including a profile photo option for the user. There is certainly a lot more to React Native and Gifted Chat to explore by reading through their documentation and I am eager to see what unique features I can add to make my app stand out from its competitors.

A note: As part of a course curriculum, the guidelines for the project required using Google Firebase version 7 whereas Google has updated Firebase to version 9 as of 2022. While not an issue during development, it could become one due to using outdated storage implementation. If re-creating this app, I would try again using the updated version 9 as the app’s serverless storage option.

Back