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

Архитектура: SPA, REST API.

Строение:

Стек MERN (MongoDB, Express.js, React, Node.js).

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. Регистрация/редактирование/удаление пользователя, изменение пароля.
• 2. Регистрация/аутентификация/авторизация и общая работа с запросами, реализована на TanStack Query v5.
• 3. reCAPTCHA v3 при регистрации пользователя.
• 4. Аватар, баннер, описание и возможность создания уникального ID пользователя.
• 5. Имя пользователя может быть с любыми символами и эмодзи, необязательно вводить фамилию.
• 6. Регистрация пользователя с проверкой на уже имеющиеся в базе данных - email и ID, без учета регистра букв.
• 7. При регистрации необязательно вводить ID и имя. При отсутствии ID и имени, ID создается автоматически с помощью - Node.js crypto.randomBytes(16), а имя остается пустым.
• 8. Режим администратора (редактирование/удаление пользователей и постов).
• 9. Добавление/редактирование/удаление постов.
• 10. Счетчик просмотров поста.
• 11. Авторасширение текстового поля с помощью - react-textarea-autosize.
• 12. Сжатие загружаемых изображений в браузере, с помощью Browser Image Compression.
• 13. Автоматическое создание директорий для изображений, задание максимального размера и допустимых форматов с помощью Multer.
• 14. Infinite scroll постов c помощью Intersection Observer API и TanStack Query (useInfiniteQuery).
• 15. Система лайков и отдельная страница с понравившимися записями.
• 16. Система хештегов. Отдельная страница для определенного хештега.
• 17. Перевод на английский и русский языки, с использованием react-i18next.
• 18. Сортировка рекомендуемых постов с учетом Plurals.
• 19. Тёмная тема с использованием Redux Toolkit, data-атрибутов и css-переменных.
• 20. Валидация в frontend, с использованием Yup, иногда кастомная.
• 21. Валидация в backend, с использованием express-validator, иногда кастомная.
• 22. Авторизация через Cookie/JWT (HTTPonly, Secure, SameSite: Strict).
• 23. Контроль доступа к определенным страницам, редактированию пользователей и постов.
• 24. Настройка сервера Nginx с учетом безопасности и контроля доступа.
• 25. Установка и настройка автоматического продления, бесплатного SSL-сертификата - Let's Encrypt.
• 26. В frontend части, URL-адреса автоматически конвертируются в кликабельные ссылки с удобным отображением (https://shedov.top/ → shedov.top), а хештеги - в навигационные элементы, ведущие на соответствующую страницу. Знаки препинания (точки, запятые) исключаются из ссылки или хештега при построении маршрута, и при этом, остаются видны в тексте. Для этих функций создан хелпер - formatting-links-In-text.
• 27. В backend части, хэштеги извлекаются из текстов постов, с удалением знаков препинания (точек, запятых), приводятся к нижнему регистру и очищаются от дубликатов с помощью хелпера - extract-hashtags-from-text.
• 28. В проекте используется только чистый JSX и CSS, нет шаблонизаторов для вёрстки: Bootstrap, MUI и т.д. В каждом компоненте есть - module.css.
• 29. База данных состоит из двух коллекций - 'posts' и 'users', которые связаны через 'ref'.
• 30. Работа с запросами на низком уровне, реализована через нативный Fetch API, без использования сторонних библиотек. Для унификации логики, создан - requestManager.