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?
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.
UI 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 with the React Native framework.
- The app must be developed using Expo.io.
- The app must be styled according to the given Figma 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 the code must be linted according to given requirements.
The Final Product
The source code is hosted on GitHub, a collaborative platform that supports version control and project management. You can access the source here.
Challenges Faced
This project marked my first venture into React Native, and it came with a steep learning curve. However, my solid background in React helped me adapt quickly to the framework and navigate its unique challenges. One of the biggest obstacles was maintaining patience while working with Expo, an iPhone, and a slow, RAM-intensive Android emulator. I discovered that functionality on iOS didn’t always translate smoothly to Android, and vice versa, requiring constant testing on both systems. In the process, I truly learned the meaning of 'patience is a virtue.'