En

Описание и возможности CRYSTAL v2.0

Архитектура:

SPA, REST API, FSD.

Строение:

Full code | Package.json: frontend backend

Структура:

  • MongoDB v8.0.4
  • Express.js v4.21.2
  • React v19.0.0
  • Node.js v24.0.2
  • NPM v11.3.0
  • PM2 v5.4.3
  • Vite v6.1.0

Описание и возможности

Функционально, данная версия практически полностью идентична CRYSTAL v1.0, но обладает рядом ключевых улучшений:

  • 1. Улучшен UX/UI дизайн, для больших планшетных экранов (iPad Pro и подобные). Боковая навигационная панель, стала более компактной, что позволило увеличить область отображения основного контента:
    gif 2

    iPad Pro 13" 2025 (iOS v26, Safari)

  • 2. Mongoose был удалён и заменён нативным драйвером MongoDB.
  • 3. Схемы данных для всех коллекций (users, posts, likes, hashtags), определены с использованием стандарта JSON Schema и инициализируются в MongoDB с помощью оператора $jsonSchema. Такой подход обеспечивает согласованность и единую структуру для документов в коллекциях.
  • 4. Для хештегов и лайков были созданы отдельные коллекции с денормализацией и индексированием, что обеспечит более высокую производительность при большом объеме данных.
  • 5. Для поиска по контенту постов, используется полнотекстовый поиск MongoDB на основе оператора $text. Frontend (SearchPage.jsx, Search.jsx) | Backend (searchPosts):
    Демонстрация поисковой системы

    Демонстрация поисковой системы

  • 6. Добавлен статус пользователя online/offline. Логика реализована с помощью WebSocket (frontend | backend).
  • 7. В статусе пользователя (при offline), добавлен показ времени последнего посещения сайта.
  • 8. Multer заменен на Sharp. В sharp-upload.js были добавлены следующие механизмы управления загрузкой изображений и обеспечения кибербезопасности:

    — Ограничение одновременной обработки изображений (Semaphore)

    Для предотвращения перегрузки процессора во время ресурсоемкой обработки изображений, используется механизм семафора.

    — Ограничение частоты запросов (Rate Limiting)

    Для защиты от DDoS-атак и спама, используется ограничение количества запросов на загрузку с одного IP-адреса.

    — Ограничение размера загружаемого файла

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

    — Процесс валидации загружаемого файла

    После прохождения первичных проверок (Semaphore и Rate Limiting), загруженный файл подвергается двойной проверке (!isImageExtension и !isImageMime), чтобы гарантировать, что это действительно безопасное изображение. Система одновременно проверяет две независимые характеристики файла: расширение (проверка имени файла на наличие одного из разрешенных расширений: jpe?g|png|webp|gif) и MIME-тип, который должен соответствовать: image\/(jpeg|png|webp|gif). Если хотя бы одна из этих проверок не пройдена, файл переходит к специальной проверке GIF, и последующей функции isValidGif(fileBuffer), которая проверяет "Magic Bytes" в заголовке файла (GIF87a или GIF89a).

  • 9. GIF проходят санитизацию через специальную логику. Все изображения кроме GIF, конвертируются в WebP.
  • 10. Добавлена настройка интерфейса, которая позволяет скрыть все GIF изображения на сайте:
    скрин 3

    Скрытые GIF изображения, светлая тема

    скрин 4

    Скрытые GIF изображения, темная тема

  • 11. Добавлена возможность указать пол пользователя.
  • 12. На странице пользователя, добавлен раздел с подробной информацией о пользователе: пол, дата регистрации.
  • 13. Добавлена настройка конфиденциальности, которая позволяет скрыть пол.
  • 14. Для увеличения производительности, offset-пагинация была заменена на курсорную, в разделах вывода лайков пользователя, постов с определённым хештегом и поиске постов.
  • 15. Добавлена кнопка — 'Назад'.
  • 16. Добавлена логика удаления старых изображений у постов и пользователей: после удаления/замены изображений, после удаления пользователя или поста.
  • 17. Добавлена валидация хештегов в backend, которая не позволяет сохранять хештеги вида: ##Test, #Te#st, #Te?st и т.д. Проверка происходит с помощью регулярного выражения — /^[\p{L}0-9_-]+$/u (Разрешает любые буквы Unicode, цифры, дефис и нижнее подчеркивание). Так же, можно задать допустимое количество хештегов в одном посте и длину хештега с помощью констант: MAX_HASHTAGS_COUNT и MAX_HASHTAG_LENGTH. Если хештег не прошел проверку, он не попадает в базу данных, но при этом, пост создается и в его тексте будет невалидный хештег — #Te#st. После успешного прохождения проверки, хештег #Test добавляется в поле name коллекции hashtags, в нижнем регистре — test.
  • 18. Добавлена валидация хештегов в frontend. Для отображения в виде кликабельной ссылки, хештег должен пройти валидацию с помощью регулярного выражения — /^[\p{L}0-9_-]+$/u (Разрешает любые буквы Unicode, цифры, дефис и нижнее подчеркивание).
  • 19. Добавлено более информативное отображение даты создания и обновления поста в полной и превью версии. Форматирование даты происходит в специальном хуке — useFormattedPostDate, который выполняет локализованное форматирование даты и времени на двух языках (русском и английском) с использованием toLocaleDateString и toLocaleTimeString. Для английской локали используется 12-часовой формат (Jul 4, 2025 ∙ 10:45 PM), а для русской — 24-часовой (4 июля 2025 ∙ 22:45). Хук автоматически определяет текущий язык интерфейса через i18n.language и отображает год, только если дата относится к предыдущему году.
  • 20. Система кибербезопасности базы данных, соответствует CRYSTAL v1.0 (Production).

Демонстрация возможностей CRYSTAL v2.0

CRYSTAL тестируется в

BrowserStack

Поделиться

Копировать

USDT (TRON (TRC20)): TTvJdwtL3VAZKSHbYi8B2eQEQDxbHUD4Ka

POL (Polygon PoS): 0x97377684b9a589eca92e2c6c8430e6dcf2bae8c2

ETH (Base Mainnet): 0x97377684b9a589eca92e2c6c8430e6dcf2bae8c2

ETH (ERC20): 0x97377684b9a589eca92e2c6c8430e6dcf2bae8c2

BTC (BTC): 12GkhJZWrdn23PUerGerN7nSZXHwWGm59U

Похожие посты

Этот сайт использует файлы cookies. Нажимая кнопку 'Принять' или продолжая пользоваться сайтом, вы соглашаетесь на использование файлов cookies.