Stormic

В рамках последних обновлений я значительно улучшил функциональность профиля пользователя в своём приложении на базе Next.js, Tailwind CSS, Radix UI и Prisma. Ниже рассказываю, что было реализовано, какие задачи решены и как это повлияло на пользовательский опыт.

📸 Загрузка аватара и обновление профиля

✅ Что сделано:

• Добавлена возможность загрузки аватара пользователя через новую функцию updateUserAvatar.
• Использован пакет @radix-ui/react-avatar для управления отображением аватаров.
• Обновлена модель User в Prisma schema:
  • Поле fullName теперь уникальное.
  • Добавлено новое поле telegram для связи.
  • Поле fullName теперь уникальное.
  • Добавлено новое поле telegram для связи.
• В updateUserInfo теперь также можно сохранять информацию пользователя (О себе).

🔒 Валидация данных:

• Использованы Zod-схемы для валидации всех форм профиля (настройки, соцсети и др.).

🌐 Социальные ссылки и улучшения интерфейса

✨ Новый функционал:

• Создан хук useProfileSocialForm — упрощает управление полями с социальными ссылками.
• Расширена страница профиля: теперь отображаются дополнительные поля пользователя (bio, Telegram, и др.).

🎨 Обновления в UI:

• Обновлены компоненты ProfileSettingsPage и ProfileSettingsSocial — теперь код более структурирован и читаем.
• Удалён устаревший app-sidebar и заменён на адаптированный admin-sidebar для панели администратора.
• Иконки в профиле теперь отображаются без прозрачности (opacity), улучшена читаемость и контраст.

🧑‍💻 Пользовательский опыт

Улучшения:

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