VKGram — Веб-Клиент для Telegram в стиле VK

Просмотров статьи: 91

VKgram — веб-клиент Telegram, основанный на исходном коде Telegram Web K.

Попробовать: vkgram.defenders08.tech
Исходный код: https://github.com/Defenders08/vkgram

Возможности

  • Новости — лента публикаций и историй.
  • Сообщения — отдельный VK-подобный интерфейс для переписок.
  • Профили — страницы пользователей и каналов в стиле VK.
  • Друзья, группы и каналы — отдельные разделы и навигация.
  • Аудиозаписи — музыкальная библиотека с локальными папками и сортировкой треков.
  • Настройки VKgram — дополнительные настройки интерфейса и приложения.
  • Адаптивный интерфейс для компьютеров и мобильных устройств.

Запуск

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

Запустите проект в режиме разработки:
pnpm start

Статус проекта

VKgram находится в начальной стадии разработке. Важно! Это чистый вайбкод)
Некоторые разделы и функции продолжают дорабатываться, поэтому интерфейс и возможности проекта могут изменяться.

Роадмап (Что нужно сделать в ближайшее время)

  • Поддержка всех типов сообщений
  • Поддержка чатов с топиками
  • Полноценный поиск с оригинальным функционалом
  • Создания постов на странице каналов
  • Создание постов в прикреплённом канале (В разделе «Страница)
  • Брендинг + PWA

Что по безопасности: Ответ для обычных юзеров

Бекенд я не трогал. Вкграм это просто вёрстка которая работает поверх оригинального веб клиента тг.
По сути можно сказать что этим можно спокойно пользоваться. Я не трогал то — что могло бы сломать/внести критичные дыры
Опять же: Доверяй, но проверяй. Исходники я открою, если тут есть безопасники — я буду рад доп. аудиту кода. Можете так же спокойно свои инстансы поднимать (В том числе и локально)

Базовая структура репозитория

Основная структура Web K содержит несколько независимых областей:

src/
├── assets/
├── components/
├── config/
├── environment/
├── helpers/
├── hooks/
├── lib/
├── mock/
├── opus-recorder/
├── pages/
├── scripts/
├── scss/
├── solid/
├── stores/
├── tests/
├── vendor/
└── index.ts

OpenVK Mobile

VKgram добавляет отдельный namespace «VKGram» (src/vkgram/)

src/vkgram/
├── layouts/
│ ├── VKResponsiveLayout.tsx
│ ├── VKDesktopLayout.tsx
│ └── VKMobileLayout.tsx
│
├── components/
│ ├── VKHeader.tsx
│ ├── VKSidebar.tsx
│ └── VKMobileNav.tsx
│
└── styles/
└── vk-base.scss

VKgram отвечает за:

  • Layout
  • Navigation
  • UI components
  • Визуальную систему
  • Desktop UI
  • Mobile UI
  • Представление сообщений
  • Представление профилей
  • Представление групп
  • Представление каналов
  • Представление новостной ленты

Desktop Layout

Файл: src/vkgram/layouts/VKDesktopLayout.tsx
Базовая структура:

VKDesktopLayout
│
├── VKHeader
│
└── Desktop content layout
│
├── VKSidebar
│
└── Main content

Mobile Layout

Файл: src/vkgram/layouts/VKMobileLayout.tsx
Структура отличается от desktop:

VKMobileLayout
│
├── VKHeader
│
├── Main content
│
└── VKMobileNav

Форк Mrim-Web для работы с OpenVK