Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mohammedjawwad/zephyr-chat-app

A modern real-time chat application built with MERN, Socket.io, and TailwindCSS. Features include JWT authentication, live messaging, online user status, error handling, Zustand state management, and 32 customizable themes for a dynamic user experience. 🚀
https://github.com/mohammedjawwad/zephyr-chat-app

bcrypt daisy-ui expressjs jwt-authentication lucide-react mongodb react-router-dom reactjs socket-io tailwindcss zustand

Last synced: 2 days ago
JSON representation

Host: GitHub
URL: https://github.com/mohammedjawwad/zephyr-chat-app
Owner: MohammedJawwad
Created: 2024-12-07T09:53:33.000Z (2 months ago)
Default Branch: main
Last Pushed: 2024-12-09T17:49:19.000Z (2 months ago)
Last Synced: 2024-12-15T19:41:26.259Z (about 2 months ago)
Topics: bcrypt, daisy-ui, expressjs, jwt-authentication, lucide-react, mongodb, react-router-dom, reactjs, socket-io, tailwindcss, zustand
Language: JavaScript
Homepage: https://zephyr-chat-app.onrender.com
Size: 671 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# 🌟 Zephyr Chat App
A sleek, real-time chat application that combines modern design with powerful features, delivering a seamless communication experience.

---

## 🚀 Features
- **Real-Time Messaging**: Powered by Socket.io for instant conversations.
- **Authentication & Authorization**: Secure JWT implementation.
- **Online User Status**: Stay updated with who's online.
- **Global State Management**: Simplified with Zustand.
- **Error Handling**: Robust error management on both client and server.
- **Theme Customization**: Choose from **32 stunning themes** with Daisy UI.

---

## 🌐 Live Demo
Check out the live application: **[Zephyr Chat App](https://zephyr-chat-app.onrender.com)**

---

## 📸 Screenshots

### 💬 Chat Interface
![Jawwad](frontend/public/chat1.png)
![Saba](frontend/public/chat2.png)

### 🔑 Login Page
![Login Page Screenshot](frontend/public/login.png)

### 🎨 Theme Selector
![Theme Selector Screenshot](frontend/public/themes.png)

### 👩‍💻 Profile
![Profile Page](frontend/public/profile.png)

---

## 💻 Tech Stack
- **Frontend**: React, TailwindCSS, Daisy UI
- **Backend**: Node.js, Express
- **Database**: MongoDB
- **Real-Time**: Socket.io
- **State Management**: Zustand

---

# 🛠️ Installation

## 1. Clone the repository:
```bash
git clone https://github.com/MohammedJawwad/Zephyr-Chat-App.git
cd Zephyr-Chat-App
```
## 2. Install dependencies:
### For backend
```bash
cd backend
npm install
```
### For frontend
```bash
cd ../frontend
npm install
```
## 3. Start the application:
### Start backend
```bash
cd backend
npm start
```
### Start frontend
```bash
cd ../frontend
npm run dev
```
## 4. Access the app at http://localhost:3000.