GitHunt
CB

cbeAbishek/Real_time_app

A real-time chat application built with React that allows multiple users to communicate seamlessly in a dynamic and interactive environment. The application supports customizable themes, enabling users to personalize their chat experience by choosing from a variety of visually appealing themes.

โœจ Full Stack Realtime Chat App โœจ

Highlights:

  • ๐ŸŒŸ Tech stack: MERN + Socket.io + TailwindCSS + Daisy UI
  • ๐ŸŽƒ Authentication & Authorization with JWT
  • ๐Ÿ‘พ Real-time messaging with Socket.io
  • ๐Ÿš€ Online user status
  • ๐Ÿ‘Œ Global state management with Zustand
  • ๐Ÿž Error handling both on the server and on the client
  • โญ At the end, Deployment like a pro for FREE!
  • โณ And much more!

Features

  • User Authentication: Secure login and registration using JWT authentication.
  • Real-time Chat: Instant messaging powered by Socket.io.
  • Online Status Tracking: Displays live user status updates.
  • Message Persistence: Stores chat history using MongoDB.
  • Media Sharing: Users can send images and files via Cloudinary integration.
  • Global State Management: Manages application state efficiently with Zustand.
  • Responsive UI: Modern and mobile-friendly interface using TailwindCSS and Daisy UI.
  • Error Handling: Robust error management on both client and server.
  • Free Deployment: Guide to deploy the application at no cost.

Setup .env file

MONGODB_URI=...
PORT=5001
JWT_SECRET=...

CLOUDINARY_CLOUD_NAME=...
CLOUDINARY_API_KEY=...
CLOUDINARY_API_SECRET=...

NODE_ENV=development

Installation

Clone the repository

git clone https://github.com/your-username/your-repo.git
cd your-repo

Install dependencies for both frontend and backend

npm install
cd client && npm install

Build the Frontend

cd client
npm run build

Start the Application

Start the backend server

npm run server

Start the frontend

cd client
npm start

Open your browser and go to http://localhost:3000

cbeAbishek/Real_time_app | GitHunt