/coinsfill-test

Primary LanguageTypeScript

Тестовое задание coinsfill

Для прохождения тестовго задания, необходимо сверстать по заданному макету простое мини Web приложение (сайт). Приложение должно иметь общедоступную форму входа и форму регистрации (email и пароль ) с валидацией данных. Также, должна быть часть приложения доступная только после входа, которая будет иметь форму для загрузки картинки (popup), и страницу отображающую эту картинку.

Картинка должна быть преобразована в Base64 и отправлена на back-end. Детали ниже

Требования:

  • ReactJS фреймворк NextJS в связке с TailwindCSS без TypeScrypt.
  • Разработка в режиме NextJS Page Routing
  • Сайт должен експортироватся в статичный
  • Сайт должен проверять размер и тип файла, в случае если не картинка или размер больше 5Мб писать соответсвующую ошибку

Приветствуется:

  • Использование шаблонов (layout)
  • Использование контекста
  • Проверка JWT токена на стороне клиента
  • Приветсвуется использование SWR

Точка входа https://test-task.test211.workers.dev , все запросы POST и PUT отправляют JSON

Регистация:

POST: /user
{
    email:<valid email>
    password: <password min 5 >
}

Ответ:

Успешный:
{
    ok:true,
    token: <JWT>
}

Ошибка:
{
    ok:false,
    errors:<Errors Object>
}

Вход:

POST: /login
{
    email:<valid email>
    password: <password min 5 >
}

Ответ:

Успешный:
{
    ok:true,
    token: JWT
}

Ошибка:
{
    ok:false,
    errors:<Errors Object>
}

Закрытая часть сайта.

Сайт должен понимать, что у клинета нет доступа к закрытой части и возвращать его на страницу/popup входа. Для доступа в закрытую часть необходимо в Headers запроса передавать заголовок с именем token-tt и значением token полученым из запроса регистрации или входа

Загрузка картинки:

PUT: /account/image
Header: 'token-tt':<token>
{
    image: <base64 представление картинки>
}

Ответ:

Успешный:
{
    ok:true,
}

Ошибка:
{
    ok:false,
    errors:<Errors Object>
}

Получение картинки:

GET: /account/image
Header: 'token-tt':<token>
{
    image: <base64 представление картинки>
}

Ответ:

Успешный:
{
    ok:true,
    image: <base64 представление картинки>
}

Ошибка или картинка не найдена:
{
    ok:false
}