How to MAKE and PUBLISH a Chat website with Firebase using HTML & JavaScript

[@reedgraff2465]

I don't think you know how many headaches you have saved me from succumbing to... Thank you, father.

[@MelvinAdekanye]

Really! You're welcome. Glad I could help.

[@MaxProgramming]

Ohh! Firebase chat app! Seems interesting. Let's see. Thanks for the tutorial!

[@MelvinAdekanye]

You know it. No worries

[@yadurajsharma1305]

Thanks, man. You out here saving life love you

[@MelvinAdekanye]

You're very welcome. Glad I could help.

[@SURAJ-sz8ej]

AGREE.

[@Salty0214]

DAMN NOW THIS IS A CLEAR UNDERSTANDING EXPLAINATION!

[@cyber_steve]

Hey Rhymbil, this is a very good tutorial. But I’m having a glitch where the send button sometimes doesn’t appear. Can you help me with that?

[@cyber_steve]

Never mind, I found the issue, simply create your own font awesome kit and replace it with the default one. Then just use new icons in the join on send buttons. I’ve now did some css and created an actually chat pwa!

[@prathyusha6619]

hey how to fix that?

[@The-Ferret-Man]

@@prathyusha6619 *TO MAKE THE SEND BUTTON WORK, DELETE THE LINES OF CSS THAT SAY color: Transparent; IN THE TWO CHAT INPUT SEND SECTIONS IN INDEX.CSS*

[@MallyFemboy]

wass up!! nice vid btw keep it up

[@MallyFemboy]

Lol

[@MallyFemboy]

Has nothing to do with anything and your just bots lol

[@muslim7660]

It's so very good! Thank you for this one!

[@MelvinAdekanye]

Glad you like it!

[@ecodersofficial]

Dear Rhym, I wants you make a tutorial that shows how to make a screen recorder with no any other offline applications only on web with HTML and CSS and JS!

[@MelvinAdekanye]

Woah. I like the challenge. I'll figure it out and I'll let you know.

[@ecodersofficial]

@@MelvinAdekanye Okay! pls make

[@yashkapure8511]

You can use python for that, it's easy

[@ecodersofficial]

@@yashkapure8511 Yeah! But I didn't know much in python....I'll try but can't - I didn't know How to Make Database with python...

[@yashkapure8511]

@@ecodersofficial your question was how to make a screen recorder right? Then there is no need of DB for that just have to pass the path where you have to save the record video I have already done that

[@KateeteDavidBenjamin]

How do you get a website to creat a separate conversation screen for each user 🤔

[@amlansahoo07]

You made it super easy mann !!!!

[@MelvinAdekanye]

Glad it helped!

[@mahdibrl4236]

Thank you. I love your content and follow you from Algeria. Whenever you think of leaving KZbin, remember that there are those who follow you with love

[@MelvinAdekanye]

That's awesome! Thank you.

[@SURAJ-sz8ej]

Thanks big guy I have literally roamed here and there searching for a firebase chat app and I was wondering here and there since 3 days finally got a running project that was a great help THANKS.

[@MelvinAdekanye]

That's awesome to hear.

[@aryanKapur.]

this is amazing! I wanted to see this for myself so I copied the code and checked it out, and was far beyond my expectations.

[@MelvinAdekanye]

Wow. Thank you!

[@saipranav434]

bro did u created website

[@aryanKapur.]

@@saipranav434 yes

[@GhostyGoobers]

the js file isnt there edit never mind i had to click on the link in your profile and its there now thank u so much

[@ShivanshPlays1]

Thx for the tutorial, by the way can i use github?

[@MelvinAdekanye]

You're very welcome. And for sure. You can upload the code to github

[@ShivanshPlays1]

@@MelvinAdekanye oh thanks bro!

[@moza7137]

my web page is still empty not showing any of the css properties could someone pls tell me what the problem is?

[@Traveller2169]

did you link the html file to css?

[@GraysonWoodr]

Now I can bypass my school blocking discord. And Hangouts. And every other chat app.

[@MelvinAdekanye]

