BranchesTags

Repository files navigation

Tracker APP 🚀 ReactMastery.Dev

Application Tracker de temps

Module de la formation React Mastery. Module application tracker de temps

Apprendre ReactApprendre React

Build StatusGPL 3.0 LicenseNetlify Status

Les prérequis

  • Les fondamentaux de React GitHub

Configuration requise

  • git v2.13 ou supérieure
  • NodeJS12 || 14 || 15 || 16
  • npm v6 ou supérieure

Ces executables doivent etre inclus votre PATH. Pour vérifier qu'ils sont corretement installés et configuré vous pouvez executer :

git --version
node --version
npm --version

En cas de difficulté pour modifier la variable d'environnement PATH sur votre machine, vous pouvez consulter windows or mac/linux.

Installation

Si vous voulez modifier et commiter vos modification sur ce repo (notes etc ...), vous pouvez faire un fork sur votre github (au autre).

Après avoir installé et configuré les bonnes versions sur votre machine, vous pouvez executer cette commande pour pour demarrer la configuration du projet :

git clone https://github.com/MikeCodeur/react-tracker-app
cd react-tracker-app
npm run init

La plupart des problèmes de la commande npm run init sont dus aux varialbes d'environnement PATH

Si vous avez une erreur, lisez le message d'erreur et essayer de corriger. Si vous ne trouvez pas de solution vous pouvez ouvrir un ticket en donnant le résultat de la console

Si le script de setup pose problème vous pouvez simplement executer les deux commandes suivantes :

npm install
npm run validate

Si vous maitriser Docker 🐳 vous pouvez démarrer le projet :

docker-compose up

Il est recommandé de faire les exercices en local, mais en cas de difficulté il est egalement possible de démarrer le projet sur Codesandbox.

Démarrer l'application

Pour demarrer l'application, exécuter:

npm start

Changer d'exercice

Changer d'exercice, exécuter:

node go

L'application est basé sur react-create-app et react-scripts.

Vous pouvez aussi acceder au déploiement déploiement sur Netlify.

Executer les tests

npm test

Cela va démarrer Jest. Les tests sont là pour vous aider a atteindre la version finale, mais parfois vous pouvez réuissir l'exercice and le test peut échouer car vous avez implémenter d'une manière différente.

Les exercices

  • src/exercise/00.md: Explications, Instructions de l'exercice, bonus
  • src/exercise/00.js: L'exercise avec des indications
  • src/__tests__/00.js: Tests
  • src/final/00.js: Version finale
  • src/final/00.bonus-0.js: Version finale avec bonus

Le but de l'exercice n'est pas de tout voir et de retenir par coeur. Le but est de se poser les bonnes questions pour arriver au résultat.

Emojis Importants 🐶 📝 🤖 🚀 🐜 📑 ⛏️ 👨‍✈️ 🚨

Les exercices contiennent des commentaires pour vous aider à avancer. Ces emojis sont la pour vous aider sur différents aspects.

  • Mowgli le Chien 🐶 te dira quand il y a quelque chose de spécifique que tu dois faire.
  • Jack le Carnet de note 📝 va t'encourager à prendre des notes sur l'avancement
  • Ash le Robot 🤖 te donnera des conseils spécifiques (et parfois du code en cours de route).
  • Julia la roquette 🚀 te propulsera encore plus loin en te donnant des défis supplémentaires que tu peux relever dès que tu termines les exercices.
  • Dany la Fourmis 🐜 te donnera des informations utiles/des notes sur les meilleures pratiques et un lien pour pour me donner ton retour sur chaque module.
  • Dominic le Document 📑 te donnera des liens vers de la documentation utile
  • Hulk le Marteau ⛏️ va traîner partout où tu as besoin de detruire des trucs (supprimer le code)
  • Hugo le chef de projet 👨‍✈️ va t'aider sur les spécifications du projet
  • Robert l'Alerte 🚨 apparaîtra occasionnellement dans les échecs des tests avec des explications potentielles pour lesquelles les tests échouent.

Contributeurs

Merci aux contributeurs (contributeurs):


Mike Codeur
💻📖🚇⚠️

Ce projet suit les specifications all-contributors . Toutes les contributions sont les bienvenues!

🐜 Donner un retour

Tous les exercices ont un lien de feedback

A la fin de l'exercice, tu peux aller à cette adresse pour nous donner ton avis ! https://go.mikecodeur.com/cours-react-avis

About

React Tracker App - Application de la formation React Mastery

go.mikecodeur.com/react-mastery

Topics

mikecodeurreacttracker-application

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Tracker APP 🚀 ReactMastery.Dev

