Chatter-Box

React-Native | CSS | React-Navigation | Firestore | Expo | JavaScript | GiftedChat | JSDocs

See the app in action! | GitHub

chatter-box photo array

The Challenge

Let's say you are a person who loves to travel and share your adventures with family and friends. You want an application that allows you to send, take, and receive photos and GPS locations wherever you go! Perhaps throughout your travels, you find yourself in a region with spotty service. A friend you know in a village sent you directions, but you don't have a signal anywhere! Chatter-Box is here to lend a hand at this problem by providing a platform for sharing adventures with friends and family, all while providing access to your messages offline. For when your adventures take you a little further off-grid!

chatter-box
chatter-box

Tech Stack Explanation

I chose to use React-Native to complete this project because it was the ideal tool to create a hand-held chat application that you could use on the go and offline. I incorporated Expo into the project to access its wide variety of built-in APIs. The use of React-Navigation helps build the content of the pages, and Firestore is the backbone of the project, storing and sending user messages in real-time.

The Process

Chatter-Box was built with an emphasis on collaboration, and referring to project assets was of vital importance. The goal was to provide the client with a product as close to the original visual design as possible. Wireframes, user stories, and project assets drove the creation of this React-Native chat app. As the setup for this project was quite detailed and complex, highly detailed documentation and a README.md were created.

chat wireframes
chatter-box

Lessons Learned

This project was a fantastic lesson in patience and determination. When I began developing Chatter-Box, I was initially under the impression that it would be a very simple task to accomplish rapidly. I quickly found that rushing is never a solution in any situation. I found that when you rush, you sacrifice quality, and quality will win over quantity when it comes to user experience every day of the week. Learning how to navigate the world of React-Native was a task well worth taking on considering all the lessons learned.