Описание и возможности 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. Registration / logIn / logOut / authorization в frontend, а также общая работа с запросами, реализована на TanStack Query v5.

• 2. Регистрация/редактирование/удаление пользователя, изменение пароля.
• 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. Валидация формы входа, в frontend и backend, включающая: проверку на количество вводимых символов, правильный формат email, проверку верного email и пароля.
• 31. Валидация формы регистрации, в frontend и backend, включающая: проверку на количество вводимых символов, правильный формат email, проверку на уже существующие email и ID.
• 32. Валидация размера текста и заголовка, при создании и редактировании поста, в frontend и backend.
• 33. Автообновление устаревших данных на странице, если пользователь покидает вкладку сайта, а потом опять возвращается. Реализовано с помощью - 'refetchOnWindowFocus: true' в TanStack Query v5.
• 34. Поддержка протокола HTTP/2.
• 35. Отображение loader, при загрузке пользователей, постов и т.д.
• 36. Работа с запросами на низком уровне, реализована через нативный Fetch API, без использования сторонних библиотек. Для унификации логики, создан - requestManager.