alex/simple-chat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
No description
15 commits 1 branch 0 tags 320 KiB
Find a file
Alexander Daichendt 64d360a9c5 feat: add virtual list
2025-02-13 15:12:59 +01:00
client feat: add virtual list 2025-02-13 15:12:59 +01:00
server docs: add readme 2025-02-13 14:42:34 +01:00
.gitignore feat: initial scaffolding, client can connect with a user name 2025-02-11 18:29:57 +01:00
README.md docs: add readme 2025-02-13 14:42:34 +01:00
shared.ts feat: proper chat message styling without rerendering 2025-02-12 12:11:14 +01:00

README.md

Simple Chat

A real-time chat application built with React, TypeScript, and Bun, featuring WebSocket communication for instant messaging.

Features

  • Real-time messaging using WebSockets
  • Multiple chat rooms support
  • User presence indicators (join/leave system messages)
  • Message editing and deletion
  • Participant list
  • Accessibility-focused UI

Technology Stack

Frontend

  • React
  • TypeScript
  • TailwindCSS
  • React Router
  • Vitest for testing

Backend

  • Bun
  • WebSocket Server
  • TypeScript

Getting Started

Prerequisites

  • Node.js (v22 or later)
  • Bun runtime
  • pnpm package manager

Installation

  1. Clone the repository:
git clone https://git.shiverpeak.xyz/alex/simple-chat
cd simple-chat
  1. Install dependencies:
# Install client dependencies
cd client
pnpm install

# Install server dependencies
cd ../server
bun install
  1. Start the development servers:
# Start the backend server
cd server
pnpm run dev

# In a new terminal, start the frontend
cd client
bun run dev
  1. Open http://localhost:5173 in your browser

Usage

  1. Create a new room or join an existing one using a room ID
  2. Enter your name to join the chat
  3. Start chatting!

Testing

Run the test suite:

cd client
pnpm test

Limitations and Future Improvements

  • Users can join the chat with the same name
  • Server does not verify if a client action is valid, i.e. a user can delete another user's message if you send the right request
  • Messages are not persisted, so they are lost when the server restarts and also its not possible to send new users a history
  • no user authentication
  • Client Websockets should be more robust, i.e. reconnecting
  • Client state does not persist on refresh
  • Client messages are rendered all at once, a virtual list would be better after a certain amount of messages
  • Test coverage very limited: only a single component is tested
  • Keyboard navigation and focus management could be improved
  • Entire deployment process is missing, i.e. Dockerfiles, CI/CD, reverse proxy
  • No Metrics, Traces or Logs

License

This project is licensed under the MIT License