iserdmi/yoldi

Test next.js task

Живое демо

https://yoldi-olive.vercel.app

Как запустить локально

$ mv env.local.example .env.local
$ pnpm i
$ pnpm dev

Что я такого сделал особенно хорошего

• Поле для ввода текста при редактирования профиля само вырастает по мере заполнения текстом
• Текст описания профиля может иметь переносы текста (один перенос строки) и абзацы (два переноса строки) и они будут отображаться на странице при просмотре
• После редактирования профиля модальник закрывается и выскакивает плашечка с подтверждением успеха
• Ну и просто всё аккуратно сделал
• Но особенная моя гордость, это утилита для формирования api src/api/utils.ts благодаря которой получаются супер-типизированные хелперы очень понятно описанные здесь src/api/index.ts
• Вообще если интересно посмотреть на другие мои подходы к архитектуре, то вот ссылка на репозиторий с моим фулстек кодом, по которому я сейчас пишу свой учебник по фулстек разработке: https://github.com/startupgrad/startup-fullstack

Что я не сделал

• Нежную подгрузку картинок. Сейчас они резко появляются
• Не подключил Sentry
• Не заморочился, чтобы при регистрации в 1password удобно сохранялся пароль
• Подходящия раскладка клавиатур на мобильниках (чтобы клавиуатура специально для email была к примеру)
• Надо всё же сделать редактирование профилей на мобилках отдельной страницей, иначе плашка нижняя может перекрывать кнопки
• Может ещё что-то...
• Я могу всё это сделать, но мне кажется, уже всё и так очень хорошо для первой итерации. Если бы было надо я бы доделал, но честно, можно даже такой маленький проект до бесконечности рифтовать. И я готов это делать, но всё же нужна обратная связь, где надо заканчивать. Я просто закончился разрабатывать в последний день перед дедлайном (нижний порог дедлайна) и сдаю. Теоретиечски у меня верхний порог дедлайна на 17 февраля. Как раз в реальной жизни бы столько и оставил на доработку после получения хоть какой-то обратной связи.

Что я обсудил бы, если бы делал эту работу бок о бок с командой

• Должна ли страница личного профиля быть по адресу /my-profile, или пусть она открывается по всеобщему пути /[slug]? В общем, сделал заготовку под оба варианта, но сейчас открываю по /[slug]. Зависит от бизнес требований, в общем.
• Должна ли на мобилке страница редактирования профиля быть также модалкой, или пусть на мобилке это будет именно отдельная страница, а на десктопе модальник? Сейчас сделал везде модальник, но поправить не долго.
• Могут ли бэкендеры открыть доступ к схеме их апи в формате JSON, чтобы я мог нагенерировать TS типы для фронта, а не писать их руками?
• Могут ли бэкендеры, пожалуйста, при регистрации и входе также возвращать и пользователя? Не хочется ещё один запрос делать на бэкенд
• Я создал scss миксины и переменные исходя из того, как они были определены в дизайне и использовал в тех же местах. Однако там такое дело, что есть к примеру переменная цвета $txt-color и она где-то используется для определения цвета текста, что логично, а где-то может быть и цветом фона, и цветом бэкграунда. И много таких переменных вроде бы не семантически использующих. Я бы обсудил это с дизайнером, и было бы вообще здорово в макетах иметь блок с китом, где были прописаны все переменные и миксины, так было бы и мне проще, и дизайнеру прощу. Впрочем я думаю, что вы так и делаете, просто в этом тестовом задании не предоставили.
• Почему везде паддинг с бока на мобилке 30 пикселей, а вот на странице со списком пользователей 20 пикселей? Это стратегия (там реально нужен меньший паддинг) или недочёт? Если что я всё это пишу без претензии, просто рассказываю, что хотелось бы обсудить
• Предлагаю на бэкенде сделать PATCH /api/profile принимающим параметры опционально. Чтобы можно было передать только то, что меняешь и это работало. Если хотим сбросить какое-то значение передаём null. А то вот я аватар загружаю, а приходится доставать все прочие поля и мержить с полем аватара. Причём почему-то обязательными являются только name и slug сейчас, остальные если не передать, то ошибк не будут, и они не изменятся, как и хотелось бы. В общем тут какое-то неоднозначное повоедение у этого эндпоинта.
• Нашёл баг бэкенда:
  • Текущее поведение:
    • Авторизируемся под любым пользователем.
    • Редактируем профиль и указываем слаг к примеру "xxx--example.com"
    • Разлогиниваемся
    • Регистрируемся под почтой [email protected]
    • Получаем Internal Server Error
  • Ожидаемое поведение:
    • Создастся пользователь без ошибки, а его slug будет к примеру "xxx--example.com1"
• Мне бы исходник для генерации фавыкона