{"id":49889663,"url":"https://github.com/kevinbdx35/cours-vite-react","last_synced_at":"2026-05-15T20:10:35.802Z","repository":{"id":306579816,"uuid":"1026648007","full_name":"kevinbdx35/cours-vite-react","owner":"kevinbdx35","description":"Cours interactif pour apprendre Vite et React avec des exemples pratiques,    animations et mini-projet guidé","archived":false,"fork":false,"pushed_at":"2025-07-26T12:35:29.000Z","size":194,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-26T16:33:59.920Z","etag":null,"topics":["beginner-friendly","course","education","french","frontend","interactive-learning","javascript","react","tutorial","vite","web-development"],"latest_commit_sha":null,"homepage":"https://kevinbdx35.github.io/cours-vite-react","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kevinbdx35.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-26T10:13:14.000Z","updated_at":"2025-07-26T12:35:32.000Z","dependencies_parsed_at":"2025-07-26T16:34:03.040Z","dependency_job_id":"2bf3f047-6dfe-47c6-b576-c5fba18ed1c8","html_url":"https://github.com/kevinbdx35/cours-vite-react","commit_stats":null,"previous_names":["kevinbdx35/cours-vite-react"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/kevinbdx35/cours-vite-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinbdx35%2Fcours-vite-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinbdx35%2Fcours-vite-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinbdx35%2Fcours-vite-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinbdx35%2Fcours-vite-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kevinbdx35","download_url":"https://codeload.github.com/kevinbdx35/cours-vite-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinbdx35%2Fcours-vite-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33078249,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-15T20:05:40.333Z","status":"ssl_error","status_checked_at":"2026-05-15T20:05:38.672Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["beginner-friendly","course","education","french","frontend","interactive-learning","javascript","react","tutorial","vite","web-development"],"created_at":"2026-05-15T20:10:35.056Z","updated_at":"2026-05-15T20:10:35.794Z","avatar_url":"https://github.com/kevinbdx35.png","language":"JavaScript","funding_links":["https://ko-fi.com/W7W61I0YBJ"],"categories":[],"sub_categories":[],"readme":"# Cours Interactif Vite + React\n\nUne plateforme d'apprentissage interactive conçue pour enseigner le développement web moderne en utilisant Vite et React. Ce cours pour débutants offre une expérience pratique avec des exemples concrets, des micro-animations et un design responsive.\n\n\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/W7W61I0YBJ)\n\n![vite+react](https://github.com/kevinbdx35/cours-vite-react/blob/main/img.png?raw=true)\n\n\n## ✨ Fonctionnalités\n\n- **📚 Apprentissage Interactif** : Leçons pratiques avec des exemples de code en temps réel\n- **⚡ Stack Moderne** : Construit avec Vite pour un développement ultra-rapide\n- **⚛️ Fondamentaux React** : Couverture complète des concepts de base aux avancés\n- **🎨 Système de Design Polaris** : Composants UI professionnels de Shopify\n- **📱 Entièrement Responsive** : Optimisé pour tous les appareils et tailles d'écran\n- **🎭 Micro-animations** : Transitions fluides et interactions engageantes\n- **🎯 Suivi de Progression** : Surveillez votre parcours d'apprentissage\n- **🧩 Architecture Modulaire** : Code propre et maintenable suivant les principes SOLID\n\n## 🚀 Démarrage\n\n### Prérequis\n\n- Node.js (version 18 ou supérieure)\n- Gestionnaire de paquets npm ou yarn\n\n### Installation\n\n1. Clonez le dépôt :\n```bash\ngit clone \u003crepository-url\u003e\ncd vite-react-course\n```\n\n2. Installez les dépendances :\n```bash\nnpm install\n```\n\n3. Démarrez le serveur de développement :\n```bash\nnpm run dev\n```\n\n4. Ouvrez votre navigateur et naviguez vers `http://localhost:5173`\n\n## 📖 Structure du Cours\n\n### Module 1 : Fondamentaux de Vite (30 min)\n- Qu'est-ce que Vite ?\n- Vite vs Bundlers Traditionnels\n- Structure d'un Projet\n- Commandes Essentielles\n\n### Module 2 : Fondamentaux de React (45 min)\n- Qu'est-ce que React ?\n- Syntaxe JSX\n- Composants et Props\n- State et Gestion d'Événements\n\n### Module 3 : Concepts React Avancés (60 min)\n- Hook useEffect\n- Hooks Personnalisés\n- API Context\n\n### Module 4 : Bonnes Pratiques Vite + React (30 min)\n- Configuration de Projet Optimale\n- Optimisation des Performances\n\n## 🛠️ Technologies Utilisées\n\n- **[Vite](https://vitejs.dev/)** - Outillage frontend de nouvelle génération\n- **[React 18](https://reactjs.org/)** - Bibliothèque JavaScript pour construire des interfaces utilisateur\n- **[Shopify Polaris](https://polaris.shopify.com/)** - Système de design professionnel\n- **CSS Animations** - Animations performantes avec CSS natif\n- **[React Markdown](https://remarkjs.github.io/react-markdown/)** - Composant Markdown pour React\n- **[React Syntax Highlighter](https://react-syntax-highlighter.github.io/react-syntax-highlighter/)** - Coloration syntaxique du code\n\n## 📁 Structure du Projet\n\n```\nsrc/\n├── components/         # Composants UI réutilisables\n│   ├── course/        # Composants spécifiques au cours\n│   ├── layout/        # Composants de mise en page\n│   └── ui/           # Éléments UI de base\n├── pages/            # Composants de page\n│   ├── home/         # Page d'accueil\n│   └── course/       # Page de cours\n├── hooks/            # Hooks React personnalisés\n│   └── course/       # Hooks liés au cours\n├── constants/        # Constantes de l'application\n├── styles/           # Styles globaux et CSS\n├── utils/            # Fonctions utilitaires\n└── types/            # Définitions de types TypeScript\n```\n\n## 🎯 Objectifs d'Apprentissage Clés\n\nEn complétant ce cours, vous allez :\n\n- ✅ Comprendre les fondamentaux de Vite et ses avantages\n- ✅ Maîtriser les composants React, props et gestion du state\n- ✅ Apprendre les hooks React modernes (useState, useEffect, hooks personnalisés)\n- ✅ Implémenter les principes de design responsive\n- ✅ Créer des animations fluides et des micro-interactions\n- ✅ Suivre les bonnes pratiques d'organisation du code\n- ✅ Construire une application web interactive complète\n\n## 🎨 Principes de Design\n\nCe projet suit les principes établis de l'ingénierie logicielle :\n\n- **KISS (Keep It Simple, Stupid)** : Composants simples et ciblés\n- **DRY (Don't Repeat Yourself)** : Composants et utilitaires réutilisables\n- **YAGNI (You Aren't Gonna Need It)** : Construire seulement ce qui est nécessaire\n- **Principes SOLID** : Architecture modulaire et maintenable\n- **Code Propre** : Code lisible et bien documenté\n- **Design Responsive** : Approche mobile-first\n\n## 🚀 Scripts Disponibles\n\n- `npm run dev` - Démarrer le serveur de développement\n- `npm run build` - Builder pour la production\n- `npm run preview` - Prévisualiser le build de production\n- `npm run lint` - Exécuter ESLint\n\n## 📱 Points de Rupture Responsive\n\n- **Mobile** : \u003c 480px\n- **Tablette** : 480px - 768px  \n- **Desktop** : 768px - 1024px\n- **Large Desktop** : \u003e 1024px\n\n## 🎭 Fonctionnalités d'Animation\n\n- Transitions de page avec CSS natif\n- Effets de survol sur les éléments interactifs\n- Animations de progression\n- Micro-interactions pour une meilleure UX\n- Support de mouvement réduit pour l'accessibilité\n\n## 🧪 Support Navigateur\n\n- Chrome (dernière version)\n- Firefox (dernière version)\n- Safari (dernière version)\n- Edge (dernière version)\n\n## 🚀 Déploiement\n\n### Déploiement sur GitHub Pages\n\nCe projet est configuré pour être déployé automatiquement sur GitHub Pages.\n\n**Configuration requise :**\n1. Modifiez `vite.config.js` : `base: '/votre-nom-de-repo/'`\n2. Modifiez `package.json` : `homepage: \"https://votre-username.github.io/votre-nom-de-repo\"`\n3. Activez GitHub Pages dans les paramètres du repository\n\n**Déploiement automatique :**\n```bash\ngit push origin main  # Déclenche le déploiement automatique\n```\n\n**Déploiement manuel :**\n```bash\nnpm run deploy\n```\n\n📖 **Guide complet** : Voir [DEPLOYMENT.md](./DEPLOYMENT.md)\n\n## 🤝 Contribution\n\n1. Forkez le dépôt\n2. Créez une branche de fonctionnalité (`git checkout -b feature/fonctionnalite-incroyable`)\n3. Committez vos changements (`git commit -m 'Ajouter une fonctionnalité incroyable'`)\n4. Poussez vers la branche (`git push origin feature/fonctionnalite-incroyable`)\n5. Ouvrez une Pull Request\n\n## 📝 Licence\n\nCe projet est sous licence MIT - voir le fichier LICENSE pour plus de détails.\n\n## 🔗 Ressources Utiles\n\n- [Documentation Vite](https://vitejs.dev/guide/)\n- [Documentation React](https://reactjs.org/docs/)\n- [Système de Design Polaris](https://polaris.shopify.com/)\n- [CSS Animations](https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Animations)\n- [Fonctionnalités JavaScript Modernes](https://developer.mozilla.org/fr/docs/Web/JavaScript)\n\n## 💡 Conseils pour Réussir\n\n1. **Pratiquez Régulièrement** : Codez avec les exemples\n2. **Expérimentez** : Essayez de modifier le code pour voir ce qui se passe\n3. **Posez des Questions** : Utilisez les démos interactives pour explorer les concepts\n4. **Construisez des Projets** : Appliquez ce que vous apprenez à vos propres projets\n5. **Restez à Jour** : Suivez les mises à jour de React et Vite\n\n---\n\n**Bon Apprentissage !** 🎉\n\nConstruit avec ❤️ pour les développeurs web en herbe\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevinbdx35%2Fcours-vite-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkevinbdx35%2Fcours-vite-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevinbdx35%2Fcours-vite-react/lists"}