prolog app

Этот репозиторий является частью симулятора работы React Job, где вы работаете в профессиональной среде разработчика с расширенными инструментами и рабочими процессами. Вы выполняете задачи на основе проектов, начиная с небольших исправлений ошибок до полномасштабных функций. По сути, вы изучаете многое из того, что вы обычно испытываете, только после того, как присоединяетесь к профессиональной команде React.

Приложение

Приложение представляет собой инструмент для регистрации и мониторинга ошибок, аналогичный Sentry или Rollbar. Вы можете найти развернутую версию основного филиала на ProLog.profy.dev. Примечание. Вы должны щелкнуть ссылку «Панель инструментов» в правом верхнем углу, чтобы увидеть приложение, как показано на скриншоте ниже.

Кодовая база тур

Посмотрите это видео для тура по кодовой базе.

Начиная

1. Клоуна и установка

Этот проект построен с модулями Next.js, TypeScript, Cypress & SCSS. Чтобы начать работу над проектом, сначала клонируйте репозиторий на вашей локальной машине и установите зависимости.

npm install

2. Create .env -файл

Скопируйте файл .env.template в новый файл с именем .env . Этот файл содержит требуемые переменные среды, которые вводят next.js через пакет dotenv .

3. Запуск сервера разработки

Наконец, запустите сервер разработки:

npm run dev

Теперь вы можете открыть http: // localhost: 3000 с вашим браузером, чтобы увидеть приложение.

Рекомендованные против расширения кода

В этом проекте используются такие инструменты, как Eslint, StyleLint и красивее. Чтобы максимально использовать эти инструменты, рекомендуется установить соответствующие расширения. Для VS -кода это:

• Эслинт
• Стилит
• Красивее
• SCSS Intellisense (например, для автоматического завершения переменных SCSS)
• React CSS-модули (например, чтобы открыть определение класса CSS с CMD/CTRL + Click и предупреждайте о несуществующих именах класса)

Официальное расширение StyleLelint может потребоваться некоторая корректировка вашего файла settings.json . Если он не работает из коробки, попробуйте добавить эти строки:

 "css.validate": false,
"less.validate": false,
"scss.validate": false,
"stylelint.validate": ["css", "scss"],

Дополнительные расширения, которые я нахожу очень ценными

Кодовая проверка орфографии gitlens svg github Copilot (оплаченный)

Тесты

Этот проект покрыт кипарисовыми тестами. Хотя большинство тестов для производственных приложений в настоящее время написаны с помощью библиотеки тестирования React, Cypress является лучшим вариантом для начала тестирования. Когда вы новичок в тестировании начала, может быть очень громоздким и чувствовать, что вы находитесь в совершенно новой среде разработчика.

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

Чтобы запустить тесты Cypress на вашей локальной машине, используйте эту команду:

npm run cypress

Сборник рассказов

Строительница - отличный инструмент для документирования ваших компонентов и визуально проверить их изолированно. Чтобы открыть сборник рассказов

npm run storybook