Application Tracker de temps


Module de la formation React Mastery. Module application tracker de temps 
Apprendre ReactApprendre React
Build StatusGPL 3.0 LicenseNetlify Status
Les prérequis
  • Les fondamentaux de React
GitHub
Configuration requise
  • git v2.13 ou supérieure
  • NodeJS12 || 14 || 15 || 16
  • npm v6 ou supérieure
Ces executables doivent etre inclus votre PATH. Pour vérifier qu'ils sont
corretement installés et configuré vous pouvez executer :
git --version
node --version
npm --version
En cas de difficulté pour modifier la variable d'environnement PATH sur votre
machine, vous pouvez consulter windows or mac/linux.
Installation
Si vous voulez modifier et commiter vos modification sur ce repo (notes etc
...), vous pouvez faire un
fork
sur votre github (au autre).
Après avoir installé et configuré les bonnes versions sur votre machine, vous
pouvez executer cette commande pour pour demarrer la configuration du projet :
git clone https://github.com/MikeCodeur/react-tracker-app
cd react-tracker-app
npm run init

La plupart des problèmes de la commande npm run init sont dus aux varialbes
d'environnement PATH
Si vous avez une erreur, lisez le message d'erreur et essayer de corriger. Si
vous ne trouvez pas de solution vous pouvez ouvrir un ticket en donnant
le résultat de la console
Si le script de setup pose problème vous pouvez simplement executer les deux
commandes suivantes :
npm install
npm run validate

Si vous maitriser Docker 🐳
vous pouvez démarrer le projet :
docker-compose up

Il est recommandé de faire les exercices en local, mais en cas de difficulté il
est egalement possible de démarrer le projet sur
Codesandbox.
Démarrer l'application
Pour demarrer l'application, exécuter:
npm start
Changer d'exercice
Changer d'exercice, exécuter:
node go
L'application est basé sur react-create-app et
react-scripts.
Vous pouvez aussi acceder au déploiement
déploiement sur Netlify.
Executer les tests
npm test
Cela va démarrer Jest. Les tests sont là pour vous aider a
atteindre la version finale, mais parfois vous pouvez réuissir l'exercice and
le test peut échouer car vous avez implémenter d'une manière différente.
Les exercices
  • src/exercise/00.md: Explications, Instructions de l'exercice, bonus
  • src/exercise/00.js: L'exercise avec des indications
  • src/__tests__/00.js: Tests
  • src/final/00.js: Version finale
  • src/final/00.bonus-0.js: Version finale avec bonus
Le but de l'exercice n'est pas de tout voir et de retenir par coeur. Le but
est de se poser les bonnes questions pour arriver au résultat.
Emojis Importants 🐶 📝 🤖 🚀 🐜 📑 ⛏️ 👨‍✈️ 🚨
Les exercices contiennent des commentaires pour vous aider à avancer. Ces emojis
sont la pour vous aider sur différents aspects.
  • Mowgli le Chien 🐶 te dira quand il y a quelque chose de spécifique que tu
dois faire.
  • Jack le Carnet de note 📝 va t'encourager à prendre des notes sur
l'avancement
  • Ash le Robot 🤖 te donnera des conseils spécifiques (et parfois du code en
cours de route).
  • Julia la roquette 🚀 te propulsera encore plus loin en te donnant des
défis supplémentaires que tu peux relever dès que tu termines les exercices.
  • Dany la Fourmis 🐜 te donnera des informations utiles/des notes sur les
meilleures pratiques et un lien pour pour me donner ton retour sur chaque
module.
  • Dominic le Document 📑 te donnera des liens vers de la documentation utile
  • Hulk le Marteau ⛏️ va traîner partout où tu as besoin de detruire des
trucs (supprimer le code)
  • Hugo le chef de projet 👨‍✈️ va t'aider sur les spécifications du projet
  • Robert l'Alerte 🚨 apparaîtra occasionnellement dans les échecs des tests
avec des explications potentielles pour lesquelles les tests échouent.
Contributeurs
Merci aux contributeurs
(contributeurs):

Mike Codeur
💻📖🚇⚠️
Ce projet suit les specifications
all-contributors .
Toutes les contributions sont les bienvenues!
🐜 Donner un retour
Tous les exercices ont un lien de feedback
A la fin de l'exercice, tu peux aller à cette adresse pour nous donner ton avis
! https://go.mikecodeur.com/cours-react-avis
About
React Tracker App - Application de la formation React Mastery
go.mikecodeur.com/react-mastery
Topics
mikecodeurreacttracker-application
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Tracker APP 🚀 ReactMastery.Dev