Hahaha. Modern problems require modern solutions. We're living in 2021. You're in 4021.

[@ST3W1010]

Same reason I’m using this

[@rednixch]

Same reason I’m using this

[@kaangoktan8536]

Hey Rymbil, your tutorial was so good, thanks. I would appreciate it if you made a part 2 where you showed us how to upload files, a live user counter, and the time the message was sent

[@MelvinAdekanye]

For sure. that's an awesome idea. Look forward to it.

[@idontknowwhattouseasanusername]

@@MelvinAdekanye I would also add another suggestion. The DB only stays up for 30 days. I would like you to show how to actually make it permanent. Thanks

[@ihackedpiggy3212]

:O he did it im piggydoe btw if u remember me :D

[@MelvinAdekanye]

You know it. I sure do! Let me know what you think of the video.

[@ihackedpiggy3212]

@@MelvinAdekanye for sure

[@johnpaulchristiancondicion3148]

Hey sir rhymbil i love your tutorial. I have my school project and im gonna use this like a part of a .0chatting section. Is there a way to change the big memechat 2.0 int the title and how? thanks i dont mean it to plagiarize ur work. im sorry if its like that but i rly need so need reply asap pls

[@MelvinAdekanye]

Yes, of course. No worries. In the create_title function. You'll be able to change the title

[@72kundanpatil89]

Thanks bro 😆😆😘

[@RohandattaMokirala]

Can others chat with each other without you using this site? Thanks for the Tutorial!

[@MoriyaSuwakoFumo]

awesome video! also for some reason the send button does not appear can you make a video on customizing the frontend? thanks

[@marksmoth46]

to make the button appear you just need to sign up to frontawesome and they'll give you a real URL that you can replace the old one with

[@The-Ferret-Man]

*TO MAKE THE SEND BUTTON WORK, DELETE THE LINES OF CSS THAT SAY color: Transparent; IN THE TWO CHAT INPUT SEND SECTIONS IN INDEX.CSS*

[@Skys111]

Really good, but I just started with coding, How to do the {} Colapse Part?

[@babyman177]

i know this was a while ago. but on the left side of the code, youll see a little arrow at the start of the funtion. press it to collapse the function.

[@yaseenirfan8577]

Its really good 👍🏻 thanks for this vedio 😇😍

[@MelvinAdekanye]

Most welcome 😊

[@lordkratos9389]

hello brother...Love from india.....this video help me alot....bro can you pls tell me how to add a button in same page in which when we click on that button the chat that are stored in db gets clear...plz...reply soon...

[@MelvinAdekanye]

For sure! Start by creating a button. Then whenever it's clicked, call an on-click function that runs this command: firebase.database().ref("chats").remove()

[@airdrophunter9968]

is this work when there is no internet but have connected local LAN??

[@lunarspect]

Password system for this?

[@saipranav434]

my java script is not adding to the site please help me what to do sir can you tell me what to do

[@akeditexe]

u r a legend bro thanks

[@achievementtop]

Very cool but why do you don´t use github to share the code?

[@mamba6886]

really appreciated!!! A great tutorial with well documentation and explanation!

[@vehinvelateker8078]

Thanks for everything bro . I am grateful for this video.

[@MelvinAdekanye]

You're very welcome!!

[@mallugamingkingzzz4272]

Thank you so much, but i have a small doubt so in order to add image in the chat how do i do ? like images, gifs, videos etc...

[@mallugamingkingzzz4272]

even preloaded emoji's

[@MelvinAdekanye]

You're most welcome. To add images and others. You would have to save the images to a storage database ( a cool function with Firebase ) and then it becomes a matter of sourcing the link into an img, video, and etc.

[@ZENITHXDRUGS1]

@@MelvinAdekanye is this firebase database free forever or like after 30 days its not free

[@lirree4025]

I dont understand how I get all files running at the same time cuz i just start the html file but my website is just white

[@zxwar1111]

I had the same problem at first I clicked inspect and it said there was an error

[@lirree4025]

@@zxwar1111 Did you fix it?

[@MelvinAdekanye]

Do you have your tag referenced in your HTML? Or are you getting an error in the console (inspect element)

