How to Build & Deploy a Full Stack Chat Application Using MERN | JWT, Socket IO, Zustand |

Опубликовано: 13 Май 2024
на канале: Learn Coding

49,585

982

In this video, we showcase how to build a full stack (dynamic/responsive) ChatApplication, crafted with 𝗠𝗼𝗻𝗴𝗼𝗗𝗕, 𝗘𝘅𝗽𝗿𝗲𝘀𝘀.𝗷𝘀, 𝗥𝗲𝗮𝗰𝘁.𝗷𝘀, 𝗮𝗻𝗱 𝗡𝗼𝗱𝗲.𝗷𝘀.

Used Technologies :-
--------------------------------------
𝗠𝗼𝗻𝗴𝗼𝗗𝗕 :- It's a NoSQL DB.
𝗘𝘅𝗽𝗿𝗲𝘀𝘀 𝗝𝘀 :- It's a Node Js Framework(Backend)
𝗥𝗲𝗮𝗰𝘁 𝗝𝘀 :- It's a JavaScript Library(Frontend)
● UI Design:- 𝗧𝗮𝗶𝗹𝘄𝗶𝗻𝗱 𝗖𝗦𝗦
𝗡𝗼𝗱𝗲 𝗝𝘀:- Help us to run Js on Server-side.

Other Used Technologies :-
------------------------------------------------
𝗦𝗼𝗰𝗸𝗲𝘁 𝗜𝗢:- It is a JavaScript library that enables real-time, bidirectional communication between web clients (like browsers) and servers.

𝗝𝗪𝗧 :- (JSON Web Token) is a secure value to transmit information as a JSON object between parties. Commonly used for authentication and authorization in web applications.

☆ 𝗟𝗶𝘃𝗲 𝗣𝗿𝗲𝘃𝗶𝗲𝘄 👇
https://chatapp-yt.onrender.com/

Note:- I've shut down my database due to heavy traffic or request, so the given URL may not work.

------------------------
𝗣𝗿𝗲𝗿𝗲𝗾𝘂𝗶𝘀𝗶𝘁𝗲
------------------------
☆ Javascript (map, filter & reduce)👇
   • Javascript map, filter & reduce | Lec...

☆ 𝗚𝗶𝘁 𝗙𝘂𝗹𝗹 𝗖𝗼𝘂𝗿𝘀𝗲 👇
   • GIT Full Course | Learn Coding | #git...

☆ 𝗛𝗧𝗠𝗟 𝗖𝗦𝗦 𝗣𝗿𝗼𝗷𝗲𝗰𝘁 👇
   • How To Make a Website | Make Static W...

☆ 𝗝𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁 𝗣𝗿𝗼𝗷𝗲𝗰𝘁 👇
   • Javascript Projects

☆Full Stack Projects😊
----------------------------------------
● Blog Application 👇
   • How to Build & Deploy a Full Stack Bl...

● Portfolio Website 👇
   • How to Build & Deploy a Portfolio Web...

● Youtube Clone Project 👇
   • How to Build & Deploy a Full Stack Yo...

● 𝗣𝗹𝗲𝗮𝘀𝗲 𝘀𝗵𝗮𝗿𝗲, 𝗶𝗳 𝘆𝗼𝘂 𝗳𝗶𝗻𝗱 𝗶𝘁 𝗨𝘀𝗲𝗳𝘂𝗹😊

-----------------------
𝗧𝗶𝗺𝗲𝘀𝘁𝗮𝗺𝗽
-----------------------

1. Project Demo 00:00:00

2. Node Js Installation 00:07:58
3. What is MERN? 00:09:10

● Frontend 00:10:00
● Backend 00:57:37

☆. Backend-Frontend
1. User Creation(Backend) 01:23:12
2. JWT 01:41:53
3. Signup/Login Form(Frontend) 02:03:56
4. Defining Routes 03:04:16
5. Fixing Cookies issue
(Token not showing) 03:39:10
6. Message Work(Backend) 03:57:34
7. Message Work(Frontend) 04:37:58

7. Socket IO 05:34:53
☆ Responsive 06:34:12

------------------------------
𝗕𝗼𝗻𝘂𝘀 😊
------------------------------
8. Version Control
■ GIT/GitHub(Code Pushing) 06:40:01

9. Deployment 06:42:44

10. Version Control
■ GIT/GitHub(Repo Clone) 07:01:17
● Make Sure Git Should be Installed Before
Cloning the GitHub Repo.

☆ Github Repo(Source Code)😊
https://github.com/akhil2k-lc/ChatApp

☆ Official Github Account 👇
https://github.com/LearnCodingOfficial

𝗙𝗼𝗹𝗹𝗼𝘄 𝘂𝘀 𝗼𝗻 👇
------------------------------------------------
◇ Youtube!
𝗟𝗲𝗮𝗿𝗻 𝗖𝗼𝗱𝗶𝗻𝗴
   / @learncodingofficial

◇ Facebook!
𝗟𝗲𝗮𝗿𝗻 𝗖𝗼𝗱𝗶𝗻𝗴
  / learncodingfb

◇ Telegram!
𝗟𝗲𝗮𝗿𝗻 𝗖𝗼𝗱𝗶𝗻𝗴
https://t.me/LearnCodingTelegram

◇ Github!
𝗟𝗲𝗮𝗿𝗻 𝗖𝗼𝗱𝗶𝗻𝗴
https://github.com/LearnCodingOfficial

Your Queries
--------------------------

● MERN Project
● Chat Application
● MERN Stack
● Node js chat application
● MERN Stack Project
● Complete MERN Stack Project
● Full Stack Web Application
● How to build a full stack chat application
● Chat Application with React and Node Js
● How to build and deploy a full stack chat application using mern
● How to create a chat app
● Chat Application Using MERN
● Chat Application in Node Js with Socket IO
● How to Create MERN Project
● MERN Chat Application
● Realtime chat application in mern
● Learn to build Full Stack MERN Project
● Build Complete MERN Project
● How to make website
● How to create a real time chat application
● How to create a website
● How to build and deploy a full stack chat application
● How to deploy a full stack mern project
● How to create a full stack web application
● Chat Application in React Js and Node Js
● HTML
● CSS
● Javascript
● Tailwind CSS
● React Js
● MongoDB
● Express Js
● Node Js
● Socket IO
● JWT

☆ Don't forget to tag our Channel...!
#mern
#chatapp
#webdevelopment
#reactjs
#mongodb
#expressjs
#nodejs
#tailwindcss
#socketio
#jwt
#json
#mernstack
#jsx
#zustand
#contextapi
#html
#css
#javascript
#mernstack
#github
#git
#LearnCoding

Development 🧏‍♂️:- 𝗔𝗸𝗵𝗶𝗹𝗲𝘀𝗵
Deployment 🧏‍♂️ :- 𝗩𝗶𝘃𝗲𝗸

------------------------------------
Thank You 😊
------------------------------------

Смотрите видео How to Build & Deploy a Full Stack Chat Application Using MERN | JWT, Socket IO, Zustand | онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Learn Coding 13 Май 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 49,58 раз и оно понравилось 98 людям.

5,38