Application Tracker de temps


Module de la formation React Mastery. Module application tracker de temps 
Apprendre ReactApprendre React
Build StatusGPL 3.0 LicenseNetlify Status
Les prérequis
  • Les fondamentaux de React
GitHub
Configuration requise
  • git v2.13 ou supérieure
  • NodeJS12 || 14 || 15 || 16
  • npm v6 ou supérieure
Ces executables doivent etre inclus votre PATH. Pour vérifier qu'ils sont
corretement installés et configuré vous pouvez executer :
git --version
node --version
npm --version
En cas de difficulté pour modifier la variable d'environnement PATH sur votre
machine, vous pouvez consulter windows or mac/linux.
Installation
Si vous voulez modifier et commiter vos modification sur ce repo (notes etc
...), vous pouvez faire un
fork
sur votre github (au autre).
Après avoir installé et configuré les bonnes versions sur votre machine, vous
pouvez executer cette commande pour pour demarrer la configuration du projet :
git clone https://github.com/MikeCodeur/react-tracker-app
cd react-tracker-app
npm run init

La plupart des problèmes de la commande npm run init sont dus aux varialbes
d'environnement PATH
Si vous avez une erreur, lisez le message d'erreur et essayer de corriger. Si
vous ne trouvez pas de solution vous pouvez ouvrir un ticket en donnant
le résultat de la console
Si le script de setup pose problème vous pouvez simplement executer les deux
commandes suivantes :
npm install
npm run validate

Si vous maitriser Docker 🐳
vous pouvez démarrer le projet :
docker-compose up

Il est recommandé de faire les exercices en local, mais en cas de difficulté il
est egalement possible de démarrer le projet sur
Codesandbox.
Démarrer l'application
Pour demarrer l'application, exécuter:
npm start
Changer d'exercice
Changer d'exercice, exécuter:
node go
L'application est basé sur react-create-app et
react-scripts.
Vous pouvez aussi acceder au déploiement
déploiement sur Netlify.
Executer les tests
npm test
Cela va démarrer Jest. Les tests sont là pour vous aider a
atteindre la version finale, mais parfois vous pouvez réuissir l'exercice and
le test peut échouer car vous avez implémenter d'une manière différente.
Les exercices
  • src/exercise/00.md: Explications, Instructions de l'exercice, bonus
  • src/exercise/00.js: L'exercise avec des indications
  • src/__tests__/00.js: Tests
  • src/final/00.js: Version finale
  • src/final/00.bonus-0.js: Version finale avec bonus
Le but de l'exercice n'est pas de tout voir et de retenir par coeur. Le but
est de se poser les bonnes questions pour arriver au résultat.
Emojis Importants 🐶 📝 🤖 🚀 🐜 📑 ⛏️ 👨‍✈️ 🚨
Les exercices contiennent des commentaires pour vous aider à avancer. Ces emojis
sont la pour vous aider sur différents aspects.
  • Mowgli le Chien 🐶 te dira quand il y a quelque chose de spécifique que tu
dois faire.
  • Jack le Carnet de note 📝 va t'encourager à prendre des notes sur
l'avancement
  • Ash le Robot 🤖 te donnera des conseils spécifiques (et parfois du code en
cours de route).
  • Julia la roquette 🚀 te propulsera encore plus loin en te donnant des
défis supplémentaires que tu peux relever dès que tu termines les exercices.
  • Dany la Fourmis 🐜 te donnera des informations utiles/des notes sur les
meilleures pratiques et un lien pour pour me donner ton retour sur chaque
module.
  • Dominic le Document 📑 te donnera des liens vers de la documentation utile
  • Hulk le Marteau ⛏️ va traîner partout où tu as besoin de detruire des
trucs (supprimer le code)
  • Hugo le chef de projet 👨‍✈️ va t'aider sur les spécifications du projet
  • Robert l'Alerte 🚨 apparaîtra occasionnellement dans les échecs des tests
avec des explications potentielles pour lesquelles les tests échouent.
Contributeurs
Merci aux contributeurs
(contributeurs):

Mike Codeur
💻📖🚇⚠️
Ce projet suit les specifications
all-contributors .
Toutes les contributions sont les bienvenues!
🐜 Donner un retour
Tous les exercices ont un lien de feedback
A la fin de l'exercice, tu peux aller à cette adresse pour nous donner ton avis
! https://go.mikecodeur.com/cours-react-avis
About
React Tracker App - Application de la formation React Mastery
go.mikecodeur.com/react-mastery
Topics
mikecodeurreacttracker-application
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Tracker APP 🚀 ReactMastery.Dev

