#FullstackEasy : Ta feuille de route sans prise de tête pour maîtriser JS, TS, Node et React

OCL CodeOCL Code
6 min read

Tu veux apprendre JS, TypeScript, Node, React et tout le reste, mais t’es un peu perdu·e ?

  • [ ] Tu es full débutant·e (ici, t’es le/la bienvenu·e, il faut bien commencer quelque part…)
  • [ ] Tu reviens dans le game après une pause ?
  • [ ] Tu sautes d’un tuto à l’autre sans en voir le bout ?

Arrête tout, respire... Y a rien de sorcier, Harry ! Juste besoin d’un peu d’organisation.

J’ai préparé pour toi une checklist ultra-simple, dans l’ordre, avec des émojis mimi pour te motiver.

Copie-la, coche les cases, et avance pas à pas.

👉 À la fin, tu seras fullstack sans même t’en rendre compte !

Partage, like, fais le foufou-e/fofolle, amuse-toi ! (Cette roadmap très sérieuse - malgré les émojis et mes blagounettes – a aidé des dizaines de débutant-e-s à passer de "WTF?!" à "WTF, I'm Ze boss!").

PS : Partage aussi tes progrès avec le hashtag #FullstackEasy sur Twitter – je te suivrai !

✅ A bientôt collègue !

1. Fondamentaux de JavaScript (ES6+)

  1. [ ] Syntaxe de base Temps : ⏳ | Difficulté : 💪 | Priorité ⭐⭐⭐⭐⭐

    • Variables (let, const, var)
    • Boucles (for, while, do...while)
    • Conditions (if/else, switch)
    • Fonctions (déclaration, expression, paramètres)
    • Opérateurs (arithmétiques, logiques, de comparaison)

  2. [ ] Fonctions fléchées Temps : ⏳ | Difficulté : 💪 | Priorité ⭐⭐⭐⭐

    • Syntaxe des arrow functions
    • Différence entre function et arrow function
    • Portée de this

  3. [ ] Manipulation des tableaux Temps : ⏳⏳ | Difficulté : 💪💪 | Priorité ⭐⭐⭐⭐⭐

    • Méthodes : map, filter, reduce, find, sort
    • Spread operator (...)
    • Destructuring

  4. [ ] Objets et JSON Temps : ⏳ | Difficulté : 💪 | Priorité ⭐⭐⭐⭐⭐

    • Création et manipulation d'objets
    • Destructuring des objets
    • JSON.parse() et JSON.stringify()

  5. [ ] Promesses et Async/Await Temps : ⏳⏳⏳ | Difficulté : 💪💪 | Priorité ⭐⭐⭐⭐⭐

    • Création et utilisation des Promise
    • Chaînage avec .then() et .catch()
    • Syntaxe async/await
    • Gestion des erreurs

  6. [ ] Modules ES6 Temps : ⏳ | Difficulté : 💪 | Priorité ⭐⭐⭐⭐

    • Import/export (import, export)
    • Modules CommonJS vs ES6

  7. [ ] Gestion des erreurs Temps : ⏳ | Difficulté : 💪 | Priorité ⭐⭐⭐⭐

    • try/catch/finally
    • Erreurs personnalisées

  8. [ ] Classes et POO Temps : ⏳⏳ | Difficulté : 💪💪 | Priorité ⭐⭐⭐

    • Déclaration de classes
    • Héritage (extends)
    • Getters et setters
    • Méthodes statiques

  9. [ ] Closures et portée lexicale Temps : ⏳⏳ | Difficulté : 💪💪 | Priorité ⭐⭐

    • Comprendre les closures
    • Portée des variables (let, const, var)
    • IIFE (Immediately Invoked Function Expression)

2. TypeScript

  1. [ ] Typage de base Temps : ⏳⏳ | Difficulté : 💪 | Priorité ⭐⭐⭐⭐⭐

    • Types primitifs (string, number, boolean, etc.)
    • Interfaces et types personnalisés
    • Unions et intersections de types

  2. [ ] Génériques Temps : ⏳⏳ | Difficulté : 💪💪 | Priorité ⭐⭐⭐

    • Syntaxe des génériques
    • Utilisation dans les fonctions et classes

  3. [ ] Types avancés Temps : ⏳⏳⏳ | Difficulté : 💪💪💪 | Priorité ⭐⭐

    • Types conditionnels
    • Mapped types
    • Utility types (Partial, Pick, Omit)

  4. [ ] Configuration de TypeScript Temps : ⏳ | Difficulté : 💪 | Priorité ⭐⭐⭐

    • Fichier tsconfig.json
    • Options de compilation

  5. [ ] Décorateurs Temps : ⏳⏳ | Difficulté : 💪💪💪 | Priorité ⭐

    • Utilisation des décorateurs
    • Modification du comportement des classes

3. Node.js

  1. [ ] Modules Node.js Temps : ⏳⏳ | Difficulté : 💪 | Priorité ⭐⭐⭐⭐⭐

    • Modules natifs (fs, http, path)
    • Création de modules personnalisés

  2. [ ] NPM et Yarn Temps : ⏳ | Difficulté : 💪 | Priorité ⭐⭐⭐⭐⭐

    • Gestion des dépendances (npm install, yarn add)
    • Scripts NPM

  3. [ ] Création d'un serveur HTTP Temps : ⏳⏳ | Difficulté : 💪💪 | Priorité ⭐⭐⭐⭐

    • Module http
    • Routage de base

  4. [ ] Express.js Temps : ⏳⏳⏳ | Difficulté : 💪💪 | Priorité ⭐⭐⭐⭐⭐

    • Création d'une API REST
    • Middleware
    • Gestion des routes

  5. [ ] Base de données Temps : ⏳⏳⏳⏳ | Difficulté : 💪💪💪 | Priorité ⭐⭐⭐⭐

    • MongoDB (Mongoose)
    • PostgreSQL (TypeORM/Sequelize)
    • Redis

  6. [ ] Authentication Temps : ⏳⏳⏳ | Difficulté : 💪💪💪 | Priorité ⭐⭐⭐⭐

    • JWT
    • OAuth
    • Gestion des sessions

  7. [ ] Tests unitaires et d'intégration Temps : ⏳⏳ | Difficulté : 💪💪 | Priorité ⭐⭐⭐

    • Jest
    • Mocha/Chai

