Messenger is a React-based web application. The name of the application denotes that it's a messaging or chatting app. In this app, you can send messages or images to users with fast data transfer. This is made possible due to the Google-powered database system known as Firebase. It provides smooth authentication and much more. For more information, you can check the features section below.
-
Feature 1: Authentication
- First, you have to sign up by providing details that are asked there. Once you sign up, there's no need to log in again and again. Authentication is well handled by Firebase.
-
Feature 2: Add User to Chat List
- After signing up, you can see an "Add User" button. A search page will open, where you can search for any other user, be it your friend, family member, or any other person (make sure they are signed up too). After providing the email or username in the search bar, a list of users with relatable usernames will display. Click on 'Send Request' to send a request to the user. If they accept the request, they will be added to your chat list.
-
Feature 3: Request List Box
- If anyone sends you a friend request, a red dot will appear on the bell icon in the right corner of the page. Clicking on it will open the request list box, and all the requests will be shown. You can accept or reject the requests.
-
Feature 4: Chat with Users
- After accepting a request sent to you, click on the user's name and profile pic. The message box on the right will open, allowing you to start your conversation.
-
Feature 5: Change Profile
- On the top right, there is a 'Profile' button. Clicking on it will show your email details and your user id. There you can see a default profile picture, and by clicking on it, you can select an image from your gallery and set it as your profile picture.
- JavaScript
- React
- Frontend-tools: React-Redux, Redux-Toolkit, React Router Dom, Sass
- Backend & API: Firebase
-
Main Page:
-
Authentication Page:
-
Home Page:
-
Profile Page:
-
Add User Page:
-
Request Box Page:
-
Message Box:
This project is licensed under the MIT License.
If you want a reference, you can watch this video Farhan Farooq/Private chat app. (Added Redux Toolkit by referring to this video 6 Pack Programmer/redux_toolkit).
- [Pavan] - [[email protected]]
#React#ReactRedux#ReduxToolkit#Sass 🚀