React - Annexe des Liens et Ressources

Dans la deuxième partie de ce fichier, j'ai mis la liste des technos que j'utilise aujourd'hui en prod / dans mon quotidien, et tout ce que je vous conseillerai à chaud comme ça, j'ai essayer de vous donner un maximum d'informations et un maximum de cas d'usage et les outils que j'utilise personnelement ;) !

React Core

Vite

🎯 Hooks - Documentation et Guides

Hooks de Base

Hooks de Performance

-> attention on optimise pas trop tot ! ça risque de créer des dingueries sinon !

Hooks de Gestion d'État

Hooks Avancés

-> utilisation carrément plus rare !

Hooks Personnalisés

🛠️ Outils et Écosystème

Routage

Next.js

Performance et Optimisation

📖 Guides et Tutoriels Avancés

Concepts Fondamentaux

Patterns et Bonnes Pratiques

Guides Hooks Avancés

🔧 Bibliothèques et Outils Utiles

Hooks Collections

Formulaires

API et Data Fetching

  • TanStack Query - Hooks pour l'API et cache
  • SWR - Alternative à TanStack Query
  • Apollo - GraphQL data fetching
  • USE FETCH OVER AXIOS ! si on a des besoins simple, fetch sera toujours mieux, et plus léger, si on commence à avoir des besoin complexes, on se dirigera vers des options plus optis et modernes, axios est rarement un très bon choix !

UI et Composants

🚀 Roadmaps et Apprentissage

Roadmaps

State of JS

🎨 Design et UX

Design Systems

Accessibilité

🔍 Debugging et Outils

Outils de Développement

Testing

📊 Performance et Monitoring

Performance

Monitoring

Mini tuto de veille :

Si vous souhaitez explorer des librairies particulières et répondre aux différents besoins que vous allez avoir professionnelement

  • Faites des recherches avec "Awesome librairie Github" sur google.
  • Si vous avez un doute tapez "what's the best framework js, reddit" : vous aurez une guerre interminable de gens qui veulent absolument avoir raison sur reddit, c'est très interessant car vous voyez la version hardcore de chaque extrême des pensées de chacun sur chaque frameworks / chaque technos, vous pouvez faire la même chose pour tout vos choix futurs et doutes, ça marche très bien
  • J'adoooore le "Roadmap.sh" qui permet d'avoir des directions à prendre
  • Checkez "app.daily.dev" pour faire de la veille
  • Baladez vous sur Youtube, il y a pleins de youtubeur chouette dans la tech, surtout chez les américains / anglais.

💼 La stack que j'utilise

Cette section regroupe les outils et bibliothèques utilisés de mon côté !