Application Tracker de temps


Module de la formation React Mastery. Module application tracker de temps 
Apprendre ReactApprendre React
Build StatusGPL 3.0 LicenseNetlify Status
Les prérequis
  • Les fondamentaux de React
GitHub
Configuration requise
  • git v2.13 ou supérieure
  • NodeJS12 || 14 || 15 || 16
  • npm v6 ou supérieure
Ces executables doivent etre inclus votre PATH. Pour vérifier qu'ils sont
corretement installés et configuré vous pouvez executer :
git --version
node --version
npm --version
En cas de difficulté pour modifier la variable d'environnement PATH sur votre
machine, vous pouvez consulter windows or mac/linux.
Installation
Si vous voulez modifier et commiter vos modification sur ce repo (notes etc
...), vous pouvez faire un
fork
sur votre github (au autre).
Après avoir installé et configuré les bonnes versions sur votre machine, vous
pouvez executer cette commande pour pour demarrer la configuration du projet :
git clone https://github.com/MikeCodeur/react-tracker-app
cd react-tracker-app
npm run init

La plupart des problèmes de la commande npm run init sont dus aux varialbes
d'environnement PATH
Si vous avez une erreur, lisez le message d'erreur et essayer de corriger. Si
vous ne trouvez pas de solution vous pouvez ouvrir un ticket en donnant
le résultat de la console
Si le script de setup pose problème vous pouvez simplement executer les deux
commandes suivantes :
npm install
npm run validate

Si vous maitriser Docker 🐳
vous pouvez démarrer le projet :
docker-compose up

Il est recommandé de faire les exercices en local, mais en cas de difficulté il
est egalement possible de démarrer le projet sur
Codesandbox.
Démarrer l'application
Pour demarrer l'application, exécuter:
npm start
Changer d'exercice
Changer d'exercice, exécuter:
node go
L'application est basé sur react-create-app et
react-scripts.
Vous pouvez aussi acceder au déploiement
déploiement sur Netlify.
Executer les tests
npm test
Cela va démarrer Jest. Les tests sont là pour vous aider a
atteindre la version finale, mais parfois vous pouvez réuissir l'exercice and
le test peut échouer car vous avez implémenter d'une manière différente.
Les exercices
  • src/exercise/00.md: Explications, Instructions de l'exercice, bonus
  • src/exercise/00.js: L'exercise avec des indications
  • src/__tests__/00.js: Tests
  • src/final/00.js: Version finale
  • src/final/00.bonus-0.js: Version finale avec bonus
Le but de l'exercice n'est pas de tout voir et de retenir par coeur. Le but
est de se poser les bonnes questions pour arriver au résultat.
Emojis Importants 🐶 📝 🤖 🚀 🐜 📑 ⛏️ 👨‍✈️ 🚨
Les exercices contiennent des commentaires pour vous aider à avancer. Ces emojis
sont la pour vous aider sur différents aspects.
  • Mowgli le Chien 🐶 te dira quand il y a quelque chose de spécifique que tu
dois faire.
  • Jack le Carnet de note 📝 va t'encourager à prendre des notes sur
l'avancement
  • Ash le Robot 🤖 te donnera des conseils spécifiques (et parfois du code en
cours de route).
  • Julia la roquette 🚀 te propulsera encore plus loin en te donnant des
défis supplémentaires que tu peux relever dès que tu termines les exercices.
  • Dany la Fourmis 🐜 te donnera des informations utiles/des notes sur les
meilleures pratiques et un lien pour pour me donner ton retour sur chaque
module.
  • Dominic le Document 📑 te donnera des liens vers de la documentation utile
  • Hulk le Marteau ⛏️ va traîner partout où tu as besoin de detruire des
trucs (supprimer le code)
  • Hugo le chef de projet 👨‍✈️ va t'aider sur les spécifications du projet
  • Robert l'Alerte 🚨 apparaîtra occasionnellement dans les échecs des tests
avec des explications potentielles pour lesquelles les tests échouent.
Contributeurs
Merci aux contributeurs
(contributeurs):

Mike Codeur
💻📖🚇⚠️
Ce projet suit les specifications
all-contributors .
Toutes les contributions sont les bienvenues!
🐜 Donner un retour
Tous les exercices ont un lien de feedback
A la fin de l'exercice, tu peux aller à cette adresse pour nous donner ton avis
! https://go.mikecodeur.com/cours-react-avis
About
React Tracker App - Application de la formation React Mastery
go.mikecodeur.com/react-mastery
Topics
mikecodeurreacttracker-application
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Tracker APP 🚀 ReactMastery.Dev

