Hello everyone,
I made a chat progressive web application with React, NodeJS and firebase, it comes with a lot of features like push notifications.
Follow the link and search for my name "alaa" and chat with me.
The app is very well explained in the github repository.
Don't forget to ALLOW NOTIFICATIONS when you use the app.
WARNING: this app is just an open source project and it doesn't have the feature of deleting your account also you will sign in with your google account so use a fake one you are responsible of giving your data !!!!.
Link: https://whatsappy-app.web.app/ ALLOW NOTIFICATIONS !!!
the app may not run because free limits of firebase or hosting service has been exceeded!!
GitHub: https://github.com/aladinyo/WhatsappyApp
GIVE ME A STAAR ⭐⭐⭐!!!
Let's discuss the app in the comments.
Features of the app
- Messaging users in real time.
- You can text messages.
- You can send Images.
- You can send an audio message.
- You click on an image sent in a chat and it will smoothly animate to the center so you can see it.
- You can see if the user is typing or recording.
- You can record an audio and send it.
- You can delete the conversation.
- You can search for users.
- You can see the online status of users.
- You can see the unread messages.
- You will have a seen at the bottom if the user saw your message.
- You have an arrow button that allows you to scroll down the chat you also see the unread messages in it.
- The audio slider is grey when you send an audio message and is green when you receive one and becomes blue if the receiver plays the audio.
- The audio player allows you to see the full time of the audio and if you play it you will see the current time.
- You can receive notifications if a user sent you a message.
- A sound is played when you send a message or receive one in a conversation.
- Another sound is played if you receive a message from another user.
- The app works offline you can use it without internet and you can send text messages only when you come back online they will be automatically sent.
- Finally you can click on the arrow down button at the home page and the web app is installed in your device.
Latest comments (43)
Great job. Can you explain the database schemas as well? collection, document and such
What I need to put in index.html please tell @aladinyo
fast..........
Hi!
Good work. its so cool! May I know how did you implement the unread messages counter?
thanks!
Good output but dirty code , sorry
Also the code could be messy because the app was very complicated, a chat app is one of the difficult projects out there especially when it has a lot of feature.
Yes man I agree on that I wasn't too serious in this app but still managed to make a cool app it was just for fun and to get a freelance job.
thank you for checking the app.
Ok man but please be more careful in real world apps, think about architecture and project structure, cheers
Sure man I will.
You have to provide a “delete account” feature because to deployed and serve the app from your server. It is the law.
Being an open source project doesn’t prevent you to follow the rules and the laws.
If people had to download and deploy their own instance of the app to test it, the feature would be optional. But here it is your instance of the app. This means you get and store data from users so you have to allow deletion of this data from your servers.
Yes I understand what you mean but I didn't give any terms and conditions to agree on because you see when you use an app like whatsapp they give you this page and they tell you that you will give your data and you can delete it ...etc but here in my app I didn't do that so it's 100% your responsibility to use a fake account also the law doesn't say anything in this situation because there are no terms and conditions and I didn't promise you to do that and I told you it's an open source project and in the app when you sign in with google it also tells you that you will give your data and you already know it's just a demo of a project so you souldn't continue in the app.
I hope you understand me and thank you for pointing out this you can use a fake account and talk with me just search for "alaa".
Thank you so much.
Hey i wanted to ask how did you implemented the unread messages badge count was it on the firebase functions or u did that in the front end side ? i will be glad if u can explain that thank you :)
Also there is a snapshot listener to listen for this field when it changes.
yes of course I will,
In the backend each user has an unreadMessages field in each document in their chats collection and when you send a message to a user this field will be incremented and if the user sees the message it will become 0.
for testing i go with fake account... so its annoying to connect with my gmail account
yes its problematic even tho its an open project or anything... you shouldnt have use google authentication then. let us create fake users.... or delete your database periodically
Yes I understand what you mean but I didn't give any terms and conditions to agree on because you see when you use an app like whatsapp they give you this page and they tell you that you will give your data and you can delete it ...etc but here in my app I didn't do that so it's 100% your responsibility to use a fake account also the law doesn't say anything in this situation because there are no terms and conditions and I didn't promise you to do that and I told you it's an open source project and in the app when you sign in with google it also tells you that you will give your data and you already know it's just a demo of a project so you souldn't continue in the app.
I hope you understand me and thank you for pointing out this you can use a fake account and talk with me just search for "alaa".
Thank you so much.
Remember when signing up for non-official applications, your data could be at risk. If you chose to sign up for any projects outside of DEV, please do some research on the project before giving them access to your personal info.
I would advise everyone to be careful with this since security/privacy is clearly not a great concern right now.
A simple request to the Firebase project endpoint shows data is accessible publicly, which you may or may not be okay with. The users collection for example.
Not to mention the project service account key on the repo (?!)
I'm not trying to OP's work down but I thought that should be mentioned.
I felt a whole new experience...💯cool
That's amazing I'm glad you liked it
Some comments have been hidden by the post's author - find out more