prolog app

Dieses Repository ist Teil des React -Jobsimulators, in dem Sie in einer professionellen Entwicklerumgebung mit erweiterten Werkzeugen und Workflows arbeiten. Sie implementieren Aufgaben basierend auf Designs von kleinen Fehlerbehebungen bis hin zu vollständigen Funktionen. Grundsätzlich lernen Sie eine Menge praktischer Dinge, die Sie normalerweise nur erleben, wenn Sie sich einem professionellen React-Team angeschlossen haben.

Die Anwendung

Die Anwendung ist ein Fehlerprotokollierungs- und Überwachungstool, ähnlich wie Sentry oder Rollbar. Sie finden eine bereitgestellte Version der Hauptzweig bei Prolog.profy.dev. Hinweis: Sie müssen in der oberen rechten Ecke auf den Link "Dashboard" klicken, um die App zu sehen, wie im Screenshot unten gezeigt.

Codebasis -Tour

Sehen Sie sich dieses Video für eine Tour durch die Codebasis an.

Erste Schritte

1. Klon und installieren

Dieses Projekt ist unter anderem mit Next.js, TypeScript, Cypress & SCSS -Modulen erstellt. Um an dem Projekt zu arbeiten, klonen Sie zunächst das Repository auf Ihrem lokalen Computer und installieren Sie die Abhängigkeiten.

npm install

2. CREATE .EnV -Datei

Kopieren Sie die Datei .env.template in eine neue Datei namens .env . Diese Datei enthält die erforderlichen Umgebungsvariablen, die von Next.js über das dotenv -Paket injiziert werden.

3.. Development Server ausführen

Schließlich führen Sie den Entwicklungsserver aus:

npm run dev

Jetzt können Sie http: // localhost: 3000 mit Ihrem Browser öffnen, um die Anwendung anzuzeigen.

Empfohlene VS -Code -Erweiterungen

Dieses Projekt verwendet Tools wie Eslint, Stylelint und schöner. Um das Beste aus diesen Werkzeugen zu nutzen, wird empfohlen, die entsprechenden Erweiterungen zu installieren. Für VS -Code sind dies:

• Eslint
• Stiftung
• Hübscher
• SCSS Intellisense (z.
• React CSS-Module (z. B. um die CSS-Klassendefinition mit CMD/Strg + Klick zu öffnen und vor nicht existierenden Klassennamen zu warnen)

Die offizielle Stylelint -Erweiterung erfordert möglicherweise eine gewisse Anpassung Ihrer settings.json -Datei. Wenn es nicht über die Box funktioniert, fügen Sie die folgenden Zeilen hinzu:

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

Zusätzliche Erweiterungen, die ich sehr wertvoll finde, sind

Code Zaubersprüche Gitlens SVG Github Copilot (bezahlt)

Tests

Dieses Projekt ist mit Zypressentests abgedeckt. Obwohl die meisten Tests für Produktions -Apps derzeit mit der React -Testbibliothek geschrieben werden, ist Cypress die beste Option, um mit dem Test zu beginnen. Wenn Sie neu im Testen sind, kann der Start sehr umständlich sein und sich in einer völlig neuen Entwicklerumgebung befinden.

Cypress erleichtert es viel einfacher, mit dem Testen zu beginnen. Sie müssen sich immer noch an die neue Art des Codierens gewöhnen, aber dank des fantastischen UI -Debugges ist es einfach und sehr ähnlich wie bei Ihrem Browser.

Um die Cypress -Tests auf Ihrem lokalen Computer auszuführen, verwenden Sie diesen Befehl:

npm run cypress

Storybook

Storybook ist ein großartiges Werkzeug, um Ihre Komponenten zu dokumentieren und isoliert visuell zu testen. Storybook Run zu öffnen

npm run storybook