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

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

SPA, REST API, FSD.

Строение:

Стек: MERN

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.

Общее описание

• 1. Frontend и backend части проекта, организованы по принципам Feature-Sliced Design - для обеспечения модульности, гибкости и масштабируемости проекта.
• 2. Регистрация/редактирование/удаление пользователя, изменение пароля.
• 3. Аватар, баннер, описание и возможность создания уникального ID пользователя.
• 4. Имя пользователя может быть с любыми символами и эмодзи, необязательно вводить фамилию.
• 5. Регистрация пользователя с проверкой на уже имеющиеся в базе данных - email и ID, без учета регистра букв.
• 6. Добавление/редактирование/удаление постов.
• 7. Счетчик просмотров поста.
• 8. Режим администратора (редактирование/удаление пользователей и постов).
• 9. Система лайков и отдельная страница с понравившимися записями.
• 10. Система хештегов. Отдельная страница для определенного хештега.
• 11. Реализовано удобное изменение пароля пользователя.

Frontend

• 1. Работа с запросами на низком уровне, реализована через нативный Fetch API, без использования сторонних библиотек. Для унификации логики, создан - httpClient.

• 2. Общая работа с запросами, реализована на TanStack Query v5.

• 3. Тёмная тема с использованием Redux Toolkit, data-атрибутов и css-переменных.
• 4. Перевод на английский и русский языки, с использованием react-i18next.
• 5. Сортировка рекомендуемых постов с учетом Plurals.
• 6. В постах и описании пользователя, URL-адреса автоматически конвертируются в кликабельные ссылки с удобным отображением (https://shedov.top/ → shedov.top), а хештеги - в навигационные элементы, ведущие на соответствующую страницу. Знаки препинания (точки, запятые) исключаются из ссылки или хештега при построении маршрута, и при этом, остаются видны в тексте. Для этих функций создан хелпер - formatLinksInText.
• 7. Автообновление устаревших данных на странице, если пользователь покидает вкладку сайта, а потом опять возвращается. Реализовано с помощью - 'refetchOnWindowFocus: true' в TanStack Query v5.
• 8. Infinite scroll постов c помощью Intersection Observer API и TanStack Query (useInfiniteQuery).
• 9. Сжатие загружаемых изображений в браузере, с помощью Browser Image Compression.
• 10. Авторасширение текстового поля с помощью - react-textarea-autosize, при создании/редактировании поста или добавлении описания пользователя.
• 11. Отображение loader, при загрузке пользователей, постов и т.д.
• 12. Отображание индикатора прогресса загрузки изображения, в виде заполняющейся полоски.
• 13. Реализовано отображение страницы - 404.
• 14. Валидация с использованием Yup, иногда кастомная.
• 15. Валидация формы регистрации пользователя, включающая: проверку на количество вводимых символов, правильный формат email, проверку на уже существующие email и ID.
• 16. Валидация формы входа пользователя, включающая: проверку на количество вводимых символов, правильный формат email, проверку верного email и пароля.
• 17. Валидация размера текста и заголовка, при создании и редактировании поста.
• 18. В проекте используется только чистый JSX и CSS, нет шаблонизаторов для вёрстки: Bootstrap, MUI и т.д. В каждом компоненте есть - module.css.

Backend

• 1. Реализация backend соответствует архитектурному стилю REST API - для логичной, предсказуемой и стандартизированной структуры запросов и маршрутов.
• 2. Cистема автоматического подключения роутов из модулей, позволяющая подключать маршруты без ручной регистрации.
• 3. При регистрации пользователя необязательно вводить ID и имя. При отсутствии ID и имени, ID создается автоматически с помощью - Node.js crypto.randomBytes(16), а имя остается пустым.
• 4. Автоматическое создание директорий для изображений, задание максимального размера и допустимых форматов с помощью Multer.
• 5. Хэштеги извлекаются из текстов постов, с удалением знаков препинания (точек, запятых), приводятся к нижнему регистру и очищаются от дубликатов с помощью хелпера - extract-hashtags-from-text.
• 6. Валидация с использованием express-validator, иногда кастомная.
• 7. Валидация формы регистрации пользователя, включающая: проверку на количество вводимых символов, правильный формат email, проверку на уже существующие email и ID.
• 8. Валидация формы входа пользователя, включающая: проверку на количество вводимых символов, правильный формат email, проверку верного email и пароля.
• 9. Валидация размера текста и заголовка, при создании и редактировании поста.

База данных

• 1. База данных организована в виде двух коллекций: users и posts. Между коллекциями установлена связь с помощью механизма ссылок - ref.
• 2. Для оптимизации производительности при фильтрации и сортировке, используются индексы: UserSchema.index({ createdAt: -1 }) и PostSchema.index({ createdAt: -1 }). Это значительно ускоряет выборку пользователей и постов по дате создания, особенно при работе с большими объёмами данных.

Безопасность

• 1. Для защиты приложения от несанкционированных кросс-доменных запросов, настроен механизм CORS.
• 2. Логика auth, реализована в контроллере auth.controller.js, с соблюдением современных требований к безопасности:
  - Перед сохранением в базу данных, пароли хэшируются с использованием bcrypt и соли, это гарантирует, что даже при утечке базы данных, злоумышленник не получит доступ к настоящим паролям.
  - После регистрации или входа в систему, пользователю выдается JWT-токен, который сохраняется в cookie с флагом HttpOnly, это исключает доступ к токену из JavaScript и защищает от XSS-атак.
  - Cookies помечаются атрибутами Secure (активен в production) и SameSite=Strict, что предотвращает их отправку при кросс-доменных запросах и защищает от CSRF-атак.
  
• 3. Промежуточный обработчик auth.middleware.js проверяет наличие и валидность токена в cookies на каждом защищённом маршруте. При отсутствии, повреждении или истечении токена, возвращается - 403 Forbidden.
• 4. reCAPTCHA v3 при регистрации пользователя.
• 5. Контроль доступа к определенным страницам, редактированию пользователей и постов.
• 6. Обработчик handleServerError автоматически определяет название контроллера, в котором возникла ошибка, извлекая его из стека вызова. Полный текст ошибки вместе с контекстом выводится в стандартную серверную консоль, облегчая отладку. В production-среде исключается утечка чувствительной информации: в ответе сервера возвращается только универсальное сообщение - «Server error» с HTTP-статусом 500, без деталей стека и кода, что защищает внутреннюю структуру сервера от потенциальных атак.
• 7. Настройка сервера Nginx с учетом безопасности.
• 8. Установка бесплатного SSL-сертификата Let's Encrypt с автоматическим продлением.
• 9. Включение поддержки протокола HTTP/2.

Описание CRYSTAL v1.0 (Production)

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

• 1. Безопасное подключение к базе данных.
  В production-среде, backend подключается к MongoDB, используя параметры аутентификации (user, password, authSource), что обеспечивает защиту от несанкционированного доступа.
• 2. Автоматическое переподключение к MongoDB.
  Реализован механизм автоматического переподключения к MongoDB при сбоях соединения. Поддерживается настройка количества попыток (maxRetries) и задержки (retryDelay) между ними, что повышает устойчивость приложения при временных сбоях в работе базы данных.
• 3. Расширенная конфигурация .env.
  В этой версии представлена более гибкая и подробная структура .env, обеспечивающая точную настройку в production и development средах.
• 4. Расширенное логирование подключения к MongoDB.
  Подключение к базе данных осуществляется с подробным логированием и статусными сообщениями - это упрощает отладку и мониторинг в production и development средах.
• 5. Усовершенствованный обработчик handleServerError.
  В development среде, HTTP-ответ возвращает расширенный объект ошибки, включающий: сообщение, стек вызовов и автоматически определённый контекст вызова.