review

README.md

@@ -1,2 +1,7 @@
 # speaker-space
 Project to allow conference organizers and speakers to share informations about their talks
+
+
+// TODO: est-ce que tu peux ajouter un peu de doc : à minima il faudrait une partie "How to develop?" avec les commandes à lancer, les configurations pour le mode dev, comment les trouver, etc. en fait tout ce qu'il faut quand tu débarques pour savoir quoi faire pour lancer l'app le plus rapidement possible en dev sans trop se prendre la tête
+
+// NOTE: j'ai vu que t'as mis du TailwindCSS. Je vois comment ça marche mais je maitrise pas TailwindCSS, donc je pense pas te faire de remarque sur les styles en tailwindCSS

front/package.json

@@ -38,5 +38,9 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.7.2"
-  }
+  },
+  "// SUGGESTION": [
+    "n'hésite pas à ajouter un linter (eslint: https://github.com/angular-eslint/angular-eslint) et un formatter (prettier : https://prettier.io/docs/integrating-with-linters)",
+    "// ça te permettra d'avoir partout un style de code uniforme (plus facile de relire les PRs)", 
+    "// et des indications si t'as mauvaise pratique automatiquement remontées pendant que tu codes (méthodes/class/function dépréciés, problème de sécurité, etc.)"]
 }

front/src/app/app.component.ts