🚢 Infrastructure & Déploiement

  • Coolify - Self-hosted PaaS alternative à Vercel/Netlify
  • Dokploy - Open-source PaaS avec Docker ( alternative à coolify )
  • Homer - Dashboard pour services self-hosted
  • Cloudflare DNS - DNS management -> mes noms de domaines sont sur cloudflare
  • Cloudflare R2 - S3-compatible storage (gratuit jusqu'à 15GB) -> on met nos saves de coolify et tout ça là dessus ça fonctionne super bien, et c'est du storage vraiment pas cher
  • Cloudflare Tunnel - Expose local services -> utilisable pour exposer votre localhost au web, très utile pour utiliser les webhooks.
  • Ngrok - Tunneling pour dev local
  • Svix - Webhooks as a service

🗄️ Backend & Databases

  • Prisma - ORM TypeScript
  • Pocketbase - Backend-as-a-Service open-source ( CMS ) -> API EN 5s
  • Strapi - Headless CMS -> API EN 5s
  • Payload CMS - TypeScript-first CMS ( intégrer à NextJS ) -> API EN 5s
  • Apollo - GraphQL platform -> API EN 5s

🔐 Authentification & Sécurité

  • Better Auth - Modern auth library -> LA MEILLEURE solution pour du custom auth in app
  • Clerk - Authentication & user management -> si vous voulez faire une auth en 5s , avec un service ultra efficace et efficient ! Mon petit chouchou
  • Keycloak - Open-source identity management -> SSO open source !
  • Infisical - Secret management platform -> tout les passwords à un endroit, pour les applications, permet de faire de la rotation de .env et tout ça, au même endroit, sans devoir copier / coller les .env et tout ça ! ( hyper utile en équipe ! )
  • Vaultwarden - Self-hosted Bitwarden server -> permet de faire gestionnaire de mot de passe (comme dashlane par exemple )
  • CrowdSec - Collaborative security engine -> alternative à fail2ban, permet de faire de la sécurité sur les accès à un server, ban les spam et tout ça

📊 Monitoring & Analytics

  • Sentry - Error tracking & performance monitoring -> permet de track les erreurs de nos app
  • Umami - Privacy-focused analytics -> Google analytics mais en mieux !
  • Metabase - Open-source BI & analytics platform -> Donner un super dashboard pour les commerciaux et qu'ils peuvent check les données de la db sans faire chier les dev ! ( vraiment un banger )
  • Kuma Uptime - Self-hosted monitoring -> permet de gerer une page d'uptime et tracker les différentes app, savoir ce qui tourne et ce qui est down
  • BetterUptime - Uptime monitoring & status pages -> comme kuma, mais en SaaS ( payant )
  • LogRocket - Session replay (déjà mentionné)

🤖 AI & Automatisation

  • Vercel AI SDK - AI toolkit pour applications -> tip top pour gérer les requêtes vers des IA
  • NextLLM - LLM integration framework -> faire sa propre interface chatgpt like
  • n8n - Workflow automation -> automatisation
  • Postiz - Social media scheduling -> gérer pleins de réseaux sociaux et faire des multipost / multi réseaux

🎨 UI & Design Systems

  • Shadcn UI - Re-usable components -> mon chouchou de design
  • 21st.dev - Premium UI components -> pour trouver des banger déjà fait par des gens en terme de design, permet de partir sur des belles bases !
  • ReactBits - Pleins de composants archi stylés !
  • Acertinity - Pleins de composants archi stylés !
  • TailwindCSS - Utility-first CSS framework ( mon chouchou aussi )
  • Tailwind UI - Official Tailwind component library -> lib payante de tailwind
  • Headless UI - Unstyled accessible components -> super lib d'utilitaires !
  • Radix UI - Low-level UI primitives -> pareil, super lib d'utilitaires !
  • Chakra UI - Same -> pas mal de contenu !

🎬 Animation & Graphics

  • Motion - Modern animation library (Framer Motion) -> animation de fou
  • GSAP - Professional animation library -> pareil pleins d'animations
  • Lottie - JSON-based animations -> très poussés des animations, on peut faire du after effect -> web
  • Rive - Interactive vector animations -> animation banger premium ++++++ , rust etc
  • AOS - Animate On Scroll library -> transition de bloc et de pages
  • Three.js - 3D graphics library -> 3d , mais arhci difficile
  • React Three Fiber - React renderer pour Three.js -> amélioraiton de three js

📝 Formulaires & Validation

  • Zod - TypeScript-first schema validation - validation poussées des données, bonne pratique
  • Valibot - Alternative légère à Zod - très chouette aussi

🧪 Testing & Quality

  • Playwright - End-to-end testing ( le top du top de mon côté )
  • Cypress - E2E testing framework
  • Lighthouse - Performance auditing
  • Unlighthouse - Lighthouse scanning à l'échelle - pleins de lighthouse sur pleins de page d'un coup
  • IBM Accessibility Checker - Vérification accessibilité -> banger archi pas connu !
  • Wappalyzer - Technology profiler -> check les technos d'un site / app

🛠️ Outils de Développement

  • Prettier - Code formatter
  • ESLint - Linter JavaScript
  • Biome - Alternative à Prettier + ESLint ( ça a l'air d'être une folie ! )
  • Husky - Git hooks -> execution des hooks git, scripts quand on push / commits
  • Renovate - Dependency updates automation -> mise à jour automatique sur les dépendances
  • Lazygit - Terminal UI pour Git ( git en mode terminal mais + stylé )
  • Lazydocker - Terminal UI pour Docker ( docker terminal mais + stylé )
  • Insomnia - API client
  • Bruno - Open-source API client -> gérer des api call , mais sauvegarder sur des fichiers directement, et donc rendre l'utilsiation d'une api versionnable ! ( tests partageable )
  • Neovim - Éditeur de texte extensible -> si vous aimez les cartes graphiques (version hardcore de vim / d'un IDE )
  • Tmux - Terminal multiplexer -> plusieurs CLI en une seule fenetre
  • Obsidian - l'outil de prise de note de mon côté !
  • Syncthing - Synchro des fichiers ! ( j'ai un VPS chez netcup qui sync mes fichiers entre mon pc fixe, mon pc portable, et mon serveur, sur certains dossier uniquement ) 5€ j'ai un multi drive sans bug

📦 Build & Bundling

  • Vite -> il fait module bundler et opti aussi
  • Rollup - Module bundler -> dinguerie avec vite pour faire de l'opti d'app react

📧 Email & Communication

  • Resend - Email API pour développeurs -> SaaS de mail
  • Mailgun - Email delivery service -> SaaS de mail

🎯 Icônes & Assets

  • Lucide - Beautiful icon library -> pleins d'icones
  • Font Awesome - Icon library -> encore des icones
  • Sharp - Image processing -> opti des images
  • cwebp - WebP converter -> format ultra modernes pour baisser DRASTIQUEMENT la taille des images

🔄 State Management & Data Fetching

🧰 Utilitaires

  • Luxon - Date & time library
  • Nuqs - Type-safe URL search params -> à utiliser pour mirroring des useState dans les params d'une page.
  • Number Flow - Animated number transitions -> ça fait des jolis chiffres
  • Remark - Markdown processor -> markdown to js / html

💳 Paiements

  • Stripe - Payment processing platform

Up next

Introduction à Angular (Prochainement)

Cette section sur Angular est en cours de préparation. En attendant, je vous fournis les meilleures ressources, comme la roadmap Angular, pour commencer votre apprentissage sur ce framework.