nuhptr / chat-realtime

✅⚡️ Building website chatting using socket.io and nodejs

Chat Realtime MERN App

Building a Chat Realtime App using the MERN stack. Frontend with React and Backend with Node.js, Express & Socket.io.

Features

• Realtime Chat
• Authentication
• Online/Offline Status
• Check available users

Getting Started

• Update the .env.example to env file with your MongoDB connection string and JWT secret.
• Install the dependencies for the backend and frontend.
• Enjoy

Backend Dependencies

• express - bun add express
• socket.io - bun add socket.io
• nodemon - bun add -D nodemon
• dotenv - bun add dotenv
• cookie-parser - bun add cookie-parser
• bcrypt - bun add bcrypt
• jsonwebtoken - bun add jsonwebtoken
• mongoose - bun add mongoose

Generate Random String For JWT Secret

openssl rand -base64 32

Frontend Dependencies

• tailwindcss - bun add -D tailwindcss postcss autoprefixer
• daisyui - Tailwind CSS Components
• react-icons - Icons for React
• react-router-dom - Routing for React
• react-hot-toast - Toast for react
• axios - Promise based HTTP client for the browser and node.js
• zustand - State management for React
• socket.io-client - Socket.io client for React

DaisyUI

link - https://www.npmjs.com/package/daisyui

bun add -D daisyui

add config to tailwind.config.js

import daisyui from "daisyui"

module.exports = {
   theme: {
      extend: {},
   },
   plugins: [require("daisyui")],
}