@@ -1,23 +1,28 @@
-import {Component} from '@angular/core';
-import {NavigationEnd, Router, RouterOutlet} from '@angular/router';
-import {NavbarComponent} from './common/components/navbar/navbar.component';
-import {FooterComponent} from './common/components/footer/footer.component';
+import { Component } from "@angular/core";
+import { NavigationEnd, Router, RouterOutlet } from "@angular/router";
+import { NavbarComponent } from "./common/components/navbar/navbar.component";
+import { FooterComponent } from "./common/components/footer/footer.component";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 
 @Component({
-  selector: 'app-root',
-  imports: [RouterOutlet,NavbarComponent, FooterComponent],
-  templateUrl: './app.component.html',
+  selector: "app-root",
+  imports: [RouterOutlet, NavbarComponent, FooterComponent],
+  templateUrl: "./app.component.html",
   standalone: true,
-  styleUrl: './app.component.scss'
+  styleUrl: "./app.component.scss",
 })
 export class AppComponent {
-  title = 'frontend';
+  title = "frontend";
   showNavbar = true;
 
   constructor(private router: Router) {
-    this.router.events.subscribe(event => {
+    // TODO: chaque fois que tu as un .subscribe() il FAUT que tu penses "unsubscribe", sinon y'aura des fuites mémoires, et ton app va cramer la RAM de l'utilisateur
+    // Y'a plusieurs options :
+    // - unsubscribe explicite https://rxjs.dev/guide/subscription#subscription (et du coup il te faut un onDestroy() sur ton composant)
+    // - unsubscribe implicite via un takeUntilDestroy() https://v19.angular.dev/api/core/rxjs-interop/takeUntilDestroyed => dès que le composant est destroy, takeUntilDestroyed va automatiquement unsubscribe
+    this.router.events.pipe(takeUntilDestroyed()).subscribe((event) => {
       if (event instanceof NavigationEnd) {
-        const hiddenRoutes = ['/not-found', '/login'];
+        const hiddenRoutes = ["/not-found", "/login"];
         this.showNavbar = !hiddenRoutes.includes(this.router.url);
       }
     });

front/src/app/app.routes.ts

@@ -1,13 +1,16 @@
-import { Routes } from '@angular/router';
-import {TestConnectionBackFrontComponent} from './common/test-connection-back-front/test-connection-back-front.component';
-import {NotFoundPageComponent} from './features/not-found-page/not-found-page.component';
-import {LoginComponent} from './features/login/login.component';
-import {LogoutHomePageComponent} from './features/logout-home-page/logout-home-page-component';
+import { Routes } from "@angular/router";
+import { TestConnectionBackFrontComponent } from "./common/test-connection-back-front/test-connection-back-front.component";
+import { NotFoundPageComponent } from "./features/not-found-page/not-found-page.component";
+import { LoginComponent } from "./features/login/login.component";
+import { LogoutHomePageComponent } from "./features/logout-home-page/logout-home-page-component";
 
+// SUGGESTION: n'hésite pas à lazy loader les différentes routes (https://v19.angular.dev/guide/routing/common-router-tasks#lazy-loading)
+// c'est pas un gros effort, ça permet de gagner un peu en performance
+// autre avantage (comme j'ai vu que t'as une PR pour la partie admin) tu peux éviter de charger les parties du code qui sont pour la section admin pour les utilisateurs
 export const routes: Routes = [
-  { path:'', component: LogoutHomePageComponent},
-  { path: 'system-info', component: TestConnectionBackFrontComponent },
-  { path: 'login', component: LoginComponent },
-  { path: 'not-found', component: NotFoundPageComponent },
-  { path: '**', redirectTo: '/not-found' }
+  { path: "", component: LogoutHomePageComponent },
+  { path: "system-info", component: TestConnectionBackFrontComponent },
+  { path: "login", component: LoginComponent },
+  { path: "not-found", component: NotFoundPageComponent },
+  { path: "**", redirectTo: "/not-found" },
 ];

front/src/app/common/components/footer/footer.component.ts

@@ -1,11 +1,15 @@
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
+
+// SUGGESTION: quand t'as des composants pas trop gros comme ça (ça devrait être la norme de faire des petits composants, c'est plus facile à lire/maintenir/comprendre),
+// tu peux faire un Single File Component (ça tend à devenir la norme dans Angular)
 
 @Component({
-  selector: 'app-footer',
+  selector: "app-footer",
   imports: [],
-  templateUrl: './footer.component.html',
-  styleUrl: './footer.component.scss'
+  template: `
+<span class="block text-sm text-gray-500 text-center dark:text-gray-400">
+  © 2025 Speaker Space
+</span>
+`,
 })
-export class FooterComponent {
-
-}
+export class FooterComponent {}

front/src/app/common/test-connection-back-front/services/testConnectionBackFront.service.ts

@@ -1,16 +1,20 @@
-import { Injectable } from '@angular/core';
-import {environment} from '../../../../environments/environment.development';
-import {HttpClient} from '@angular/common/http';
+import { inject, Injectable } from "@angular/core";
+import { environment } from "../../../../environments/environment.development";
+import { HttpClient } from "@angular/common/http";
+
+interface FirestoreConnexionInfo {
+  message: string;
+}
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: "root",
 })
 export class TestConnectionBackFrontService {
-  private apiUrl = environment.apiUrl;
-
-  constructor(private http: HttpClient) { }
+  // SUGGESTION: avec une syntaxe plus moderne
 
   testFirestore() {
-    return this.http.get<{message: string}>(`${this.apiUrl}/firestore/connection-info`);
+    return inject(HttpClient).get<FirestoreConnexionInfo>(
+      `${environment.apiUrl}/firestore/connection-info`,
+    );
   }
 }

front/src/app/common/test-connection-back-front/test-connection-back-front.component.html

@@ -1 +1 @@
-<h1>{{ firestoreMessage }}</h1>
+<h1>{{ firestoreMessage() }}</h1>

front/src/app/common/test-connection-back-front/test-connection-back-front.component.ts

@@ -1,28 +1,32 @@
-import {Component, OnInit} from '@angular/core';
-import {TestConnectionBackFrontService} from './services/testConnectionBackFront.service';
-import {CommonModule} from '@angular/common';
+import { Component, inject, OnInit } from "@angular/core";
+import { TestConnectionBackFrontService } from "./services/testConnectionBackFront.service";
+import { CommonModule } from "@angular/common";
+import { toSignal } from "@angular/core/rxjs-interop";
+import { catchError, map, of } from "rxjs";
 
 @Component({
-  selector: 'app-test-connection-back-front',
+  selector: "app-test-connection-back-front",
   standalone: true,
   imports: [CommonModule],
-  templateUrl: './test-connection-back-front.component.html',
-  styleUrl: './test-connection-back-front.component.scss'
+  templateUrl: "./test-connection-back-front.component.html",
+  styleUrl: "./test-connection-back-front.component.scss",
 })
-export class TestConnectionBackFrontComponent implements OnInit {
-  firestoreMessage: string = '';
-
-  constructor(private systemInfoService: TestConnectionBackFrontService) {}
-
-  ngOnInit() {
-    this.systemInfoService.testFirestore().subscribe({
-      next: (response: { message: string }) => {
-        this.firestoreMessage = response.message;
-      },
-      error: (error) => {
-        console.error('Firestore connection error :', error);
-        this.firestoreMessage = 'Firestore connection error';
-      }
-    });
-  }
+export class TestConnectionBackFrontComponent {
+  // TODO: évite d'utiliser ngOnInit(), depuis environ la v16 d'Angular, t'as plus besoin, mettre dans le constructeur ou directement affecter la property c'est mieux
+  // TODO: passe par le inject() pour ne plus avoir besoin du tout du constructor() dans la majorité des cas
+  // TODO: évite au maximum de faire des .subscribe() car tu crées des fuites mémoire
+  // au choix :
+  // - quand comme ici tu fais uniquement un GET qui n'a pas vraiment de raison d'être partagé entre plusieurs composant, tu peux passer par https://v19.angular.dev/guide/signals/resource# (c'est marqué expérimentale en v19 mais c'est pas grave elle finira stable sans que ça casse)
+  // - simplement passer par un AsyncPipe https://v19.angular.dev/api/common/AsyncPipe#examples (ça marche depuis la v4 de mémoire cette façon de faire)
+  // - transforme en Signal avec toSignal() https://v19.angular.dev/api/core/rxjs-interop/toSignal (j'ai transformé le code sur cette version pour te montrer)
+  //
+  firestoreMessage = toSignal(
+    inject(TestConnectionBackFrontService).testFirestore().pipe(
+      map((response) => response.message), // si la récupération se passe bien on affecte à this.firestoreMessage le message
+      catchError((error) => { // si elle se passe mal on met un message d'erreur
+        console.error("Firestore connection error :", error);
+        return of("Firestore connection error");
+      }),
+    ),
+  );
 }

front/src/app/features/login/login.component.html

@@ -15,6 +15,22 @@ <h2 class="mt-6 text-center text-2xl font-bold leading-9 tracking-tight ">
           </div>
         </div>
         <div class="mt-8 flex flex-col gap-4">
+          <!--
+          SUGGESTION:
+          - transforme les svg en fichier .svg
+          - transforme les buttons en composant (du coup ça te permettra d'éviter de répéter le style)
+          - ensuite tu pourras utiliser ici 3 fois le composant ça peut te donner un truc du genre :
+
+          <app-login-button icon="/img/sso/google.svg" label="Google" bg="#EA2533" outline="#EA2533" />
+          <app-login-button icon="/img/sso/github.svg" label="GitHub" bg="#24292F" outline="#24292F" />
+          <app-login-button icon="/img/sso/x.svg" label="X.com" bg="white" outline="black" />
+
+          ça permet :
+          - de voir en un coup d'oeil que y'a 3 boutons
+          - d'en ajouter un sans duplication de code (vu la tartine de class Tailwind t'as pas envie de le maintenir en 3,4,10 exemplaire)
+          - c'est plus facile de voir les spécificités de chaque bouton (là j'ai été obligé de sélectionner le contenu de class pour voir quand ça matchait plus autour)
+          - d'indiquer très facilement à quelqu'un comment ajouter un nouveau bouton (y'a un composant à copier juste en dessous avec des paramètres facile à lire)
+          -->
           <button type="button" class="flex w-full items-center justify-center gap-3 rounded-md px-3 py-1.5 cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 bg-[#EA2533] focus-visible:outline-[#EA2533] text-white">
             <svg role="presentation" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="h-5 w-5" viewBox="0 0 16 16" aria-hidden="true">
               <path d="M15.545 6.558a9.42 9.42 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.689 7.689 0 0 1 5.352 2.082l-2.284 2.284A4.347 4.347 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.792 4.792 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.702 3.702 0 0 0 1.599-2.431H8v-3.08h7.545z"></path>

front/src/app/features/not-found-page/not-found-page.component.scss

@@ -0,0 +1,5 @@
+/*
+SUGGESTION: tu peux supprimer les fichier de style qui sont vides. Ça pollue un peu les projets.
+Penses juste à supprimer la référence au fichier dans le .ts aussi
+
+*/