https://github.com/mishi54/realtimechatapp

"A real-time chat application built with a React frontend, Node.js/Express backend, and MongoDB, featuring real-time communication, state management, and modern UI components."
https://github.com/mishi54/realtimechatapp

daisyui express middleware mongodb nodejs react real-time-chat socket-io tailwindcss zustand

Last synced: about 1 month ago
JSON representation

"A real-time chat application built with a React frontend, Node.js/Express backend, and MongoDB, featuring real-time communication, state management, and modern UI components."

• Host: GitHub
• URL: https://github.com/mishi54/realtimechatapp
• Owner: mishi54
• Created: 2024-08-11T19:21:05.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-08-29T21:12:51.000Z (3 months ago)
• Last Synced: 2024-10-15T19:22:01.357Z (about 1 month ago)
• Topics: daisyui, express, middleware, mongodb, nodejs, react, real-time-chat, socket-io, tailwindcss, zustand
• Language: JavaScript
• Homepage:
• Size: 4.6 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
**Create two folders:**

1.	Frontend

2.	Backend

**Frontend commands:**

1.	npm create vite@latest ./

2.	npm i

3.	npm run dev

4.	go to tailwind css vite and paste in terminal the commands

5.	install some extensions like :tailwindcss intelliSense,prettier,vscode file icons

6.	Del some files like app.css, from public=>del svg file,from assets=>del svg file

7.	Download daisy ui plugin of tailwing for better ui and less code:   https://daisyui.com/

8.	npm i -D daisyui@latest

9.	add plugin to tailwing config.js: 

10.	require('daisyui')

11.	npm i react-router-dom

12.	add folder component ,pages

13.	in pages 3 file created with rafce

14.	rfce for auto functional component creation due to es7 script

15.	npm i react-icons for installing icons

16.	https://react-hot-toast.com/docs    (For adding toaster)

17.	Use Zustand which works to help in state management works like redux

18.	https://docs.pmnd.rs/zustand/getting-started/introduction

19.	npm i socket.io-client

**Backend Commands:**

1.	npm init –y

2.	npm i express

3.	npm i nodemon

4.	npm run dev 

5.	before run dev make sure json scripts is all correct and u add node server.js and nodemon script 

6.	copy front end gitignore in backend too

7.	add .env in gitignore  backend

8.	npm i bcrypt cookie-parser dotenv jsonwebtoken mongoose socket.io

Website for adding avatar profile:

https://avatar-placeholder.iran.liara.run/

**Screenshot of Apps:**

**SignUp:**

![image](https://github.com/user-attachments/assets/32d4ceca-11b8-43b8-8617-88bfaf0bbe77)

**Login:**

![image](https://github.com/user-attachments/assets/1734f66e-0da9-4eec-83e1-fde24ee0101c)

**Dashboard**

![image](https://github.com/user-attachments/assets/91042eb6-6f29-4ed6-b4bb-eca615992afd)

**Online Activity And Starting Conversation Preview:**

![image](https://github.com/user-attachments/assets/d712d082-fc4e-4e15-a302-499922ebc7fb)

**Conversation**

![image](https://github.com/user-attachments/assets/a4f27d59-2416-4864-8e30-1318c60ec6fa)