[@lirree4025]

@@MelvinAdekanye this is the error in the console i get: a076d05399.js:1 Failed to load resource: the server responded with a status of 403 () index.js:12 Uncaught ReferenceError: initializeApp is not defined at window.onload (index.js:12)

[@Nedroh]

@@lirree4025 same

[@aryandongale3370]

HELPED A LOT !!!!!!!!!!!!!!

[@makeitathome1327]

Hello ok so Im a bit confused abt this. Where can I find the gstatic firebase app reference for my project? Or is it already added in the source code

[@MelvinAdekanye]

The HTML gstatic reference should be in the source code.

[@DeltaAlpha00]

So I made the app and it worked! But a few days ago I got a notification from Firebase saying that I need to update the rules since the test mode rules are insecure. Idk much about Firebase rules so what do I do?

[@MelvinAdekanye]

I get those too. Normally, they'd like you to use Firebase Auth along with their database. But it's quite unnecessary. But there are ways to turn off such Firebase notifications.

[@hetvigandhi6705]

I am not getting the option of logout HELP PLIS

[@Snozzie]

Hey Rhymbil, I've seen that you've recieved this same comment before, but it seems that every time I try to go to the site I'm met with a blank page. The console error is "Failed to load resource: the server responded with a status of 404 ()". I checked multiple times to make sure I had typed everything in correctly, but I can't find any issues on my end. One thing I've noticed, however, is that instead of "var" when I copy the firebase configuration, I get "const". Could this be impacting anything? Thanks.

[@MelvinAdekanye]

Oh no not at all. But I do wonder. Do you get the "Failed to load resource .." on my memechat website? Or yours?

[@Snozzie]

@@MelvinAdekanye on my website, yours works fine

[@NhadiBabi]

I’ve ran into this problem also (for my chat)

[@babyman177]

@@MelvinAdekanye i see this was a year ago. Have you solved the issue? if so could you tell me what to do because im struggling with the same thing.

[@hariswami5356]

I have a problem. I want to add text and pictures in bottom of website. But it always take it to top. What i do?

[@FnexGaming]

The send button is not visible

[@rednixch]

Hey RhymBil, I wanted to ask you if its possible to optimise it a bit? like load a small portion of messages instead of everything? If so, could you please give me a hint on how I can do that?

[@jamesbuckybarnes9290]

does the website even work for u?

[@rednixch]

@@jamesbuckybarnes9290 Yeap, I can help you if you want.

[@MelvinAdekanye]

Yes, that would be great idea. My memechat has been stuck loading - there are so many messages. Here's what I would try, only load 10 messages at a time but when the user scrolls up, it loads more as they scroll.

[@jamesbuckybarnes9290]

@@MelvinAdekanye yes do it please any idea till when will u release it?

[@MelvinAdekanye]

@@jamesbuckybarnes9290 memechat 3.0.?!? 😊😊

[@BrainyAndroidTips]

Can I make this I'm android mobile

[@rahulking4796]

Hi rhymbilyt i have an error Nothing is coming except a blank page even I have linked the CSS and js plz help me

[@rednixch]

make sure the security of your firebase db is set to "true"

[@rahulking4796]

hi it is been struck loading what to do

[@challengeforgift3367]

could you please tell me how to reverse the order of messages like latest messages are displayed at top

[@znnviolord5881]

It works like charm!!!

[@MelvinAdekanye]

I'm glad it does!

[@GooberGamingTV]

Amazing tutorial, but the send button is invisible. Is there a way to fix this issue?

[@Nathan-tp2oz]

experience the same thing Did you fix it?

[@The-Ferret-Man]

@@Nathan-tp2oz *TO MAKE THE SEND BUTTON WORK, DELETE THE LINES OF CSS THAT SAY color: Transparent; IN THE TWO CHAT INPUT SEND SECTIONS IN INDEX.CSS*

[@makeitathome1327]

Hey why does it sometimes not show the send arrow

[@MelvinAdekanye]

It has to do with the font awesome reference we're using.

[@makeitathome1327]

