Chat App Case Study

Overview

My chat application is an application developed with React Native & designed to mimic other modern chat applications.

Purpose and Context

This application was completed for my CareerFoundry course to expose me to the world of mobile web development.

Objective

My objective for this application was to take tech previously unfamiliar to me such as React Native and Expo to learn to develop for the mobile space of tech.

Duration

This particular project took me a bit longer than it normally would have due to a slight problem with a dependency versioning issue, but I was able to complete it in about 5 weeks.

Credits

My role was the lead developer on this project with the aid of my CareerFoundry Tutor and Mentor.

Tools, Skills, Methodologies

React Native was used to write the application, while Expo was used for development. The Chat app also makes use of Google Firestore Database, Google Firebase Authentication, & Firebase Cloud Storage.

Project Process

To begin this project, I installed and set up Expo/Expo Go so I could develop my project and see the changes made in real-time. I then built out the code for the separate "screens" I would need for the application, installed React Navigation, and set up a TouchableOpacity wrapper to allow users to navigate between said screens. Also installed was Gifted Chat to handle much of the chat functionality of the application, and I implemented code to make use of the KeyboardAvoidingView component to ensure the input field won't be hidden beneath the keyboard on any smaller screened devices.

Next up was installing Firebase, as well as getting my Google Firestore Database set up for the application to handle the messaging and media storage.

I then installed AsyncStorage to store messages locally, as well as set Firestore to disable when there is no network connection. From there, I added code so the messages would display from Firestore when it's active, & from cached messages when not active.

Lastly, I added an ActionSheet to the chat screen giving users the options to choose a photo from their existing photos, take a new photo, send their location, or cancel.

Challenges

The most difficult challenge I faced was getting my Firestore Database connected properly with my application. At the time, a newer version of Firebase had just come out, while my coding course curriculum was still using an older version. Neither of these versions were working and so I meticulously read through the documentation for the newer version, which ultimately didn't work out either. In the end, through some perseverance and assistance from my CareerFoundry tutor, I was able to find a version that would function within my app.

Conclusion

This was one of my more enjoyable projects that I completed for CareerFoundry, outside of the Firebase versioning headache that is! I really enjoyed working with React Native's components and the mobile side of development in general.