Описание и возможности 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 v23.6.1.
• PM2 v5.4.3.
• PNPM v10.5.2.
• Vite v6.1.0.

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

• 1. Регистрация/редактирование/удаление пользователя, изменение пароля.
• 2. Регистрация/аутентификация/авторизация и общая работа с запросами, построена на TanStack Query v5.
• 3. reCAPTCHA v3 при регистрации пользователя.
• 4. Аватар, баннер, описание и возможность создания уникального Id пользователя.
• 5. Имя пользователя может быть с любыми символами и эмодзи, необязательно вводить фамилию.
• 6. Регистрация пользователя с проверкой на уже имеющиеся в базе данных — email и Id, без учета регистра букв.
• 7. При регистрации необязательно вводить Id и имя. При отсутствии id и имени, id создается автоматически с помощью — Nano ID, а имя остается пустым.
• 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. Система хештегов. Отдельная страница для определенного хештега. Хештеги сортируются без учета регистра, например при создании хештега — ‘CRYSTAL’, последующие хештеги с именами — ‘Crystal’ и ‘CRYstal’, будут сортироваться в блоке рекомендуемых хештегов под именем — ‘CRYSTAL’.
• 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. В проекте используется только чистый JSX и CSS, нет шаблонизаторов для вёрстки: Bootstrap, MUI и т.д. В каждом компоненте есть — module.css.