Совместный продуктВ разработке

LangMeetup – языковые клубы по видеосвязи

Продукт для разговорной практики: человек находит клуб на своём языке и уровне, приходит на встречу по расписанию и разговаривает по видео прямо в браузере. Делаю его сам: веб-приложение, сервер, сайт и выкат.

Звонки в браузередо 8 участников и ведущие клуба, без установки приложения
Клубы до 30 человекпоиск по языку и уровню, заявки и ссылки-приглашения
Карточки словинтервальное повторение по FSRS-6, файлы для Anki

Страница LangMeetup для гостя на экране MacBook — Страница для гостя, рабочая версия ноября 2026 года. Сайт продукта: langmeetup.com

01Задача

Говорить на иностранном языке труднее всего, и практики обычно не хватает. Задача продукта – дать человеку клуб на его языке и уровне и регулярные встречи по видео, для которых ничего не нужно устанавливать.

02Что сделано

Клубы по языку и уровню: поиск, заявки на вступление и ссылки-приглашения
Встречи по расписанию с повторениями, общий календарь и напоминания
Видеозвонки в браузере: проверка камеры и микрофона, зал ожидания, поднятая рука, показ экрана, фон за спиной
Звонок один на один из личной переписки
Чат клуба, личные сообщения и уведомления в браузере
Карточки новых слов с интервальным повторением, импорт и экспорт файлов для Anki
Инструменты ведущего: заявки, медленный режим чата, скрытие сообщений, завершение встречи для всех
Модерация и админка: жалобы, блокировки, люди, роли, клубы и расписание
Вход по почте и паролю с кодом из письма и через Google
В работе: поиск собеседника для практики один на один

03Стек

ReactTypeScriptTailwind CSSAstroGoPostgreSQLLiveKit (WebRTC)Docker

04Что внутри и зачем это пользователю

Видно, что со связью

У каждого участника встречи есть индикатор качества связи от медиасервера. Если связь падает у самого человека, звонок пишет об этом прямо: связь слабая или идёт переподключение.

Звонок не теряется

Если двое звонят друг другу одновременно, они попадают в один звонок. Автоматическая перезагрузка после нового релиза ждёт, пока звонок закончится.

Время встреч не плывёт

Серия встреч хранится как местное время, часовой пояс и правило повторения. Сервер не запустится, если его данные о часовых поясах расходятся с базой.

05Экраны на компьютере и телефоне

Страница LangMeetup на компьютере: первый экран и каталог клубов — Компьютер, 1440 px

Страница LangMeetup на компьютере: пример встречи по видео с чатом — Компьютер, 1440 px

Страница LangMeetup на телефоне, первый экран — Телефон, 390 px

Страница LangMeetup на телефоне: пример встречи по видео — Телефон, 390 px

06Дизайн-система продукта

Цвета

Фон--p-paper#FCFBF8RGB 252 251 248
Текст--p-slate-950#0E121BRGB 14 18 27
Акцент--p-teal-800#197669RGB 25 118 105
Вторичный--p-teal-500#58E9D5RGB 88 233 213

Бирюзовый --p-teal-*

teal-100#C2F5EE
teal-500#58E9D5
teal-700#1D9081
teal-800#197669
teal-900#13584F

Тёмные поверхности

veil-700#263436
veil-900#0F1E20
ink-700#313131
ink-800#1B1B1B
ink-900#111111

Серые

mist-50#F6F6F6
line-200#E8E8E8
grey-300#A4ACB9
grey-500#666D80
grey-900#0D0D12

Состояния

online#12B76A
amber-500#FFBB00
rose-500#CC3336

Шрифт

Заголовки, текст и интерфейс

Manrope

Переменный шрифт, начертания от 200 до 800

Regular 400
Medium 500
SemiBold 600
Bold 700

АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюяABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 «»!?&@%

--ui-type-hero56 / 67
Разговор
--ui-type-display48 / 58
Разговор
--ui-type-headline24 / 31
Разговор
--ui-type-section18 / 25
Съешь же ещё этих мягких французских булок
--ui-type-body16 / 24
Съешь же ещё этих мягких французских булок
--ui-type-small14 / 20
Съешь же ещё этих мягких французских булок
--ui-type-caption12 / 18
Съешь же ещё этих мягких французских булок

Скругления и тени

--p-radius-40.25rem = 4 px
--p-radius-80.5rem = 8 px
--p-radius-120.75rem = 12 px
--p-radius-150.9375rem = 15 px
--p-radius-161rem = 16 px
--p-radius-181.125rem = 18 px
--p-radius-261.625rem = 26 px
--p-radius-full9999px

--ui-field-md-shadow0 1px 2px rgb(10 13 20 / 0.03)
--ui-toggle-knob-shadow0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.1)
--ui-featured-neue-shadow0 1px 2px rgb(16 24 40 / 0.06), inset 0 -1px 1px rgb(16 24 40 / 0.06)
--ui-popover-shadow0 16px 32px -1px rgb(128 136 151 / 0.2)

Похожий проект