Chat App
Case Study

Overview

Chat app is an app for mobile devices using React Native. The app provides users with a chat interface and options to share images and their location.

Purpose & Context

To build a chat app that I can add to my portfolio and demonstrate my knowledge of JavaScript mobile development.

Objective

The aim of the project was to build a native chat app built with React Native optimized for both Android and iOS devices.

Duration

7 Days

Credits

  • Tutor: Terver Aosu
  • Mentor: Stephen Barungi

Built With

  • Expo
  • React Native
  • Google Firebase
  • Android Studio
  • Gifted Chats

Approach

01 Expo

First I: Applied Expo, to set up my first React Native project and used my own device and an Android Emulator to check that everything was working as intended.

02 Chat UIs & Accessibility

Then I: Implemented the design and layout using gifted chat.

03 Real-Time Applications & Data Storage

Next I: Implemented a database solution for your app using Firestore. Because my app needs real-time data (so that users can see new messages instantly), I created a Firestore database that will store every message that’s sent by my users.

04 Storing Data on the Client Side

Then I: Stored my chat app’s messages offline using React Native’s AsyncStorage and partially enabled some of the app’s features when the device is offline using NetInfo.

05 Communication Features

Next I: Added two new communication features, giving users the ability to send images (chosen from their device’s image library or taken with the camera) and share their current location. Decided to store users’ images in Google Cloud Storage so that other chat participants can view them.

06 Documentation

Finally I: Included all the necessary steps in my github repo for someone to follow and set up my chat app.

Retrospective

What went well?

I found building an app in react native to be a seamless process. I like the flexibility that react native framework allows for building Android and iOS apps that only requires one codebase.

What didn't go well?

I would've liked a way to view the app through a demo or other medium rather than using android studio. I found the app to be a bit slow and heavy to use.

Future Steps

I would like to continue to build on the chat app by adding the ability to record and play sounds, the ability to upload an audio file and the ability to send an audio file.

Final Thoughts

Overall, this was a great introduction to mobile development and I found the use of react native to be an enjoyable experience. By requiring only one codebase for building Android and iOS apps, react native simplifies the development process and prevents me from creating redundant code.

Contact me

Please use the form below to send me a message. I'll be happy to hear from you. Thanks!!!