@@MelvinAdekanye Wait plss how do i fix it

[@anonymoussaif7361]

Just amazing🤩

[@makeitathome1327]

CAN SOMEONE PLS HELP ME. I KNOW WHY MY CHAT ISN'T WORKING, BUT I DONT KNOW HOW TO FIX IT. Ok so i checked the inspect element of my page, and all thats there is my folder, and inside the folder is the html file. However, the file is empty. Normally, I think the js, css, and the html files that I wrote in Atom should be in the code of the chat app, but it isn't. Can some tell me how to add them???????

[@makeitathome1327]

WAIT NVM I FIXED IT. All I had to do is save the files for the js, the css, and the html files in Atom and it worked.

[@MelvinAdekanye]

That's great!

[@kisho2679]

how could this chat platform be integrated/embedded in an already existing own website?

[@impulseninja7359]

That's the best and easiest chat to make! Can you make a censoring system(it censors curse words and etc ,if it it possible.

[@MelvinAdekanye]

Yes you can. Right before a user sends a message. You can do an if statement to check if a word in their message matches a "bad word" in an array.

[@impulseninja7359]

@@MelvinAdekanye thank you very much :)

[@AfrinFoodVlog669]

I think you should hide your private details like firebase config because there are many bad guys that can exploit this thing. -shisirkhan

[@miguelarranzmoreno3187]

Hey! I have a project in my country in wich we help elderly people that are feeling alone with an initiative, me and my friends though about making a chat room but we know very litle about programming this type of stuff... is it cool if we use this code?

[@MelvinAdekanye]

Wow that's awesome! Yes for sure. Feel free to use or edit the code.

[@aIex_yz]

rhymbil, this no longer works so could you make an updated video? much appreciated

[@MelvinAdekanye]

For sure. There are so many cool videos to come.

[@_colorful2620]

I have the firebase working, I can see the texts being stored. But I don't have the css loaded why?

[@MelvinAdekanye]

Do you have your style sheet linked in your HTML file? If so, is your index.css file in the same folder as your HTML file?

[@enderman8275]

One question can I separate this into different component and then create it using React?? Thanks

[@MelvinAdekanye]

Yes you certainly can.

[@officialerenince]

How can i block someone at my chat app? i meant, when someone idk a guy join i have to eject him. How can i do this?

[@MelvinAdekanye]

The username. You can ban them based on their username. Most likely this wouldn't work since they can change it. I would suggest you do an IP ban. So when a user joins the chat. Grab their IP and when they get out of line. Stop messages from being shared by that IP. The only way this wouldn't work is if they use a VPN. But most people wouldn't.

[@Gajenzask]

I have question. Upon clicking join, it doesn't show the chat box unless I refresh the page.

[@rednixch]

Did you have any errors in your console? Right click, then click inspect, then look for the console tab.

[@BlueMech]

soo now can you help me convert it into an android app?

[@derhans8338]

Where can I find the written masages? Thx 🙂

[@MelvinAdekanye]

In your Firebase database realtime section.

[@Dmsapl]

hello! I find your video absolutely amazing, easy, simple to follow, but, I have one slight problem, I wished that I would be able to press the enter key to send the message, can you please help with that? it will mean much to me, and thank you in advance!

[@MelvinAdekanye]

Thank you! // Get the input field var chat_input= document.getElementById("chat_input"); // Execute a function when the user releases a key on the keyboard chat_input.addEventListener("keyup", function(event) { // Number 13 is the "Enter" key on the keyboard if (event.keyCode === 13) { // Cancel the default action, if needed event.preventDefault(); // Trigger the button element with a click document.getElementById("chat_input_send").click(); } }); Put that somewhere. And this should do the trick

[@Dmsapl]

@@MelvinAdekanye Thank you so much, you should probably do memechat 3.0 were you add this feature and others like, sending photos and stuff, and I will be more than happy to help you with it, if you want, contact me on discord, Dmsapl#1065

[@DonutXweb]

@@MelvinAdekanye Where do I put it?

[@makeitathome1327]

@@Dmsapl Where did you put that code in. Java script? Css? Where?