Application Tracker de temps


Module de la formation React Mastery. Module application tracker de temps 
Apprendre ReactApprendre React
Build StatusGPL 3.0 LicenseNetlify Status
Les prérequis
  • Les fondamentaux de React
GitHub
Configuration requise
  • git v2.13 ou supérieure
  • NodeJS12 || 14 || 15 || 16
  • npm v6 ou supérieure
Ces executables doivent etre inclus votre PATH. Pour vérifier qu'ils sont
corretement installés et configuré vous pouvez executer :
git --version
node --version
npm --version
En cas de difficulté pour modifier la variable d'environnement PATH sur votre
machine, vous pouvez consulter windows or mac/linux.
Installation
Si vous voulez modifier et commiter vos modification sur ce repo (notes etc
...), vous pouvez faire un
fork
sur votre github (au autre).
Après avoir installé et configuré les bonnes versions sur votre machine, vous
pouvez executer cette commande pour pour demarrer la configuration du projet :
git clone https://github.com/MikeCodeur/react-tracker-app
cd react-tracker-app
npm run init

La plupart des problèmes de la commande npm run init sont dus aux varialbes
d'environnement PATH
Si vous avez une erreur, lisez le message d'erreur et essayer de corriger. Si
vous ne trouvez pas de solution vous pouvez ouvrir un ticket en donnant
le résultat de la console
Si le script de setup pose problème vous pouvez simplement executer les deux
commandes suivantes :
npm install
npm run validate

Si vous maitriser Docker 🐳
vous pouvez démarrer le projet :
docker-compose up

Il est recommandé de faire les exercices en local, mais en cas de difficulté il
est egalement possible de démarrer le projet sur
Codesandbox.
Démarrer l'application
Pour demarrer l'application, exécuter:
npm start
Changer d'exercice
Changer d'exercice, exécuter:
node go
L'application est basé sur react-create-app et
react-scripts.
Vous pouvez aussi acceder au déploiement
déploiement sur Netlify.
Executer les tests
npm test
Cela va démarrer Jest. Les tests sont là pour vous aider a
atteindre la version finale, mais parfois vous pouvez réuissir l'exercice and
le test peut échouer car vous avez implémenter d'une manière différente.
Les exercices
  • src/exercise/00.md: Explications, Instructions de l'exercice, bonus
  • src/exercise/00.js: L'exercise avec des indications
  • src/__tests__/00.js: Tests
  • src/final/00.js: Version finale
  • src/final/00.bonus-0.js: Version finale avec bonus
Le but de l'exercice n'est pas de tout voir et de retenir par coeur. Le but
est de se poser les bonnes questions pour arriver au résultat.
Emojis Importants 🐶 📝 🤖 🚀 🐜 📑 ⛏️ 👨‍✈️ 🚨
Les exercices contiennent des commentaires pour vous aider à avancer. Ces emojis
sont la pour vous aider sur différents aspects.
  • Mowgli le Chien 🐶 te dira quand il y a quelque chose de spécifique que tu
dois faire.
  • Jack le Carnet de note 📝 va t'encourager à prendre des notes sur
l'avancement
  • Ash le Robot 🤖 te donnera des conseils spécifiques (et parfois du code en
cours de route).
  • Julia la roquette 🚀 te propulsera encore plus loin en te donnant des
défis supplémentaires que tu peux relever dès que tu termines les exercices.
  • Dany la Fourmis 🐜 te donnera des informations utiles/des notes sur les
meilleures pratiques et un lien pour pour me donner ton retour sur chaque
module.
  • Dominic le Document 📑 te donnera des liens vers de la documentation utile
  • Hulk le Marteau ⛏️ va traîner partout où tu as besoin de detruire des
trucs (supprimer le code)
  • Hugo le chef de projet 👨‍✈️ va t'aider sur les spécifications du projet
  • Robert l'Alerte 🚨 apparaîtra occasionnellement dans les échecs des tests
avec des explications potentielles pour lesquelles les tests échouent.
Contributeurs
Merci aux contributeurs
(contributeurs):

Mike Codeur
💻📖🚇⚠️
Ce projet suit les specifications
all-contributors .
Toutes les contributions sont les bienvenues!
🐜 Donner un retour
Tous les exercices ont un lien de feedback
A la fin de l'exercice, tu peux aller à cette adresse pour nous donner ton avis
! https://go.mikecodeur.com/cours-react-avis
About
React Tracker App - Application de la formation React Mastery
go.mikecodeur.com/react-mastery
Topics
mikecodeurreacttracker-application
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Tracker APP 🚀 ReactMastery.Dev

