Share your repls and programming experiences

← Back to all posts
Working Social Media Chatting App!
Muhammad_SJC (19)

Announcement

Latest new feature: the style of the app has been changed and a report button has been added.

If you now hover onto a user's name, a "Report User" button appears, but it does not work as of now. I am working on it!

P.S: Try deleting a message for a nice animation for all users seeing the message being deleted!

I recently made this chat app (and you might have seen that I am stuck in a problem with it in the "ask" section) and it works really well. It is real-time messaging with personalized "you" label on your messages. Also, if you want to delete one of your messages, hover onto your message and a "Delete" button will elegantly appear. Hope you like it!

P.S. I'm currently working on chat rooms, but for that, I need at least 70 upvotes, so please upvote! Also, the chatting app is fully responsive.

PLEASE do not change the "firebaseconfig" variable as it handles the database, and if you use it in another program, you will be reported for plagiarism from Google Firebase (So you cannot fork this repl). So, in short words, just don't worry about anything that has "firebase" in it.

Also, it only works in the repl engine, so trying to run it fullscreen on the web is sort of useless. And when you run it on repl, resize the results area to capture as much screen as possible.

Or you can go to my account and check it out in a bigger screen (but only after you upvote this post!). Also, you can click the "open" button in the repl widget that comes with this post.

(See additional messages in the chat app itself)

Thank you :)

Commentshotnewtop
AgastyaSandhuja (154)

nice css but chatbox needs to be cleared on send. Also, I can't enter it on a new tab only on the replit site
overall i really like it. Keep up this amazing work ur rlly good!

Muhammad_SJC (19)

@AgastyaSandhuja I meant that open repl.it in a new tab, and then run it on both tabs ON repl.it

Muhammad_SJC (19)

@AgastyaSandhuja And I wi make the text box clear after sending a text.

Muhammad_SJC (19)

@AgastyaSandhuja All done! Now the text box clears after sending message!

Leroy01010 (243)

Epic!!

This is to cool!!

Muhammad_SJC (19)

@Leroy01010 I will add a feature where you can mention people using @, thanks for the suggestion!

SlappableFace (0)

Could you please make a tutorial, I would like to use one of these so i can chat with my friends during school. My school has blocked all the sites we are allowed to use to chat.

Muhammad_SJC (19)

@SlappableFace yeah sure! But the tutorial is going to be LONG, so I found this youtube video that shows the most basic form of my app. Here is the video: https://youtu.be/CK2XEyVGc6c

It shows a nice app at the start, in the demo app, but the tutorial he shows you is just the most basic form of the app. So you have to style the app for your self. But even this most basic form works like magic. You need to have Firebase realtime database connected. I don't know if he shows you how to cennect to firebase database, so watch other tutorials as well.

Don't forget to upvote!

SlappableFace (0)

@Muhammad_SJC Thank you! This is perfect!

Muhammad_SJC (19)

Hope you like the new font size update!

DynamicSquid (3551)

Wow! This is awesome! I really like the CSS!

Muhammad_SJC (19)

@DynamicSquid Thanks for the upvote, it keeps me motivated!