top of page

Chat App (React Native)

This app provides users with a chat interface and options to share images and their location.  

Purpose & Context

The chat app was done as part of CareerFoundry’s full-stack web development coursework to demonstrate my knowledge of JavaScript mobile development.

Duration

This project took me three weeks in total. I was able to finish the project in the allotted time frame while taking my time to understand React Native.

​

​

​

​

​

 

Objective

The objective was to build a chat app for mobile devices using React Native. The app will provide users with a chat interface and options to share images and their location.

Tech Stack

  • Written in React Native

  • The chat interface and functionality were created using the React Native Gifted Chat library

  • Developed using Android Studio and Expo 

  • Data saved on Google Cloud Firestore Storage

  • User authentication is done using Google’s Firebase Authentication

Approach

chat-app-design.png

I began this project by setting up a new project using Expo CLI and creating the necessary components. Once this new project was established, I began implementing the UI as given in the project brief supplied by CareerFoundry. Having a sample design helped me to visualize and design my app.

App design image

Approach

firestore_task_5.3.png

Google Firestore snapshot

I then set up an Android emulator with Android Studio. To set up Android Studio, I needed to free a big chunk of the memory on my laptop, but once it was installed, I was able to view my app on the virtual device as well as on my mobile phone.

 

The next part involved implementing the actual chat functionality of the app. This involved setting up a database with Firestore and implementing Gifted Chat (UI library).

 

Firestore allows for messages to be viewed by users even while offline.

Approach

To finish up my app, I implemented the necessary communication feature. This meant creating custom action methods to allow users to take and share images as well as their location.

Screenshots

Main View : Enter user name and select background color

Chat : Chat with others

Custom actions: Share images and location with others

Credits​

​

Developer: Pradnya Hegde, Tutor: Jay Quach, Mentor: Alfredo Velez

bottom of page