https://github.com/syedomer17/chat-app
💬 A fullstack real-time chat application built with NestJS, React, Tailwind CSS, and Socket.IO. 🚀 Includes user join/leave notifications, typing indicators, and message history with MongoDB. 🎨 Clean and responsive UI powered by shadcn/ui and TypeScript throughout.
https://github.com/syedomer17/chat-app
mongodb nestjs reactjs shadcn-ui socket-io tailwindcss websocket
Last synced: 2 months ago
JSON representation
💬 A fullstack real-time chat application built with NestJS, React, Tailwind CSS, and Socket.IO. 🚀 Includes user join/leave notifications, typing indicators, and message history with MongoDB. 🎨 Clean and responsive UI powered by shadcn/ui and TypeScript throughout.
- Host: GitHub
- URL: https://github.com/syedomer17/chat-app
- Owner: syedomer17
- Created: 2025-05-28T08:31:16.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-28T09:32:35.000Z (about 1 year ago)
- Last Synced: 2025-05-28T10:31:04.358Z (about 1 year ago)
- Topics: mongodb, nestjs, reactjs, shadcn-ui, socket-io, tailwindcss, websocket
- Language: TypeScript
- Homepage: https://github.com/syedomer17/Chat-app
- Size: 150 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 💬 Real-Time Chat App (NestJS + React + WebSocket)
A modern fullstack chat application built with:
* 🧠 **NestJS** (Backend)
* ⚡ **Socket.IO** for real-time messaging
* 🎨 **React.js + Tailwind CSS** for a responsive UI
* 💅 **shadcn/ui** for accessible and beautiful components
* 📂 **MongoDB** for message persistence
* 💬 User join/leave announcements, typing indicators, and chat history
---
## 📦 Features
✅ Real-time messaging
✅ Join/Leave notifications
✅ Typing indicators
✅ MongoDB message storage
✅ Display active users
✅ Responsive UI (with Tailwind + shadcn)
✅ Fully typed with TypeScript
---
## 📁 Project Structure
```
chat-app/
├── chat-backend/ → NestJS backend (Socket.IO + MongoDB)
├── chat-frontend/ → React frontend (Tailwind + WebSocket)
```
---
## ✨ Getting Started
### 1. Clone the repository
```bash
git clone https://github.com/YOUR_USERNAME/chat-app.git
cd chat-app
```
---
## 🧠 Backend Setup (`chat-backend/`)
### 📦 Install dependencies
```bash
cd chat-backend
npm install
```
### ⚙️ Configure
Create a `config` folder and inside it create a `config.ts` file:
```
MONGO_URI=mongodb://localhost:27017/chat-app
```
> Make sure MongoDB is running locally
### ▶️ Run the backend
```bash
npm run start:dev
```
Backend will run on: [http://localhost:3000](http://localhost:3000)
---
## 🎨 Frontend Setup (`chat-frontend/`)
---
## 🧪 Technologies Used
### Backend:
* NestJS
* Socket.IO (WebSocket Gateway)
* Mongoose + MongoDB
* TypeScript
### Frontend:
* React.js (Vite)
* Tailwind CSS
* shadcn/ui
* WebSockets
---
## 🤝 Contributing
Feel free to fork the project and submit a PR with improvements!
---