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
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.
- Real Time message sending using socket io
- image sending in chats using expo image picker
- Authentication both login and register with protected routes using react navigation
- Profile Photo Upload
- Add Friends functionality you must be friends on app to chat with each other
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
- 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
-
Now create your cloudinary account and get api key,cloud name,secret key
-
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 |
-
now type this command to start backend server
node index.js
-
Install Expo go app on your mobile
-
In root directory run this command in terminal
npm start
-
Now you will see a scanner scan that qr code using expo go app for android and for ios scan using camera app
-
Now you will be able to see the app in expo go and start using it
FYI I have entered password its a feature of ios that it does not show textinputs of type password in recordings