https://github.com/dz1kill/frontend_messenger

MVP Frontend for messenger.
https://github.com/dz1kill/frontend_messenger

axios chat chat-client http-client jwt jwt-auth messenger messenger-client pern-stack react redux-toolkit typescript websocket-client

Last synced: about 1 month ago
JSON representation

MVP Frontend for messenger.

• Host: GitHub
• URL: https://github.com/dz1kill/frontend_messenger
• Owner: dz1kill
• Created: 2025-05-23T13:08:16.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2025-07-25T12:27:09.000Z (8 months ago)
• Last Synced: 2025-07-25T18:53:57.652Z (8 months ago)
• Topics: axios, chat, chat-client, http-client, jwt, jwt-auth, messenger, messenger-client, pern-stack, react, redux-toolkit, typescript, websocket-client
• Language: TypeScript
• Homepage:
• Size: 1.34 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Messenger Frontend MVP

## 📌 Overview

This is a minimum viable product (MVP) of a messenger application featuring:

- **Backend**: Companion server + Full API reference (REST endpoints, WebSocket protocol) - [GitHub Repository](https://github.com/dz1kill/backend_messenger)

- **Frontend**: React-based interface with REST API + JWT auth for user management and WebSocket API for real-time messaging

## ✨ Core Features

### 🔌 WebSocket Connection

#### 💬 Chats & Groups

- 📜 Paginated loading of private chats

- 📜 Paginated loading of group chats

#### ✉️ Messaging

- 📜 Paginated loading of private messages

- 📜 Paginated loading of group messages

- ✈️ Send private messages

- ✈️ Send group messages

#### 🛠 Group Management

- ➕ Create new groups

- 👥 Add new members to groups

- 🚪 Leave group

- ❌ Delete group

- ℹ️ System notifications (member joins/leaves)

### 🌐 HTTP API

#### 🔐 Authentication

- 📝 User registration

- 🔑 Login

- 🔄 Password change

- 🗑 Account deletion

#### 👤 User Profile

- ✏️ Edit personal information

#### 🔍 Search

- 👤 User search

- 🔎 Find users and groups I'm member of

- ➕ Find users to add to groups

#### 🗂 Chat Management

- ❌ Delete conversation

## 🛠 Technical Stack

### Frontend Core

- **React** - UI framework

- **Redux Toolkit** - State management

- **React Router DOM** - Client-side routing

### Real-Time Communication

- **WebSocket API** - Real-time messaging

- **React-use-websocket** - WebSocket integration

## 🖼️ Interface Screenshots

### 1. Authorization

  

  🔍 Show screenshot  

    

### 2. Chat

  

  🔍 Show screenshot  

    

### 3. Search

  

  🔍 Show screenshot  

    

### 4. Settings

  

  🔍 Show screenshot  

    

## 🏃 Running the app

```bash

# Replace the API URLs in the .env file with those matching your network.

# Running the project in development mode:

$ npm run start

```