Giter Club home page Giter Club logo

chat-app's Introduction

React Native Chat app

It is a chat app for mobile devices made with React Native. The app provides users with a chat interface and options to share images and their location.

Chat Home

Chat Screen

Features

User Stories

  1. 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.
  2. As a user, I want to be able to send messages to my friends and family members to exchange the latest news.
  3. As a user, I want to send images to my friends to show them what I’m currently doing.
  4. As a user, I want to share my location with my friends to show them where I am.
  5. As a user, I want to be able to read my messages offline so I can reread conversations at any time.
  6. 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

  1. A page where users can enter their name and choose a background color for the chat screen before joining the chat.
  2. A page displaying the conversation, as well as an input field and submit button.
  3. The chat must provide users with two additional communication features: sending images and location data.
  4. Data gets stored online and offline.

Technical Requirements

  1. The app must be written in React Native.
  2. The app must be developed using Expo.
  3. The app must be styled according to the given screen design.
  4. Chat conversations must be stored in Google Firestore Database.
  5. The app must authenticate users anonymously via Google Firebase authentication.
  6. Chat conversations must be stored locally.
  7. The app must let users pick and send images from the phone’s image library.
  8. The app must let users take pictures with the device’s camera app, and send them.
  9. The app must store images in Firebase Cloud Storage.
  10. The app must be able to read the user’s location data.
  11. Location data must be sent via the chat in a map view.
  12. The chat interface and functionality must be created using the Gifted Chat library.
  13. The app’s codebase must contain comments.

Tech Stack

  1. React Native
  2. React Navigation
  3. Gifted Chat
  4. Expo
  5. Google Firebase

Database configuration

This app uses Firebase firstore as database and firebase storage as object store to keep media related stuffs. Messages are stored in messages collection of firestore and images are stored in images folder of firebase storage.

When you run this app with your firestore, you will need to setup messages collection and images folder in your firestore and firebase storage respectively.

How to use the app

This app is not published to AppStore or PlayStore. In order to use this app, Please follow the steps mentioned below.

  1. Clone the repository.
  2. Run the command $ npm install to install all the required depedencies.
  3. Install Android studio or Xcode to run the Android Phone and I Phone simulators.
  4. Download and configure the simulators as per your requirments.
  5. Once the simulators is up and running, you could start the expo server by running the command $ npm start
  6. This will start expo server and it will be available at http://localhost:19002/. Open this link in your browser.
  7. Now you will see options to run the app on a IOS simulator or on an Android simulator using expo. Click on the inteded option and enjoy the app.

chat-app's People

Contributors

sonam-22 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.