ChitChat

Project Overview

What is it?

ChitChat is a native mobile application built using React Native. It is a messenging service app that is not dissimilar from WhatsApp given that the user can send and receive text messages, photos taken with the phone's camera, images or photos from the phone's storage, and share the user's location.

What was the objective?

To build a chat app for mobile devices using React Native, and Expo.io, as part of the CareerFoundry Web Development course.

Which tools were used?

Server-side: Google Firestore Database, Google Firebase
Client-side: React Native, Gifted Chat library
Development Environment: Expo.io

User Stories

• As a new user, I want to be able to easily enter a chat room so I can quickly start talking to my friends and family.
• As a user, I want to be able to send messages to my friends and family members to exchange the latest news.
• As a user, I want to send images to my friends to show them what I'm currently doing.
• As a user, I want to share my location with my friends to show them where I am.
• As a user, I want to be able to read my messages offline so I can reread conversations at any time.
• As a user with a visual impairment, I want to use a chat app that is compatible with a screen reader so that I can engage with a chat interface.

Key Features

• A page where users can enter their name and choose a background color for the chat screen before joining 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.
• Data gets stored online and offline.

Screen Design & Assets

Design Specifications:

• Vertical and horizontal spacing: evenly distributed.
• App title: font size 45, font weight 600, font color #FFFFFF.
• “Your name”: font size 16, font weight 300, font color #757083, 50% opacity.
• “Choose background color”: font size 16, font weight 300, font color #757083, 100% opacity.
• Color options HEX codes: #090C08; #474056; #8A95A5; #B9C6AE.
• Start chatting button: font size 16, font weight 600, font color #FFFFFF, button color #757083.

Building The App

The technical requirements for creating the app:

• The app must be written in React Native.
• The app must be developed using Expo.io.
• The app must be styled according to the given screen design.
• 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.
• The app must let users take pictures with the device's camera app, and send them.
• The app must store images in Firebase Cloud Storage.
• The app must be able to read the user's location data.
• Location data must be sent via the chat in a map view.
• The chat interface and functionality must be created using the Gifted Chat library.
• The project must include technical documentation.
• All React Native code must be valid and linted according to given requirements.

The Final Product

The source code is deployed to GitHub, a platform for hosting, collaborating, and version control. Take a look at the code here.

---

Challenges Faced

This was my first venture into the world of React Native, and with it came a new steep learning curve. Nevertheless, thanks to my consolidated previous experience with React, I quickly adapted to this framework and the challenges that it posed. The biggest issue I had with this project was having patience while working with expo.io, an Apple phone, and a very slow, RAM-consuming Android emulator. What worked on iOS didn´t mean it was necessarily going to work on Android, and vice-versa, which meant endless double-checking on both systems, and me learning the true meaning of "patience is a virtue".