4. React

  1. [ ] Composants fonctionnels Temps : ⏳⏳ | Difficulté : 💪💪 | Priorité ⭐⭐⭐⭐⭐

    • Hooks (useState, useEffect, useContext)
    • Props et état local

  2. [ ] Gestion d'état Temps : ⏳⏳⏳ | Difficulté : 💪💪💪 | Priorité ⭐⭐⭐⭐

    • Redux
    • Context API
    • Zustand/Recoil

  3. [ ] React Router Temps : ⏳⏳ | Difficulté : 💪💪 | Priorité ⭐⭐⭐⭐

    • Routage dynamique
    • Navigation programmatique

  4. [ ] Formulaires Temps : ⏳⏳ | Difficulté : 💪💪 | Priorité ⭐⭐⭐⭐

    • React Hook Form
    • Formik

  5. [ ] Appels API Temps : ⏳⏳ | Difficulté : 💪💪 | Priorité ⭐⭐⭐⭐⭐

    • fetch
    • Axios

  6. [ ] Optimisation Temps : ⏳⏳⏳ | Difficulté : 💪💪💪 | Priorité ⭐⭐⭐

    • React.memo
    • useMemo et useCallback
    • Lazy loading

  7. [ ] Next.js Temps : ⏳⏳⏳ | Difficulté : 💪💪💪 | Priorité ⭐⭐⭐

    • Routing côté serveur
    • Génération statique
    • Optimisation SEO

5. Outils Complémentaires

  1. [ ] Git et GitHub Temps : ⏳⏳ | Difficulté : 💪 | Priorité ⭐⭐⭐⭐⭐

    • Commandes de base (git clone, git commit, git push)
    • Branches et pull requests
    • Gestion des conflits

  2. [ ] Markdown Temps : ⏳ | Difficulté : 💪 | Priorité ⭐⭐⭐

    • Syntaxe de base (titres, listes, liens)
    • Tableaux et images

  3. [ ] Docker Temps : ⏳⏳⏳ | Difficulté : 💪💪💪 | Priorité ⭐⭐

    • Conteneurisation
    • Docker Compose

  4. [ ] Webpack et Vite Temps : ⏳⏳ | Difficulté : 💪💪 | Priorité ⭐⭐

    • Configuration de base
    • Optimisation des bundles

  5. [ ] ESLint et Prettier Temps : ⏳ | Difficulté : 💪 | Priorité ⭐⭐⭐⭐

    • Configuration
    • Intégration avec les IDE

  6. [ ] CI/CD Temps : ⏳⏳ | Difficulté : 💪💪 | Priorité ⭐⭐

    • GitHub Actions
    • GitLab CI

6. Bonnes Pratiques et Optimisation

  1. [ ] Clean Code Temps : ⏳⏳ | Difficulté : 💪💪 | Priorité ⭐⭐⭐⭐

    • Principes SOLID
    • DRY et KISS

  2. [ ] Performance Temps : ⏳⏳⏳ | Difficulté : 💪💪💪 | Priorité ⭐⭐⭐

    • Lazy loading
    • Code splitting

  3. [ ] Sécurité Temps : ⏳⏳ | Difficulté : 💪💪 | Priorité ⭐⭐⭐⭐

    • Protection contre XSS et CSRF
    • Injection SQL

  4. [ ] Accessibilité Temps : ⏳⏳ | Difficulté : 💪💪 | Priorité ⭐⭐

    • Normes WCAG
    • ARIA (Accessible Rich Internet Applications)

  5. [ ] Documentation Temps : ⏳ | Difficulté : 💪 | Priorité ⭐⭐

    • JSDoc
    • Storybook

7. Projets Pratiques

  1. [ ] Application Full-Stack Temps : ⏳⏳⏳⏳⏳ | Difficulté : 💪💪💪 | Priorité ⭐⭐⭐⭐⭐

    • Frontend (React)
    • Backend (Node.js)

  2. [ ] Contribution Open Source Temps : ⏳⏳⏳ | Difficulté : 💪💪 | Priorité ⭐⭐

    • Trouver des projets
    • Soumettre des pull requests

  3. [ ] Portfolio Temps : ⏳⏳ | Difficulté : 💪💪 | Priorité ⭐⭐⭐⭐

    • Création d'un site vitrine
    • Présentation des projets

8. Veille Technologique

  1. [ ] Suivre les mises à jour Temps : ⏳ | Difficulté : 💪 | Priorité ⭐⭐

    • Blogs (HashNode.dev, Dev.to, Medium)
    • Newsletters

  2. [ ] Blogs et Conférences Temps : ⏳ | Difficulté : 💪 | Priorité ⭐

    • Conférences (React Europe, JSConf)
    • Podcasts et vidéos
0
Subscribe to my newsletter

Read articles from OCL Code directly inside your inbox. Subscribe to the newsletter, and don't miss out.

JavaScriptTypeScriptNode.jsReactfull stackFull Stack DevelopmentwebdevelopmentwebdevfrontendbackendFrontend Developmentbackend developmentscodinglearninglearn to code

Written by

OCL Code
OCL Code