このリポジトリは、高度なツールとワークフローを備えたプロフェッショナルな開発環境で作業するReactジョブシミュレーターの一部です。小さなバグ修正から本格的な機能までのデザインに基づいてタスクを実装します。基本的に、プロのReactチームに参加した後にのみ経験する多くの実践的なことを学びます。
このアプリケーションは、SentryやRollbarに似たエラーロギングおよび監視ツールです。 Prolog.Profy.devでメインブランチの展開バージョンを見つけることができます。注:下のスクリーンショットに示すように、アプリを表示するには、右上隅の「ダッシュボード」リンクをクリックする必要があります。

コードベースを介したツアーのためにこのビデオをご覧ください。

このプロジェクトは、next.js、typescript、cypress、scssモジュールなどで構築されています。プロジェクトの作業を開始するには、最初にローカルマシンのリポジトリをクローンし、依存関係をインストールします。
npm install.env.templateファイルを.envという新しいファイルにコピーします。このファイルには、 dotenvパッケージを介してnext.jsによって注入される必要な環境変数が含まれています。
最後に、開発サーバーを実行します。
npm run devこれで、ブラウザでhttp:// localhost:3000を開くと、アプリケーションを確認できます。
このプロジェクトでは、Eslint、Stylelint、The Prettierなどのツールを使用しています。これらのツールを最大限に活用するには、対応する拡張機能をインストールすることをお勧めします。 VSコードの場合:それらは次のとおりです。
公式のStylelint拡張機能には、 settings.jsonファイルの調整が必要になる場合があります。箱から出ていない場合は、これらの行を追加してみてください。
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"stylelint.validate": ["css", "scss"],
私が非常に価値があると思う追加の拡張機能はそうです
コードスペルチェッカーgitlens svg github copilot(有料)
このプロジェクトは、サイプレステストでカバーされています。制作アプリのほとんどのテストは現在、Reactテストライブラリを使用して記述されていますが、サイプレスはテストを開始するための最良の選択肢です。テストを初めて使用する場合は、スタートは非常に面倒で、まったく新しい開発環境にいるように感じることがあります。
サイプレスにより、テストを開始するのがはるかに簡単になります。まだ新しいコーディングの方法に慣れる必要がありますが、その素晴らしいUIデバッグのおかげで、ブラウザから使用しているものと非常によく似ています。

ローカルマシンでサイプレステストを実行するには、このコマンドを使用してください。
npm run cypressストーリーブックは、コンポーネントを文書化し、視覚的に単独でテストするための優れたツールです。ストーリーブックの実行を開く
npm run storybook