Application Tracker de temps


Module de la formation React Mastery. Module application tracker de temps 
Apprendre ReactApprendre React
Build StatusGPL 3.0 LicenseNetlify Status
Les prérequis
  • Les fondamentaux de React
GitHub
Configuration requise
  • git v2.13 ou supérieure
  • NodeJS12 || 14 || 15 || 16
  • npm v6 ou supérieure
Ces executables doivent etre inclus votre PATH. Pour vérifier qu'ils sont
corretement installés et configuré vous pouvez executer :
git --version
node --version
npm --version
En cas de difficulté pour modifier la variable d'environnement PATH sur votre
machine, vous pouvez consulter windows or mac/linux.
Installation
Si vous voulez modifier et commiter vos modification sur ce repo (notes etc
...), vous pouvez faire un
fork
sur votre github (au autre).
Après avoir installé et configuré les bonnes versions sur votre machine, vous
pouvez executer cette commande pour pour demarrer la configuration du projet :
git clone https://github.com/MikeCodeur/react-tracker-app
cd react-tracker-app
npm run init

La plupart des problèmes de la commande npm run init sont dus aux varialbes
d'environnement PATH
Si vous avez une erreur, lisez le message d'erreur et essayer de corriger. Si
vous ne trouvez pas de solution vous pouvez ouvrir un ticket en donnant
le résultat de la console
Si le script de setup pose problème vous pouvez simplement executer les deux
commandes suivantes :
npm install
npm run validate

Si vous maitriser Docker 🐳
vous pouvez démarrer le projet :
docker-compose up

Il est recommandé de faire les exercices en local, mais en cas de difficulté il
est egalement possible de démarrer le projet sur
Codesandbox.
Démarrer l'application
Pour demarrer l'application, exécuter:
npm start
Changer d'exercice
Changer d'exercice, exécuter:
node go
L'application est basé sur react-create-app et
react-scripts.
Vous pouvez aussi acceder au déploiement
déploiement sur Netlify.
Executer les tests
npm test
Cela va démarrer Jest. Les tests sont là pour vous aider a
atteindre la version finale, mais parfois vous pouvez réuissir l'exercice and
le test peut échouer car vous avez implémenter d'une manière différente.
Les exercices
  • src/exercise/00.md: Explications, Instructions de l'exercice, bonus
  • src/exercise/00.js: L'exercise avec des indications
  • src/__tests__/00.js: Tests
  • src/final/00.js: Version finale
  • src/final/00.bonus-0.js: Version finale avec bonus
Le but de l'exercice n'est pas de tout voir et de retenir par coeur. Le but
est de se poser les bonnes questions pour arriver au résultat.
Emojis Importants 🐶 📝 🤖 🚀 🐜 📑 ⛏️ 👨‍✈️ 🚨
Les exercices contiennent des commentaires pour vous aider à avancer. Ces emojis
sont la pour vous aider sur différents aspects.
  • Mowgli le Chien 🐶 te dira quand il y a quelque chose de spécifique que tu
dois faire.
  • Jack le Carnet de note 📝 va t'encourager à prendre des notes sur
l'avancement
  • Ash le Robot 🤖 te donnera des conseils spécifiques (et parfois du code en
cours de route).
  • Julia la roquette 🚀 te propulsera encore plus loin en te donnant des
défis supplémentaires que tu peux relever dès que tu termines les exercices.
  • Dany la Fourmis 🐜 te donnera des informations utiles/des notes sur les
meilleures pratiques et un lien pour pour me donner ton retour sur chaque
module.
  • Dominic le Document 📑 te donnera des liens vers de la documentation utile
  • Hulk le Marteau ⛏️ va traîner partout où tu as besoin de detruire des
trucs (supprimer le code)
  • Hugo le chef de projet 👨‍✈️ va t'aider sur les spécifications du projet
  • Robert l'Alerte 🚨 apparaîtra occasionnellement dans les échecs des tests
avec des explications potentielles pour lesquelles les tests échouent.
Contributeurs
Merci aux contributeurs
(contributeurs):

Mike Codeur
💻📖🚇⚠️
Ce projet suit les specifications
all-contributors .
Toutes les contributions sont les bienvenues!
🐜 Donner un retour
Tous les exercices ont un lien de feedback
A la fin de l'exercice, tu peux aller à cette adresse pour nous donner ton avis
! https://go.mikecodeur.com/cours-react-avis
About
React Tracker App - Application de la formation React Mastery
go.mikecodeur.com/react-mastery
Topics
mikecodeurreacttracker-application
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Tracker APP 🚀 ReactMastery.Dev

