Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/adeebkhan25/messenger

Messenger App is a full-stack, real-time messaging application designed for seamless and intuitive communication. Built with React on the frontend and Node.js/Express on the backend, it leverages WebSockets for instant messaging and MongoDB for secure data storage.
https://github.com/adeebkhan25/messenger

express javascript mongodb nodejs react tailwindcss ws

Last synced: 9 days ago
JSON representation

Host: GitHub
URL: https://github.com/adeebkhan25/messenger
Owner: AdeebKhan25
Created: 2024-08-25T14:06:29.000Z (6 months ago)
Default Branch: master
Last Pushed: 2024-08-25T17:56:31.000Z (6 months ago)
Last Synced: 2025-01-31T18:15:18.594Z (20 days ago)
Topics: express, javascript, mongodb, nodejs, react, tailwindcss, ws
Language: JavaScript
Homepage:
Size: 400 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Messenger App

Welcome to the **Messenger App**! This application allows users to chat in real time, send messages, and share files. Built with modern web technologies, it provides a seamless and interactive messaging experience.

## Features

- **Real-time Messaging**: Exchange messages instantly using WebSockets.
- **File Sharing**: Upload and download files. Send and receive images directly within the chat interface.
- **User Authentication**: Secure login and logout functionality.
- **Offline Support**: Displays offline users and handles messages appropriately.

## Technologies

- **Frontend**: React, Tailwind CSS
- **Backend**: Node.js, Express
- **Database**: MongoDB (using Mongoose)
- **WebSockets**: WS (Node package)

## Getting Started

To get started with this project locally, follow these steps:

1. Clone the repository:
```bash
git clone https://github.com/AdeebKhan25/Messenger.git
cd Messenger
```
2. Navigate to the client directory:
```bash
cd client
```
3. Install dependencies:
```bash
yarn install
```
4. Navigate to the api directory:
```bash
cd ../api
```
5. Install dependencies:
```bash
yarn install
```
6. Create a .env file in the api directory and add your MongoDB URL, JWT Secret, and Client URL.
7. Start the backend server:
```bash
nodemon index.js
```
8. Start the frontend development server:
```bash
yarn run dev
```

## Screenshots

1. Login Page

![Login](https://github.com/user-attachments/assets/46b9c393-0162-4925-8e22-9d9b6cf3510a)

3. Register Page

![Register](https://github.com/user-attachments/assets/4d96ea55-d0de-4987-9fdf-4707f6831f2f)

5. Chat Page

![Chat](https://github.com/user-attachments/assets/51c9c698-69e4-4d8a-8426-bba76add80b2)

### Further Assistance
If you need any more help or have other questions, feel free to ask. Happy coding! 🚀