prolog app

Ce référentiel fait partie du simulateur de travail React où vous travaillez dans un environnement de développement professionnel avec des outils et des workflows avancés. Vous implémentez des tâches en fonction des conceptions à partir de petites corrections de bogues aux fonctionnalités complètes. Fondamentalement, vous apprenez une grande partie des choses que vous ne ressentez généralement qu'une fois que vous avez rejoint une équipe de réact professionnelle.

La demande

L'application est un outil de journalisation et de surveillance d'erreur similaire à Sentry ou Rollbar. Vous pouvez trouver une version déployée de la succursale principale de Prolog.Profy.dev. Remarque: vous devez cliquer sur le lien "Dashboard" dans le coin supérieur droit pour voir l'application comme indiqué dans la capture d'écran ci-dessous.

Visite de base

Regardez cette vidéo pour une tournée via la base de code.

Commencer

1. Clone & Installer

Ce projet est construit avec les modules Next.js, TypeScript, Cypress & SCSS, entre autres. Pour commencer à travailler sur le projet, clonez d'abord le référentiel sur votre machine locale et installez les dépendances.

npm install

2. Créer un fichier .env

Copiez le fichier .env.template dans un nouveau fichier appelé .env . Ce fichier contient les variables d'environnement requises qui sont injectées par Next.js via le package dotenv .

3. Exécutez le serveur de développement

Enfin, exécutez le serveur de développement:

npm run dev

Vous pouvez maintenant ouvrir http: // localhost: 3000 avec votre navigateur pour voir l'application.

Extensions de code recommandées vs

Ce projet utilise des outils comme Eslint, Stylelint et plus jolis. Pour tirer le meilleur parti de ces outils, il est recommandé d'installer les extensions correspondantes. Pour les codes vs, ce sont:

• Eslint
• Stylelint
• Plus joli
• SCSS Intellisense (par exemple pour la complétion automatique des variables SCSS)
• Modules REACT CSS (par exemple pour ouvrir la définition de classe CSS avec CMD / CTRL + cliquez et avertissez des noms de classe inexistants)

L'extension officielle Stylelint pourrait nécessiter un ajustement de votre fichier settings.json . Si cela ne fonctionne pas dans la boîte, essayez d'ajouter ces lignes:

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

Les extensions supplémentaires que je trouve très précieuses sont

CODE Spell Checker Gitlens SVG GitHub Copilot (Payé)

Tests

Ce projet est couvert de tests Cypress. Bien que la plupart des tests pour les applications de production soient actuellement écrits avec React Testing Library, Cypress est la meilleure option pour commencer les tests. Lorsque vous êtes nouveau dans le test, le début peut être très lourd et avoir l'impression d'être dans un tout nouvel environnement de développement.

Cypress facilite le début des tests. Vous devez toujours vous habituer à la nouvelle façon de coder, mais grâce à son génial débogage de l'interface utilisateur est facile et très similaire à ce que vous êtes utilisé à partir de votre navigateur.

Pour exécuter les tests Cypress sur votre machine locale, utilisez cette commande:

npm run cypress

Livre de contes

Le livre de contes est un excellent outil pour documenter vos composants et les tester visuellement de manière isolée. Pour ouvrir le livre de contes

npm run storybook