DEV Community

Cover image for A Chat Progressive Web App
aladinyo
aladinyo

Posted on • Updated on

A Chat Progressive Web App

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.

Discussion (43)

Collapse
williamhenderson profile image
William Henderson

Can we get a "delete account" feature? I made an account to have a look, it's really cool, but I'd like to remove my account now. I sent you a message on it

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
pstark profile image
Simon

"with firebase you can set security rules for specific documents and collections in the backend"

This is absolutely NOT what encryption is. This is access control.

Thread Thread
aladinyo profile image
aladinyo Author

I didn't say it's encrypted but access is limited which means no one can see your chats or messages

Collapse
nefofortressia profile image
Nefo Fortressia

Hey, users must have an option to delete their. It's written in EU's GDPR man.

Thread Thread
aladinyo profile image
aladinyo Author

this is an opane source project it's not an official app !!!

Thread Thread
nefofortressia profile image
Info Comment hidden by post author - thread only accessible via permalink
Nefo Fortressia

Yeah but you still must do that. Regulation doesn't care about whether an app is open source or not.

Collapse
williamhenderson profile image
William Henderson

How are you doing the encryption?

Thread Thread
aladinyo profile image
aladinyo Author

with firebase you can set security rules for specific documents and collections in the backend.

Thread Thread
williamhenderson profile image
Info Comment hidden by post author - thread only accessible via permalink
William Henderson

I would still like you to delete my account please

Collapse
aladinyo profile image
aladinyo Author

Hey man I'm really sorry for treating like that I didn't understand you my apologies !!!
I didn't understand that my database was exposed and also the service account was exposed on GitHub.
I had an 'allow read' at the top of my firebase rules it was for testing and I forgot to delete it but now I fixed it and also I revoked the old service account and made a new one.
For deleting the account I just got lazy to do it and I have exams these weeks but I put a warning on GitHub and on this post for people to not use a fake google account.
MAN thank you so much and I hope you accept my apologies.

Collapse
theadp profile image
theadp

whqt to add on index.html please help i am a newbie

Collapse
itscasey profile image
Info Comment hidden by post author - thread only accessible via permalink
Casey 💎

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.

Collapse
gochev profile image
Nayden Gochev

You are aware that because you provide your app also in EU you have to keep all electronic messages for 3 years, this is the law to provide such service in EU :)

Collapse
aladinyo profile image
aladinyo Author

this is just an open source project and the messages can stay in the backend for three years no problem.
thank you for checking the post and please don't forget to put a star on github.

Collapse
gochev profile image
Nayden Gochev

yeah just wanted to tell you to not shut it down just in case to keep the messages in case of a legal check ;) good just in any case

Thread Thread
aladinyo profile image
aladinyo Author

Ok man thank you so much for the advice I appreciate it.

Collapse
polaroidkidd profile image
Daniel Einars

What!?!? Since when??

Collapse
gochev profile image
Nayden Gochev

since a long time ago :) no idea but many years

Collapse
aladinyo profile image
aladinyo Author

it's just an open source project I don't understand why they have a problem for that, they left the app and started focusing on this particular thing

Thread Thread
gochev profile image
Nayden Gochev

it's public it can be used even as example so it should comply

Thread Thread
aladinyo profile image
aladinyo Author

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.

Collapse
williamhenderson profile image
Info Comment hidden by post author - thread only accessible via permalink
William Henderson

I'd like to warn the users of this app about security issues and its failure to comply with GDPR before they sign up. More information can be found in this issue: github.com/aladinyo/WhatsappyApp/i...

Collapse
pstark profile image
Info Comment hidden by post author - thread only accessible via permalink
Simon

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.

Collapse
stunaz profile image
stunaz

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

Collapse
aladinyo profile image
aladinyo Author

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.

Collapse
mindsers profile image
Nathanaël CHERRIER

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.

Collapse
aladinyo profile image
aladinyo Author

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.

Collapse
stajilov profile image
Vladimir Stajilov

Good output but dirty code , sorry

Collapse
aladinyo profile image
aladinyo Author

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.

Collapse
aladinyo profile image
aladinyo Author

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.

Collapse
stajilov profile image
Vladimir Stajilov

Ok man but please be more careful in real world apps, think about architecture and project structure, cheers

Thread Thread
aladinyo profile image
aladinyo Author

Sure man I will.

Collapse
holischitz profile image
HoLiSchitz

Awesome!!! Great job. Keep up the good work.

Collapse
aladinyo profile image
aladinyo Author

thank you so much

Collapse
aditbharadwaj profile image
Adit Bharadwaj • Edited on

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 :)

Collapse
aladinyo profile image
aladinyo Author

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.

Collapse
aladinyo profile image
aladinyo Author

Also there is a snapshot listener to listen for this field when it changes.

Collapse
fe99lo profile image
Felix Onkangi

I felt a whole new experience...💯cool

Collapse
aladinyo profile image
aladinyo Author

That's amazing I'm glad you liked it

Collapse
malitutuncu profile image
Muhammet Ali Tütüncü

Great job. Can you explain the database schemas as well? collection, document and such

Collapse
jollyjunkaih profile image
jollyjunkaih

Hi!
Good work. its so cool! May I know how did you implement the unread messages counter?

thanks!

Collapse
theadp profile image
theadp

What I need to put in index.html please tell @aladinyo
fast..........

Some comments have been hidden by the post's author - find out more