Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/vaibhav-chitransh/whispr

A modern real-time chat application built with the MERN stack, featuring secure authentication, real-time messaging, profile management, user search and filtering, and more. Enhance your communication experience with Whispr Chat!
https://github.com/vaibhav-chitransh/whispr

bcryptjs cloudinary cookie-parser cors dotenv express jwt lucide-react mongodb-atlas mongoose nodejs react shadcn-ui socket-io tailwindcss zustand

Last synced: about 15 hours ago
JSON representation

Host: GitHub
URL: https://github.com/vaibhav-chitransh/whispr
Owner: Vaibhav-Chitransh
Created: 2024-12-13T18:08:11.000Z (2 months ago)
Default Branch: main
Last Pushed: 2025-01-15T13:38:09.000Z (about 1 month ago)
Last Synced: 2025-01-15T14:41:08.898Z (about 1 month ago)
Topics: bcryptjs, cloudinary, cookie-parser, cors, dotenv, express, jwt, lucide-react, mongodb-atlas, mongoose, nodejs, react, shadcn-ui, socket-io, tailwindcss, zustand
Language: JavaScript
Homepage:
Size: 1.05 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Whispr Chat App

Whispr Chat is a modern, feature-rich real-time chat application built using the MERN stack. Designed for seamless communication, it currently supports one-to-one chats, with exciting features like group chats, customizable themes, and video calling in development.

**Home Page**

![Home Page](./images/home_image.png)

## Key Features

### 1. **User Authentication**
- **Secure Sign-Up and Login**: Users can create accounts and log in securely using email and password authentication.

**Signup Page**

![Signup Page](./images/signup_image.png)

- **Login Page**

![Login Page](./images/login_image.png)

### 2. **User Profile Management**
- **Profile Page**: Each user has a dedicated profile page displaying their username, email, and profile picture, last updated, member since.
- **Bio Update**: Users can add or edit a personal bio to share more about themselves.
- **Profile Picture Upload**: Upload and change profile pictures to personalize accounts.

- **Profile Page**

![Profile Page](./images/profile_image.png)

### 3. **Real-Time One-to-One Chat**
- **Instant Messaging**: Real-time text messaging between users.
- **Online Status Indicators**: Visual cues to show if a user is online or offline.
- **Message Timestamps**: Each message displays the time it was sent.

- **Chat Page**

![Chat Page](./images/chat_image.png)

### 4. **User Search and Filtering**
- **Search by Username**: Quickly find other users by searching for their username.
- **Online/Offline Filtering**: Filter user lists to display only online or offline users, enhancing the chat experience.

- **Filter Users**

![Name](./images/searchFillter_image.png)

![Online](./images/onlineFilter_image.png)

---

*Note: Features under development, such as group chats, customizable themes, and video calling, are not included in this list.*

## Tech Stack

- **Frontend**: React.js, TailwindCSS, zustand
- **Backend**: Node.js, Express.js
- **Database**: MongoDB
- **Real-Time Communication**: Socket.io
- **Authentication**: JWT (JSON Web Tokens)

---

## How to Run the Project Locally

Follow the steps below to set up and run the Whispr Chat app on your local system.

### 1. Clone the Repository
```bash
git clone https://github.com/Vaibhav-Chitransh/whispr-chat.git
cd whispr-chat
```

### 2. Install Dependencies
#### Backend
1. Navigate to the `server` folder:
```bash
cd server
```
2. Install required packages:
```bash
npm install
```

#### Frontend
1. Navigate to the `client` folder:
```bash
cd ../client
```
2. Install required packages:
```bash
npm install
```

### 3. Set Up Environment Variables
1. Create a `.env` file in the `server` folder and add the following variables:
```env
MONGO_URI=
JWT_SECRET=
PORT=5000
SOCKET_PORT=6001
```

### 4. Start the Application
#### Backend
1. Start the backend server:
```bash
cd server
npm start
```

#### Frontend
1. Start the frontend server:
```bash
cd client
bun run dev
```

### 5. Access the Application
1. Open your browser and navigate to:
```
http://localhost:5173
```

---

## Future Roadmap

### Upcoming Features
- **Group Chat**: Enhanced group communication functionality.
- **Customizable Themes**: User-selectable themes to improve UX.
- **Video Calling**: Fully functional video conferencing within chats.
- **File Sharing**: Share files and media directly in conversations.
- **Push Notifications**: Stay updated with real-time notifications.

---

## Contribution Guidelines

We welcome contributions from the community! If you'd like to contribute:

1. Fork the repository.
2. Create a new branch for your feature/bugfix.
3. Commit your changes and push the branch.
4. Submit a pull request with a detailed description of your changes.

---

## Contact

For any queries or support, feel free to reach out:
- **Email**: [email protected]
- **GitHub**: [Vaibhav-Chitransh](https://github.com/Vaibhav-Chitransh)

---