{"id":25929824,"url":"https://github.com/jsurquin/angular-19-mini-blog","last_synced_at":"2026-05-10T01:10:32.656Z","repository":{"id":279400316,"uuid":"938684870","full_name":"JSurquin/angular-19-mini-blog","owner":"JSurquin","description":"Ce projet est un mini-blog développé avec Angular 19 pour apprendre les bases du framework. Il permet aux utilisateurs de : ✅ Ajouter, modifier et supprimer des articles ✅ Voir la liste des articles publiés ✅ Naviguer entre les pages grâce au routing ✅ Gérer un état simple avec services et observables","archived":false,"fork":false,"pushed_at":"2025-02-25T10:56:31.000Z","size":0,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-25T11:36:41.702Z","etag":null,"topics":["angular","architecture","rxjs","signals"],"latest_commit_sha":null,"homepage":"https://angular-19-mini-blog.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JSurquin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2025-02-25T10:42:39.000Z","updated_at":"2025-02-25T10:56:35.000Z","dependencies_parsed_at":"2025-02-25T11:47:22.212Z","dependency_job_id":null,"html_url":"https://github.com/JSurquin/angular-19-mini-blog","commit_stats":null,"previous_names":["jsurquin/angular-19-mini-blog"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JSurquin%2Fangular-19-mini-blog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JSurquin%2Fangular-19-mini-blog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JSurquin%2Fangular-19-mini-blog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JSurquin%2Fangular-19-mini-blog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JSurquin","download_url":"https://codeload.github.com/JSurquin/angular-19-mini-blog/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241753170,"owners_count":20014251,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["angular","architecture","rxjs","signals"],"created_at":"2025-03-03T23:00:16.096Z","updated_at":"2026-05-10T01:10:32.649Z","avatar_url":"https://github.com/JSurquin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Blog Angular - Application Pédagogique / Educational Blog Application\n\n[English version below](#english-version)\n\n## Version Française\n\n### À Propos\n\nCette application est un blog pédagogique développé avec Angular 18/19, conçu pour démontrer les meilleures pratiques et les fonctionnalités modernes d'Angular.\n\n### Démo\n\nVoir la démo en ligne : [https://angular-19-mini-blog.vercel.app/](https://angular-19-mini-blog.vercel.app/)\n\n### Fonctionnalités Principales\n\n- Gestion d'articles (création, lecture)\n- Authentification utilisateur\n- Comparaison Signals vs Observables\n- Notifications système\n- Architecture modulaire et scalable\n\n### Technologies Utilisées\n\n- Angular 18/19\n- RxJS \u0026 Signals\n- TailwindCSS\n- Angular Animations\n\n### Concepts Démontrés\n\n1. **Gestion d'État**\n\n   - Utilisation des Signals\n   - Gestion des Observables\n   - Comparaison des deux approches\n\n2. **Architecture**\n\n   - Lazy Loading\n   - Composants autonomes\n   - Services injectables\n   - Gardes de route\n\n3. **UI/UX**\n   - Composants réutilisables\n   - Système de notification\n   - Animations\n   - Design responsive\n\n### Installation\n\n```bash\n# Cloner le repository\ngit clone [url-du-repo]\n\n# Installer les dépendances\nnpm install\n\n# Lancer l'application\nnpm start\n```\n\n### Structure du Projet\n\n```\nsrc/\n├── app/\n│   ├── core/           # Services, gardes et composants core\n│   ├── features/       # Modules fonctionnels\n│   └── shared/        # Composants et utilitaires partagés\n├── assets/            # Ressources statiques\n└── styles/           # Styles globaux\n```\n\n### Guide Pas à Pas pour Recréer le Blog\n\n1. **Initialisation du Projet**\n\n   ```bash\n   # Installation d'Angular CLI\n   npm install -g @angular/cli@latest\n\n   # Création du projet\n   ng new blog-pedagogique --style=scss --routing=true --standalone=true\n   ```\n\n2. **Configuration de l'Architecture**\n\n   - Mise en place de la structure des dossiers (core, features, shared)\n   - Configuration des alias dans tsconfig.json\n   - Installation et configuration de Tailwind CSS\n\n3. **Mise en Place des Composants de Base**\n\n   - Création du HeaderComponent\n   - Configuration du système de notification\n   - Mise en place du layout principal dans AppComponent\n\n4. **Implémentation de l'Authentification**\n\n   - Création du AuthService\n   - Implémentation des composants Login et Register\n   - Mise en place du AuthGuard et AuthInterceptor\n\n5. **Gestion des Articles**\n\n   - Création du ArticleService avec JSONPlaceholder\n   - Implémentation de la liste des articles (Observable + Signal)\n   - Création du composant de détail d'article\n   - Ajout du formulaire de création d'article\n\n6. **Optimisations et Améliorations**\n\n   - Mise en place du lazy loading\n   - Implémentation des animations\n   - Ajout des validations de formulaire\n   - Configuration des notifications système\n\n7. **Tests et Documentation**\n   - Écriture des tests unitaires\n   - Documentation du code en français\n   - Mise en place des exemples comparatifs (Signals vs Observables)\n\nChaque étape est documentée en détail dans le code source avec des commentaires en français pour faciliter l'apprentissage.\n\n---\n\n## English Version\n\n### About\n\nThis is an educational blog application developed with Angular 18/19, designed to demonstrate best practices and modern Angular features.\n\n### Demo\n\nSee the live demo: [https://angular-19-mini-blog.vercel.app/](https://angular-19-mini-blog.vercel.app/)\n\n### Main Features\n\n- Article management (creation, reading)\n- User authentication\n- Signals vs Observables comparison\n- System notifications\n- Modular and scalable architecture\n\n### Technologies Used\n\n- Angular 18/19\n- RxJS \u0026 Signals\n- TailwindCSS\n- Angular Animations\n\n### Demonstrated Concepts\n\n1. **State Management**\n\n   - Signals usage\n   - Observables management\n   - Comparison of both approaches\n\n2. **Architecture**\n\n   - Lazy Loading\n   - Standalone components\n   - Injectable services\n   - Route guards\n\n3. **UI/UX**\n   - Reusable components\n   - Notification system\n   - Animations\n   - Responsive design\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone [repo-url]\n\n# Install dependencies\nnpm install\n\n# Start the application\nnpm start\n```\n\n### Project Structure\n\n```\nsrc/\n├── app/\n│   ├── core/           # Core services, guards and components\n│   ├── features/       # Feature modules\n│   └── shared/        # Shared components and utilities\n├── assets/            # Static resources\n└── styles/           # Global styles\n```\n\n### Development Commands\n\n```bash\n# Development server\nng serve\n\n# Build\nng build\n\n# Tests\nng test\n```\n\n### API Documentation\n\nThe application uses JSONPlaceholder to simulate a REST API:\n\n- GET /posts\n- GET /posts/:id\n- POST /posts\n- PUT /posts/:id\n- DELETE /posts/:id\n\n---\n\nDeveloped with ❤️ by Jimmylan - Andromed\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsurquin%2Fangular-19-mini-blog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsurquin%2Fangular-19-mini-blog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsurquin%2Fangular-19-mini-blog/lists"}