Изучайте HTML/CSS вместе с общим редактором кода и мгновенным предпросмотром
- Совместная работа в реальном времени - Все изменения кода мгновенно синхронизируются между всеми подключенными пользователями
- Поддержка нескольких пользователей - Видите, сколько пользователей подключено к вашей доске
- Красивый редактор кода - Подсветка синтаксиса с темой Material Ocean
- Предпросмотр в реальном времени - Мгновенно видите результат изменений HTML/CSS
- Простой обмен - Делитесь досками с помощью простой ссылки
- Постоянное хранение - Все доски сохраняются автоматически
- WebSocket-соединение - Обновления в реальном времени с низкой задержкой
- Докеризировано - Простое развертывание с Docker Compose
- Go - Бэкенд
- Chi Router - Легковесный HTTP-роутер
- Gorilla WebSocket - Двунаправленная связь в реальном времени
- PostgreSQL - Надежное хранение данных
- Redis - Pub/Sub для синхронизации в реальном времени и кеширования
- CodeMirror 5 - Редактор кода с подсветкой синтаксиса
- Vanilla JavaScript - Без зависимостей от фреймворков
- Modern CSS - Кастомные свойства, анимации и градиенты
- Docker & Docker Compose
- Git
- Клонируйте репозиторий
git clone https://github.com/YaMosli/collab-learn.git
cd collab-learn- Запустите с помощью Docker Compose
docker-compose up --build- Откройте в браузере
http://localhost:8080
Переменные окружения (задаются в docker-compose.yml):
| Переменная | По умолчанию | Описание |
|---|---|---|
DB_HOST |
postgres | Хост PostgreSQL |
DB_PORT |
5432 | Порт PostgreSQL |
DB_USER |
collablearn | Пользователь БД |
DB_PASSWORD |
collablearn123 | Пароль БД |
DB_NAME |
collablearn | Имя БД |
REDIS_HOST |
redis | Хост Redis |
REDIS_PORT |
6379 | Порт Redis |
PORT |
8080 | Порт приложения |
| Метод | Эндпоинт | Описание |
|---|---|---|
POST |
/api/boards |
Создать новую доску |
GET |
/api/boards |
Список всех досок |
GET |
/api/boards/:id |
Получить детали доски |
PUT |
/api/boards/:id |
Обновить код доски |
WS |
/api/boards/:id/ws |
WebSocket-соединение |
- Создайте новую доску - Нажмите кнопку "New Board"
- Поделитесь доской - Нажмите "Share", чтобы скопировать URL
- Пишите код - Используйте редакторы HTML и CSS
- Смотрите предпросмотр - Изменения мгновенно появляются в окне предпросмотра
- Сотрудничайте - Поделитесь URL с другими для совместного программирования
Ctrl/Cmd + Space- АвтодополнениеCtrl/Cmd + /- Переключить комментарийTab- Отступ выделения или вставка 2 пробелов
Приложение запускает три сервиса:
- app - Go-сервер бэкенда
- postgres - База данных PostgreSQL
- redis - Redis для pub/sub и кеширования