Application Tracker de temps


Module de la formation React Mastery. Module application tracker de temps 
Apprendre ReactApprendre React
Build StatusGPL 3.0 LicenseNetlify Status
Les prérequis
  • Les fondamentaux de React
GitHub
Configuration requise
  • git v2.13 ou supérieure
  • NodeJS12 || 14 || 15 || 16
  • npm v6 ou supérieure
Ces executables doivent etre inclus votre PATH. Pour vérifier qu'ils sont
corretement installés et configuré vous pouvez executer :
git --version
node --version
npm --version
En cas de difficulté pour modifier la variable d'environnement PATH sur votre
machine, vous pouvez consulter windows or mac/linux.
Installation
Si vous voulez modifier et commiter vos modification sur ce repo (notes etc
...), vous pouvez faire un
fork
sur votre github (au autre).
Après avoir installé et configuré les bonnes versions sur votre machine, vous
pouvez executer cette commande pour pour demarrer la configuration du projet :
git clone https://github.com/MikeCodeur/react-tracker-app
cd react-tracker-app
npm run init

La plupart des problèmes de la commande npm run init sont dus aux varialbes
d'environnement PATH
Si vous avez une erreur, lisez le message d'erreur et essayer de corriger. Si
vous ne trouvez pas de solution vous pouvez ouvrir un ticket en donnant
le résultat de la console
Si le script de setup pose problème vous pouvez simplement executer les deux
commandes suivantes :
npm install
npm run validate

Si vous maitriser Docker 🐳
vous pouvez démarrer le projet :
docker-compose up

Il est recommandé de faire les exercices en local, mais en cas de difficulté il
est egalement possible de démarrer le projet sur
Codesandbox.
Démarrer l'application
Pour demarrer l'application, exécuter:
npm start
Changer d'exercice
Changer d'exercice, exécuter:
node go
L'application est basé sur react-create-app et
react-scripts.
Vous pouvez aussi acceder au déploiement
déploiement sur Netlify.
Executer les tests
npm test
Cela va démarrer Jest. Les tests sont là pour vous aider a
atteindre la version finale, mais parfois vous pouvez réuissir l'exercice and
le test peut échouer car vous avez implémenter d'une manière différente.
Les exercices
  • src/exercise/00.md: Explications, Instructions de l'exercice, bonus
  • src/exercise/00.js: L'exercise avec des indications
  • src/__tests__/00.js: Tests
  • src/final/00.js: Version finale
  • src/final/00.bonus-0.js: Version finale avec bonus
Le but de l'exercice n'est pas de tout voir et de retenir par coeur. Le but
est de se poser les bonnes questions pour arriver au résultat.
Emojis Importants 🐶 📝 🤖 🚀 🐜 📑 ⛏️ 👨‍✈️ 🚨
Les exercices contiennent des commentaires pour vous aider à avancer. Ces emojis
sont la pour vous aider sur différents aspects.
  • Mowgli le Chien 🐶 te dira quand il y a quelque chose de spécifique que tu
dois faire.
  • Jack le Carnet de note 📝 va t'encourager à prendre des notes sur
l'avancement
  • Ash le Robot 🤖 te donnera des conseils spécifiques (et parfois du code en
cours de route).
  • Julia la roquette 🚀 te propulsera encore plus loin en te donnant des
défis supplémentaires que tu peux relever dès que tu termines les exercices.
  • Dany la Fourmis 🐜 te donnera des informations utiles/des notes sur les
meilleures pratiques et un lien pour pour me donner ton retour sur chaque
module.
  • Dominic le Document 📑 te donnera des liens vers de la documentation utile
  • Hulk le Marteau ⛏️ va traîner partout où tu as besoin de detruire des
trucs (supprimer le code)
  • Hugo le chef de projet 👨‍✈️ va t'aider sur les spécifications du projet
  • Robert l'Alerte 🚨 apparaîtra occasionnellement dans les échecs des tests
avec des explications potentielles pour lesquelles les tests échouent.
Contributeurs
Merci aux contributeurs
(contributeurs):

Mike Codeur
💻📖🚇⚠️
Ce projet suit les specifications
all-contributors .
Toutes les contributions sont les bienvenues!
🐜 Donner un retour
Tous les exercices ont un lien de feedback
A la fin de l'exercice, tu peux aller à cette adresse pour nous donner ton avis
! https://go.mikecodeur.com/cours-react-avis
About
React Tracker App - Application de la formation React Mastery
go.mikecodeur.com/react-mastery
Topics
mikecodeurreacttracker-application
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
Tracker APP 🚀 ReactMastery.Dev

