yBlackBox

Overview

Planning

Styling Guide

Development

Challenges

logo
project screenshots

Project Overview


Objective

Using Angular, build the client-side for an application called myFlix based on its existing server-side code (REST API and database), with supporting documentation.

Github:

https://github.com/sms165/chat-app

Expo (live version):

https://expo.dev/@sms165
Username: tester
Password: password

Planning


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.


Style Guide


Color Palette

I used the colors given in the project brief.




Chat Color Option:

#090C08


Chat Color Option:

#474056


Chat Color Option:

#8A95A5


Chat Color Option:

#B9C6AE


Button Color:

#757083


Images



CareerFoundry:

Background Image provided by CareerFoundry



Development


Technologies Used

  • ReactNative:
    • Used to build cross platform mobile apps. Since React Native supports IOS and Android it saves time since the same code can be used for both.
  • Simulator
    • Android Studio
    • XCode
    • Expo
  • JSX
  • Library:
    • Gifted Chat
      • Used to implement different interface elements such as message bubbles, a message input field, a send button
  • APIs
    • asyncStorage API
      • Used to save the chat data offline on the users device, so that the user can view past chats even while being offline.
    • launchImageLibrary Async
      • Allows users to pick an image from their library
    • launchCameraAsync
      • Allows users to take a picture with their camera
  • Cloud Firestore
    • Database
    • Authentication

Challenges:


  • I faced difficulties while trying to test my App offline using expo.
    • After research online I found a solution that worked. I notated the solution for future reference in the README.md file on the github project directory.