Skip to content

yudish12/Chatapp-React-Native-

Repository files navigation

Chat App using React Native and Nodejs

Motivation

By building this app I wanted to learn how to learn how I can use socket io library in react native and
how to integrate express.js backend in my app also how to send images in chat

Description

In this project I have built a Chat App using react native expo cli and also created real time message sending functionality using nodejs and socket.io library.

Features

  1. Real Time message sending using socket io
  2. image sending in chats using expo image picker
  3. Authentication both login and register with protected routes using react navigation
  4. Profile Photo Upload
  5. Add Friends functionality you must be friends on app to chat with each other

How to Install and Run the Project

1)Clone repo into your vscode and first go to root and enter npm install
then go to /Api directory and again type npm install

    npm install
    cd /Api
    npm install 

Start Backend Server

  1. First Create your database on mongodb and get your connection url you can refer these urls one by one for it link for it https://www.mongodb.com/basics/create-database

https://www.mongodb.com/basics/mongodb-connection-string#:~:text=How%20to%20get%20your%20MongoDB,connection%20string%20for%20your%20cluster.

  1. Now create your cloudinary account and get api key,cloud name,secret key

  2. Now create a .env file in /Api directory and add these fields

      | Variable     | Description                        |
      |---------------------------------------------------|
      | MONGO_URI    | connection string of database      |
      | JWT_SECRET   | secret key for jsonwebtoken        |
      | CLOUD_NAME   | cloudinary cloud name              |  
      | API_KEY      | api key for cloudinary             |
      | API_SECRET   | api secret for cloudinary          |
    
  3. now type this command to start backend server

    node index.js
    

Start Mobile App

  1. Install Expo go app on your mobile

  2. In root directory run this command in terminal

npm start
  1. Now you will see a scanner scan that qr code using expo go app for android and for ios scan using camera app

  2. Now you will be able to see the app in expo go and start using it

Project Videos

FYI I have entered password its a feature of ios that it does not show textinputs of type password in recordings

IMG_0.mp4

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published