Application Tracker de temps


Module de la formation React Mastery. Module application tracker de temps 
Apprendre ReactApprendre React
Build StatusGPL 3.0 LicenseNetlify Status
Les prérequis
  • Les fondamentaux de React
GitHub
Configuration requise
  • git v2.13 ou supérieure
  • NodeJS12 || 14 || 15 || 16
  • npm v6 ou supérieure
Ces executables doivent etre inclus votre PATH. Pour vérifier qu'ils sont
corretement installés et configuré vous pouvez executer :
git --version
node --version
npm --version
En cas de difficulté pour modifier la variable d'environnement PATH sur votre
machine, vous pouvez consulter windows or mac/linux.
Installation
Si vous voulez modifier et commiter vos modification sur ce repo (notes etc
...), vous pouvez faire un
fork
sur votre github (au autre).
Après avoir installé et configuré les bonnes versions sur votre machine, vous
pouvez executer cette commande pour pour demarrer la configuration du projet :
git clone https://github.com/MikeCodeur/react-tracker-app
cd react-tracker-app
npm run init

La plupart des problèmes de la commande npm run init sont dus aux varialbes
d'environnement PATH
Si vous avez une erreur, lisez le message d'erreur et essayer de corriger. Si
vous ne trouvez pas de solution vous pouvez ouvrir un ticket en donnant
le résultat de la console
Si le script de setup pose problème vous pouvez simplement executer les deux
commandes suivantes :
npm install
npm run validate

Si vous maitriser Docker 🐳
vous pouvez démarrer le projet :
docker-compose up

Il est recommandé de faire les exercices en local, mais en cas de difficulté il
est egalement possible de démarrer le projet sur
Codesandbox.
Démarrer l'application
Pour demarrer l'application, exécuter:
npm start
Changer d'exercice
Changer d'exercice, exécuter:
node go
L'application est basé sur react-create-app et
react-scripts.
Vous pouvez aussi acceder au déploiement
déploiement sur Netlify.
Executer les tests
npm test
Cela va démarrer Jest. Les tests sont là pour vous aider a
atteindre la version finale, mais parfois vous pouvez réuissir l'exercice and
le test peut échouer car vous avez implémenter d'une manière différente.
Les exercices
  • src/exercise/00.md: Explications, Instructions de l'exercice, bonus
  • src/exercise/00.js: L'exercise avec des indications
  • src/__tests__/00.js: Tests
  • src/final/00.js: Version finale
  • src/final/00.bonus-0.js: Version finale avec bonus
Le but de l'exercice n'est pas de tout voir et de retenir par coeur. Le but
est de se poser les bonnes questions pour arriver au résultat.
Emojis Importants 🐶 📝 🤖 🚀 🐜 📑 ⛏️ 👨‍✈️ 🚨
Les exercices contiennent des commentaires pour vous aider à avancer. Ces emojis
sont la pour vous aider sur différents aspects.
  • Mowgli le Chien 🐶 te dira quand il y a quelque chose de spécifique que tu
dois faire.
  • Jack le Carnet de note 📝 va t'encourager à prendre des notes sur
l'avancement
  • Ash le Robot 🤖 te donnera des conseils spécifiques (et parfois du code en
cours de route).
  • Julia la roquette 🚀 te propulsera encore plus loin en te donnant des
défis supplémentaires que tu peux relever dès que tu termines les exercices.
  • Dany la Fourmis 🐜 te donnera des informations utiles/des notes sur les
meilleures pratiques et un lien pour pour me donner ton retour sur chaque
module.
  • Dominic le Document 📑 te donnera des liens vers de la documentation utile
  • Hulk le Marteau ⛏️ va traîner partout où tu as besoin de detruire des
trucs (supprimer le code)
  • Hugo le chef de projet 👨‍✈️ va t'aider sur les spécifications du projet
  • Robert l'Alerte 🚨 apparaîtra occasionnellement dans les échecs des tests
avec des explications potentielles pour lesquelles les tests échouent.
Contributeurs
Merci aux contributeurs
(contributeurs):

Mike Codeur
💻📖🚇⚠️
Ce projet suit les specifications
all-contributors .
Toutes les contributions sont les bienvenues!
🐜 Donner un retour
Tous les exercices ont un lien de feedback
A la fin de l'exercice, tu peux aller à cette adresse pour nous donner ton avis
! https://go.mikecodeur.com/cours-react-avis
About
React Tracker App - Application de la formation React Mastery
go.mikecodeur.com/react-mastery
Topics
mikecodeurreacttracker-application
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages