The React Native Chat App is a mobile application that allows users to connect, chat, and interact with each other. It offers a user-friendly interface with features such as registration, profile picture uploads, friend requests, and real-time chat capabilities.
- Users can create an account by providing their information, including username, email, and password.
- The registration process also allows users to upload a profile picture using a photo URL.
- Users can log in to their accounts using their registered email and password.
- The home page displays a list of all registered members.
- Users can send friend requests to other members and accept or decline incoming requests.
- Once two users become friends, they can engage in real-time chat conversations.
- The home chat page displays all ongoing conversations with the last message received and a brief preview with time it received or sent.
- Within individual chat conversations, users can exchange text messages with real-time updates.
- The chat supports text, images, and emojis.
- Users have the ability to delete messages.
- Message editing functionality is under development.
Before you begin, make sure you have the following prerequisites installed on your development environment:
- Node.js
- Expo CLI
- Yarn
- MongoDB Atlas account
- Expo Go installed on your mobile device
- Use any method to clone the repo from my GitHub account. if you don't know to clone it, simply download the code as zip file and unzip it.
- Open 2 terminals in your code editor.First One is for frontend and other is for backend
- adding dependencies to Frontend :-
cd projectlocationnpx install-expo-modules@latestnpx expo startnpm install corsyarn add react-native react-native-screens react-native-safe-area-context react-native-emoji-selector jsonwebtoken jwt-decodeyarn add @react-navigation/nativeyarn add @react-navigation/native-stacknpx expo install @react-native-async-storage/async-storagenpx expo install react-native-screens react-native-safe-area-context expo-image-picker- adding dependencies to Backend :-
cd projectlocation => cd apiyarn add express cors body-parser mongoose multer nodemon passport passport-local jsonwebtoken jwt-decode axios
This guide will walk you through the steps to set up a MongoDB Atlas account and create a cluster for remote database access. MongoDB Atlas is a cloud-based database service that allows you to easily manage MongoDB databases.
- Create a MongoDB Atlas Account
- Log in to Your MongoDB Atlas Account
- Create a New Project
- Build a Cluster
- Network Access
- Database Access
- Review & Deploy
- Wait for Cluster Creation
- Connect to Your Cluster
- Start Using Your Remote Database
- Go to the MongoDB Atlas website: MongoDB Atlas.
- Click the "Get started free" button.
- Follow the registration process to create an account.
Use the credentials you just created to log in to your MongoDB Atlas account.
After logging in, you will be prompted to create a new project. Projects help you organize your clusters and resources.
- In your project, click "Build a Cluster" to create a new cluster.
- Configure your cluster by providing the following details:
- Cluster Name: Choose a name for your cluster.
- Cluster Tier: Select the cluster size (e.g., M0, M2, M10). The free M0 tier is suitable for testing and small projects.
- Cloud Provider & Region: Choose a cloud provider (e.g., AWS, Azure, Google Cloud) and region where your cluster will be hosted.
- Additional Settings: Customize options like backups, automated scaling, and the version of MongoDB.
- Under the Security section, configure your network access.
- Whitelist your IP address or choose to allow access from anywhere (not recommended for production).
- You can also configure IP Whitelist entries to include multiple IP addresses or CIDR ranges if needed.
- Under the Security section, create a database user and set a secure password.
- Assign appropriate permissions to the user based on your application's requirements.
- Review your cluster configuration, including the cluster name, size, region, and security settings.
- Click the "Create Cluster" button to deploy your cluster.
It may take a few minutes to create your cluster. You can monitor the progress on the MongoDB Atlas dashboard.
Once your cluster is created, you'll be able to connect to it. MongoDB Atlas provides a connection string that you can use in your application code. You can also download drivers and connect using a MongoDB client.
Update your application's database connection settings with the connection string provided by MongoDB Atlas. Your remote MongoDB database is now ready to use!
Remember to configure your application to use the provided connection string and the credentials you created. Additionally, MongoDB Atlas offers many features for monitoring, scaling, and managing your database, so be sure to explore the dashboard for more options as you develop your project.
- open the new terminal in vs code and go to you project directory
cd your_project_locationhit entercd apiand hit enter again- now, youre ready to start your project backend part🚀😼
yarn starthit enter and boom- if you see below img you're done doing everything.real chad 😎
- if you do it everything correctly you have to execute one command only in here
- open the new terminal and go to you project directory
cd C:\ReactNativeApps\chatapp| This is my directory for reference.npx expo startnow you're ready to start app on your device
Here are some screenshots that showcase the functionality of the React Native Chat App:
- Registration and Login Page
.... 
- Home Page
- Chat Page and all Chats Page
.... 
- Same Chat page for 2 users side by side view
....
- Friend Request page
I am welcome contributions to improve and expand this project. Feel free to submit pull requests, report issues, or suggest enhancements.
Your support and feedback are highly valued, so if you find this project useful, consider giving it a star ⭐️. I appreciate your interest in my work.
This project is licensed under the MIT License - see the LICENSE file for details.