Локальный чат

Это веб-приложение для создания локального чата, которое работает без сервера и использует только возможности браузера. Все данные хранятся локально и восстанавливаются при перезагрузке страницы или повторном открытии браузера.

Полезные ссылки

• Макет в Figma

Начало работы

Предварительные требования

Убедитесь, что у вас установлены следующие программы:

• Node.js (версия 16 или выше)
• npm (или Yarn, если вы предпочитаете)

Установка зависимостей

Клонируйте репозиторий:

https://github.com/kuryuo/local-chat

Перейдите в папку проекта:

cd local-chat

Установите зависимости:

npm install

Запустите проект:

npm run dev

Приложение будет доступно по адресу: http://localhost:5173.

Используемые технологии

• React 18
• TypeScript
• Vite
• HTML5, CSS3
• localStorage / sessionStorage — для хранения данных чата и сессий

Основные возможности

• Чат без сервера: Все данные (пользователи, сообщения, комнаты) хранятся в браузере. Приложение не зависит от сервера и работает полностью локально.

• Уникальные идентификаторы сессий: Каждая вкладка имеет свой уникальный идентификатор сессии, который сохраняется в sessionStorage, обеспечивая уникальность для каждой вкладки браузера.

• Идентификация пользователя и комнаты: Пользователи могут вводить своё имя и выбирать комнату, в которую они хотят войти, при запуске чата.

• Сохранение и восстановление данных: Все данные о пользователях, сообщениях и комнатах сохраняются в localStorage и восстанавливаются при перезагрузке страницы или закрытии браузера.

• Отображение emoji: Пользователи могут отправлять сообщения с emoji, используя встроенный пикер или вводя их вручную.

• Цитирование сообщений: Возможность цитировать сообщения в чате для контекста или для ответа на конкретные сообщения.

• Поддержка медиа-контента: Поддержка отправки и отображения изображений в сообщениях.