Тестовое задание для поступления в FrontCloudCamp ⚡️

Требуется разработать форму отправки данных по готовому макету.

Технологии

React, TypeScript
react-hook-form, yup
Postcss, radix-ui/select, eslint-kit, stylelint, lefthook
@neodx/svg для генерации спрайта
firebase hosting

Запуск

Без docker

Для лучшего DX, советую использовать локально asdf и pnpm. Он автоматически подтянет нужную версию nodejs и pnpm с файла .tool-versions.

Для запуска данного демонстрационного приложения, установите зависимости. С помощью ниже приведенной команды:

pnpm install

После установки запустите приложение в development режиме, командой:

pnpm dev

Дальше перейдите по данному url http://localhost:5173, чтобы посмотреть результаты.

С помощью docker

Для этого варианта установки, необходим docker. Придерживайтесь ниже перечисленных команд.

docker-compose up -d

Подождите и посмотрите результат команды

docker ps

Результат должен выглядеть так:

$ docker ps

CONTAINER ID   IMAGE              COMMAND                   CREATED              STATUS              PORTS                               NAMES
7e34d10fef75   cloudru_frontend   "nginx -g 'daemon of…"    About a minute ago   Up About a minute   0.0.0.0:80->80/tcp, :::80->80/tcp   frontend

Перейдем по адресу http://localhost и увидим запущенное приложение.

Чтобы остановить запущенный контейнер выполните команду:

docker-compose down

Тестирование

Для тестирования используется @testing-library/react, vitest, jest-dom.

Чтобы запустить тесты:

pnpm test

Дополнения

OKLCH в CSS: почему ушли от RGB и HSL.
Структура - https://feature-sliced.design
Css media queries - https://drafts.csswg.org/mediaqueries/#mq-range-context

raidenmiro/cloudru