DEV Community

loading...
Cover image for A Chat Progressive Web App

A Chat Progressive Web App

aladinyo profile image aladinyo Updated on ・2 min read

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 (39)

pic
Editor guide
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
nefomemes profile image
Nefomemes

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

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

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

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