back

Chat App

Overview

This is a messaging app built using React Native. The theme-customizable app provides users with a chat interface where they can exchange messages, share images, send their location, and access existing messages offline. It works on both iOS and Android devices and uses Google Firestore/Firebase to store messages and images. Guest authentication is handled with Google Firebase authentication.

GitHub
The homepage of the chat app, showing an input for your name, colours to choose from, and a button that says start chatting.

Technologies:

  • React Native
  • Google Firestore/Firebase
  • Expo
  • Expo ImagePicker
  • Expo Location
  • Gifted Chat Library
  • Android Studio

Objective

Complete a CareerFoundry full-stack development assignment by creating a React Native messaging app. It should still have limited functionality offline, and work on both iOS and Android devices.

  • A page where users can enter their name and choose a background colour for the chat screen before entering the chat.
  • A page displaying the conversation, as well as an input field and submit button.
  • The chat must provide users with two additional communication features: sending images and location data.
  • The data should be stored online and offline.
  • The app must be styled according to the given screen design.
  • It must be developed using Expo.
  • Chat conversations must be stored in Google Firestore Database.
  • The app must authenticate users anonymously via Google Firebase authentication.
  • Chat conversations must be stored locally.
  • The app must let users pick and send images from the phone's image library.
  • It must let users take pictures with the device's camera app and send them.
  • Images must be stored in Firebase Cloud Storage.
  • It must be able to read the user's location data.
  • Location data must be sent in the chat in a map.
  • The chat interface and functionality must be created using the Gifted Chat Library.
  • The app's codebase must contain comments.

Process

GitHub logo

I found this project very interesting, and loved building something close to the apps I use in my daily life. I encountered a couple challenges while developing this app, particularly around the location and date. I tested the app on the Andriod Studio Android Emulator, but the location showed up as Palo Alto. After a while I realized that it was happening because the location of the Android Emulator was set to Palo Alto, which meant the location feature was actually working. The fact that the location feature showed my location on my iPhone confirmed that it was working.

A screenshot of the GitHub documentation for the chat app project.

Result

The resulting app meets the requirements of the assignment and looks like the design provided. It also has well-commented code and thorough documentation.This was one of my favourite projects in the course. While it meets all the requirements, to challenge myself further I would like to add on a bonus feature that was suggested in the assignment: an audio feature using Expo's Audio API.

  • Record and play sounds
  • Upload the audio file
  • Send the audio file