[@rednixch]

@@DonutXweb *add* *this* *code (in index.js) :* chat_input.setAttribute('onkeydown', "if (event.keyCode == 13) document.getElementById('chat_input_send').click()") *just* *after* *this* *line* *:* var chat_input = document.createElement('input')

[@panipatgaming1387]

I am having a problem i saw ur who video very helpful btw But problem is when i launched website it wasnt working then i directly hosted on gitub pages Now website turns on but the loading bar is on loop

[@srivetrikumaransenthilnayagam]

okkk check if there are any problems in the console

[@makeitathome1327]

k wait i keep on getting this error message "Failed to load resource: the server responded with a status of 403 ()" in the inspect element, and i can't send messages anymore. How do I fix this?

[@MelvinAdekanye]

Sure. Email me.

[@Crypt2349]

Thanks a lot for this but could you make one with audio chat too

[@MelvinAdekanye]

You're welcome. Yes for sure. Definitely a step up from a text based chat.

[@shivanshpandey5422]

Thank You very much man

[@MelvinAdekanye]

You're welcome!

[@WSH3TM]

"Math Homework. Definitely" LMAO

[@amlansahoo07]

Is there a way we could share image or GIF content in the chat ?

[@MelvinAdekanye]

Yes for sure. Firebase has a great feature for saving images/gifs. So yes. Memechat 3.0 will be a thing in the coming weeks.

[@Gadgets101]

Please i did everything correctly but how do I view it on my local Host when I tried it just showed me a blank space I'm using ksweb as my local Host on Android please reply

[@MelvinAdekanye]

Oh. You don't need localhost. It's a simple HTML and JS file.

[@Gadgets101]

Ok

[@ecodersofficial]

Maybe you should make a tutorial on Next.js with this? P.s. I'm now experienced programmer, sorry for the grammar etc in the below comment 💀 (let me try to make this thing in tailwindCSS and next.js I can do it I think)

[@MelvinAdekanye]

Such a good point. It would be way easier with NextJs and TailwindCSS

[@Bolt-w2u]

good one

[@GeekAkash]

Brother, I see you that you are very concerned about your privacy. Love from india

[@MelvinAdekanye]

Thanks! Appreciate the love.

[@PavelTajnytoje]

after log-in - > write not defined... doesnt working

[@heyawaltuh]

thanks for the code :)

[@MelvinAdekanye]

Any time

[@miguelarranzmoreno3187]

what parts of the code should we change if we want to change the name?

[@MelvinAdekanye]

In the JS there is a line: title.textContent = 'MemeChat 2.0'. That would allow you to change the title & name.

[@Wonder_Soul746]

hey u got a edit word script?

[@lldarkairll9139]

do you know if it's possible to do this without using another program?

[@MelvinAdekanye]

Like a chat system without Firebase? Yes but you would have to use a back-end like NodeJs and etc. That way you can have your own database and server instead of using Firebase.

[@jonathanpierce6194]

How about I add functionality for a user to press "enter" to send the message? Also, if I wanted more than one chat instance, would I have to create more than one database?

[@MelvinAdekanye]

Check this website: www.w3schools.com/howto/howto_js_trigger_button_enter.asp What do you mean by chat instance, like multiple rooms/groups?

[@jonathanpierce6194]

@@MelvinAdekanye Yep! Multiple rooms that can be on different pages

[@MelvinAdekanye]

@@jonathanpierce6194 Oh ok. No you would simply save the chat under sub categories. You don't need different databases for different groups. That would be insane.

[@mediislive]

Thanks!

[@MelvinAdekanye]

No problem. Glad you like it.

[@MelvinAdekanye]

Email me

[@omkarparishwad2138]

You are simply awesome @{Rhymbil}! Thank you so much..

[@MelvinAdekanye]

Thanks! You're most welcome.

[@justkubo]

After I put my name into the name box it and i get taken to the chat screen the loading animation keep going on forever and even though i can type to chat nothing comes up after i do it.

[@MelvinAdekanye]

Oh ok. Do you have any errors in the console window. Second do you have any data in Firebase.

