ilsegaertner/chat-app

A mobile chat app built in React Native. Users can interact in real-time, share images, videos as well as their geolocation

Chat App

Objective

The objective was to build a chat app for mobile devices with React Native.
The app will provide users with a chat interface and options to share images and their location from a phone as well as the Android Simulator.

_{Chat App Screenshot gif}

Features

• Select the background of the chat(four colors to choose)
• Sign-in and anonymous authentication with a username
• Sending/receiving messages in real-time
• images/location sharing
• Offline viewing of cashed messages

Technologies used

• React Native
• Expo
• Google Firebase and Storage
• AsyncStorage cashing for offline usage
• Gifted Chat Library

Directions for setting up the environment

• Install Node JS on your device
• In the terminal: Install Expo globally: npm install -g expo-cli
• Sign up for an Expo Account to be able to run the app on your device
• Clone this repository
• Navigate to the folder and run npm install
• Use your own Firebase configuration code:
  • Sign in at Google Firebase
  • Create a Project (uncheck Enable Google Analytics for this project)
  • Create Database in Firestore Database (choose a close region from the dropdown, and Start in production mode)
  • Change allow read, write: if false; to allow read, write, if true; in Rules tab
  • Register app(</>) in Project Overview
  • Now, follow the provided directions of adding Firebase SDK:
    • Install firebase: npm install firebase
    • Initialize firebase: Copy and paste the provided Firebase configuration and change them in the App.js of the downloaded repository
• Download Android Studio(Win) or iOS Simulator/XCode(Mac)
• Run expo start in the terminal. Follow the instruction to access the app via the iOS Simulator/Android Emulator

Screenshots