- I am create this amazin chat application .
- So the chat application is developed using react node.js and Socket.io .
- Designed this by style componet
- Login Page
- Register Page
- We have a Beautiful Loader
- We have to set an avatar from hear.
- avatar is change time to time
- avatar API Name multi avatarAPI
- Chat application start
- All chat show hear
- real time data flow
- Emoji sand in chat
- public (Front-end)
yarn start
- Server (Back-end)
yarn start
npm i bcrypt cors dotenv express mongoose socket.io
yarn start
- Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.
- It takes in an iterable (e.g an array) and expands it into individual elements.
- The spread syntax is commonly used to make shallow copies of JS objects. Using this operator makes the code concise and enhances its readability.
import {ToastContainer, toast} from 'react-toastify'
- brcypt is used to encryption of the password
// Connect to MongoDB
mongoose
.connect(process.env.MONGO_URL, {
useNewUrlParser: true,
useUnifiedTopology: true,
})
.then(() => {
console.log("DB Connetion Successfull");
})
.catch((err) => {
console.log(err.message);
});
- Data store in mongodb data base .
- Anter register user move to chat page