[@p_akp]

Hey I got error means if I say Hello then msg show lots of hello word Pls help me to solve this problem 🙏

[@MelvinAdekanye]

Sure. Do you get any error messages in the console.

[@p_akp]

@@MelvinAdekanye no sir but I got error is If someone enter one msg the that msg show on 100 times and that msg save also 100 time in firebase pls. Help

[@MembiZaBusCat]

why is it stuck in the loading screen, sire? this is very good tutorial but that is just the problem.

[@MelvinAdekanye]

Do you get any errors when you use it?

[@Monty2022]

Happy 2021!

[@MelvinAdekanye]

For sure. I sense a great year vibe!

[@zxwar1111]

Everytime I type something into the chat press enter it repeats it like 100 times and my send button is invisible

[@MelvinAdekanye]

The problem with the icon is. The font awesome link I used isn't active anymore. Solution: Find another font awesome href to use in your link tag.

[@VishwashJoshi]

Thanks..it works.

[@MelvinAdekanye]

You're welcome!

[@Kethredaxe11]

Followed everything step by step, but for some reason my site won't work. It still just displays a blank page. When I try to open the javascript file windows tells me I'm missing a '{' on line 5. Can anyone help me figure this out? I'm very new to programming!

[@Kethredaxe11]

I figured out what was different when I rewatched the video, but now its giving me a syntax error for the line 'class MEME_Chat{'.

[@rvn4]

its just a white screen how do i fix it?

[@MelvinAdekanye]

Sure. First what error are you getting?

[@rvn4]

@@MelvinAdekanye No error, the website is online and I go into it but it's just a white screen. I tested it on my phone and pc.

[@khachikkarapetyan1870]

I copy and Paste all code , but IN my Interface I don't have send button,, how can I fix it?

[@The-Ferret-Man]

*TO MAKE THE SEND BUTTON WORK, DELETE THE LINES OF CSS THAT SAY color: Transparent; IN THE TWO CHAT INPUT SEND SECTIONS IN INDEX.CSS*

[@The-Empowerment-Engine]

Hi rhymbil , this works but the send button is again and again hiding. Can you tell me the solution. Plz

[@MelvinAdekanye]

For sure. Replace the old font awesome link with this one:

[@The-Empowerment-Engine]

@@MelvinAdekanye , ok i try it

[@the9thwinter]

Hello bro, what if I want to add datetime what can I do? Please help

[@MelvinAdekanye]

Using Firebase. Try: firebase.serverTimestamp()

[@dailygiveaways671]

how can you make it so u can enter on the chat app and it sends a thing

[@MelvinAdekanye]

So it shows. "John has entered the chat"?

[@unormalityxd7687]

I did everything you did, but the screen is just white when I open the index.html in chrome? Do you know how to fix this @{RhymBil}

[@MelvinAdekanye]

For sure. Are you getting any errors in your console?

[@eletrixalt]

im getting error 403 for fontawesome or something then it is saying app is already defined :((((((

[@MelvinAdekanye]

Here's a simple fix. Use a different fontawesome reference. The one I use in the video seems to be broken.

[@MarsCannon]

When I try to change the textContent on the title, the send button dissapears?

[@MelvinAdekanye]

Are any errors being displayed in the console

[@MarsCannon]

@@MelvinAdekanye No

[@MarsCannon]

@@MelvinAdekanye Sorry for being late lol

[@rednixch]

@@MarsCannon replace send button text with this svg icon

[@piotr7362]

how did you collapse the java script its not working for me

[@MelvinAdekanye]

Ctrl + Shift + { seems to be the common shortcut

[@_BlueOnion]

how do I make private rooms

[@aburante]

my website is blank it doesnt change help please

[@MelvinAdekanye]

Sure. Email me.

[@prathyusha6619]

Hey send button's not visible. Can you help me with that?

[@The-Ferret-Man]

*TO MAKE THE SEND BUTTON WORK, DELETE THE LINES OF CSS THAT SAY color: Transparent; IN THE TWO CHAT INPUT SEND SECTIONS IN INDEX.CSS*