danerieber / harmon-react

A simple, fun, and fast way to chat with your friends.

Harmon

A simple, fun, and fast way to chat with your friends.

harmon-react provides a web interface for messaging and voice calling that interacts with the harmon-server-go API service.

Features

• Text chat
• Voice calling
• User list with presence/status
• User customizations: username colors, icons, banner images, and statuses
• Simple vim/helix style keybinds for quick navigation

Requirements

Nix users can just use nix develop or use nix-direnv and direnv allow . to automatically load the requirements when you enter the folder.

Otherwise, please manually install the following required software:

• Bun
• Node 20
• ESLint (for contributors)
• Prettier (for contributors)

Get Started

Install Bun packages

bun i

Start development server (note: you will also need to run harmon-server-go)

# start peerjs if you want calls to work
bunx peerjs --port 9000
bun run dev

Build/run for production

bun run build
bun run start

Deployment

See harmon-deploy for examples.

Contributing

As long as you are not on an iPad editing code through the GitHub website... Go ahead and open an issue or a PR!

harmon-react's Issues

Editing messages

App totally breaks if someone loses connection

Probably need some sort of automatic reconnect feature for when this happens

Video calling

Make shift-enter work more predictably

Currently, shift+enter makes a newline. However, when there are multiple lines in the chat, pressing enter creates newlines, and you have to use control+enter to then send the message. This confused John and he wants to fix it.

Fix it, John.

Need to inform user if their login fails

Right now nothing happens at all. The app doesn't display anything and just doesn't log you in.

Screen sharing

Scroll to end after images load

Right now, the scroll to bottom triggers on load, but seems to be scrolling to the bottom before the computed height of the div is updated after loading images, meaning the scroll position is not actually at the bottom

make emoji picker less laggy

@mentions system should use user IDs rather than usernames

It would probably by easiest to just detect @user-uuid-value in a message and replace it with that user's username. When a user types @username in their chat input, it should be replaced with @user-uuid-value before being sent to the server.

I feel like doing this on the client is easier than implementing mentions tech server-side.

Per-user volume sliders

Per-user mute buttons

Message replies

max length