Skip to content

An app that will provide users with a chat interface and options to share images and their location.

Notifications You must be signed in to change notification settings

ZachHuff01/chat-app

Repository files navigation

Objective

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.

Table Of Contents

The 5 Ws

Who

The users of the mobile chat app. These could be friends, family or other students on this course. Your codebase will be used by other developers working on the product.

What

A native chat app built with React Native, as well as all the relevant documentation.

When

Whenever users of your chat app want to communicate with each other.

Where

The app will be optimized for both Android and iOS devices. You will use Expo to develop the app and Google Firestore to store the chat messages.

Why

Mobile chat apps are among the most commonly downloaded and used apps in the world, so knowing how to build a chat app is an indispensable skill. The app will demonstrate your React Native development skills.

Screenshot_1708393312

Screenshot 2024-03-04 at 7 00 12 PM

Screenshot 2024-03-04 at 7 01 38 PM

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

Prerequisites

To run this Chat App, you need react-native, Expo Go and a mobile emulator.

Technologies

  • React
  • React-Native
  • GiftedChat
  • Firebase / Firestore
  • Linear-Gradient
  • Expo / Expo Go
  • NetInfo

Installation

  • Clone or download the repository to your local machine.
  • Install all dependencies
  • Run npm start or expo start
  • Find it on expo go.

Usage

  • After opening up the app, you will be greeted with the Start screen.
  • Choose a name that fits you best.
  • Choose the chatroom that interests you the most.
  • Click submit name and start chatting.
  • Send messages, make friends and share pictures!

Dependancies

  • "@expo/metro-runtime": "~3.1.3"
  • "@react-native-async-storage/async-storage": "1.21.0"
  • "@react-native-community/netinfo": "11.1.0"
  • "@react-navigation/native": "^6.1.9"
  • "@react-navigation/native-stack": "^6.9.17"
  • "expo": "~50.0.6"
  • "expo-status-bar": "~1.11.1"
  • "firebase": "^10.3.1"
  • "react": "18.2.0"
  • "react-dom": "18.2.0"
  • "react-native": "0.73.4"
  • "react-native-gifted-chat": "^2.4.0"
  • "react-native-safe-area-context": "4.8.2"
  • "react-native-screens": "~3.29.0"
  • "react-native-web": "~0.19.6"
  • "expo-location": "~16.5.3"
  • "expo-image-picker": "~14.7.1"
  • "react-native-maps": "1.10.0"