Random Quote Generator

A Random Quote Generator is a small project, so it is tempting to put everything inside one component: API URL, HTTP request, loading state, error handling, and template logic. This works for a quick demo, but it teaches the wrong Angular habit. As soon as you add categories, favorites, sharing, or another quote source, the component becomes difficult to read and reuse.

Problematic approach:

          export class QuoteComponent {
            quote: any;
            loading = false;
            error = "";

            constructor(private http: HttpClient) {}

            getQuote(): void {
              this.loading = true;

              this.http.get("https://api.example.com/random").subscribe({
                next: (response) => {
                  this.quote = response;
                  this.loading = false;
                },
                error: () => {
                  this.error = "Could not load quote.";
                  this.loading = false;
                }
              });
            }
          }

The component now knows too much about the API. If the endpoint changes, the response shape changes, or you add category support, the component becomes responsible for details that should belong to a service.

Better approach:

          export interface Quote {
            id: string;
            text: string;
            author: string;
            category: string;
          }

          @Injectable({
            providedIn: "root"
          })
          export class QuoteService {
            private apiUrl = "https://api.example.com/quotes";

            constructor(private http: HttpClient) {}

            getRandomQuote(category: string): Observable<Quote> {
              return this.http
                .get<QuoteResponse>(`${this.apiUrl}/random`, {
                  params: { category }
                })
                .pipe(
                  map((response) => ({
                    id: response.id || `${response.text}-${response.author}`,
                    text: response.text,
                    author: response.author || "Unknown author",
                    category
                  }))
                );
            }
          }

Cleaner component usage:

          export class QuoteComponent {
            quote: Quote | null = null;
            loading = false;
            error = "";

            constructor(private quoteService: QuoteService) {}

            loadQuote(category: string): void {
              this.loading = true;
              this.error = "";

              this.quoteService.getRandomQuote(category).subscribe({
                next: (quote) => {
                  this.quote = quote;
                  this.loading = false;
                },
                error: () => {
                  this.error = "Quote could not be loaded. Try again.";
                  this.loading = false;
                }
              });
            }
          }

Pay attention to: Keep API logic inside a dedicated Angular service. Components should focus on user actions and rendering, while services should handle endpoints, response mapping, and reusable data access.

Many beginners build only the happy path: click a button, receive a quote, show the quote. But real API requests can be slow, fail, return incomplete data, or return nothing. If the UI does not show what is happening, users may click the button repeatedly or think the app is broken.

Problematic template:

          <mat-card>
            <p>{{ quote.text }}</p>
            <span>{{ quote.author }}</span>
          </mat-card>

          <button mat-raised-button (click)="loadQuote()">
            New quote
          </button>

This template assumes that quote always exists. Before the first request finishes, the app may show errors in the console or render broken content.

Better template:

          <mat-card *ngIf="loading">
            <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
            <p>Loading a new quote...</p>
          </mat-card>

          <mat-card *ngIf="error && !loading" class="error-card">
            <p>{{ error }}</p>
            <button mat-button type="button" (click)="loadQuote(selectedCategory)">
              Try again
            </button>
          </mat-card>

          <mat-card *ngIf="quote && !loading && !error">
            <blockquote>{{ quote.text }}</blockquote>
            <p>— {{ quote.author || "Unknown author" }}</p>
          </mat-card>

          <button
            mat-raised-button
            color="primary"
            type="button"
            [disabled]="loading"
            (click)="loadQuote(selectedCategory)"
          >
            {{ loading ? "Loading..." : "New quote" }}
          </button>

Pay attention to: A beginner project feels much more professional when it communicates state clearly. Add loading feedback, retry behavior, missing-author handling, and a disabled button while a request is already running.

Favorites are usually where a simple quote generator starts to become useful. A common mistake is pushing every selected quote into an array without checking whether it already exists. Some APIs provide quote IDs, while others return only text and author. If you do not create a stable key, the same quote can be saved many times.

Problematic code:

          favorites: Quote[] = [];

          addToFavorites(quote: Quote): void {
            this.favorites.push(quote);
            localStorage.setItem("favoriteQuotes", JSON.stringify(this.favorites));
          }

This version does not prevent duplicates. It also does not separate favorite management from the quote display component.

Better approach:

          function createQuoteKey(quote: Quote): string {
            return `${quote.text.trim().toLowerCase()}::${quote.author.trim().toLowerCase()}`;
          }

          @Injectable({
            providedIn: "root"
          })
          export class FavoritesService {
            private storageKey = "favoriteQuotes";

            getFavorites(): Quote[] {
              const saved = localStorage.getItem(this.storageKey);

              if (!saved) {
                return [];
              }

              try {
                return JSON.parse(saved);
              } catch {
                return [];
              }
            }

            addFavorite(quote: Quote): Quote[] {
              const favorites = this.getFavorites();
              const quoteKey = createQuoteKey(quote);

              const alreadySaved = favorites.some((favorite) => {
                return createQuoteKey(favorite) === quoteKey;
              });

              if (alreadySaved) {
                return favorites;
              }

              const updatedFavorites = [...favorites, quote];

              localStorage.setItem(this.storageKey, JSON.stringify(updatedFavorites));

              return updatedFavorites;
            }
          }

Component usage:

          saveCurrentQuote(): void {
            if (!this.quote) return;

            this.favorites = this.favoritesService.addFavorite(this.quote);

            this.snackBar.open("Quote saved to favorites.", "Close", {
              duration: 2500
            });
          }

Pay attention to: Use a stable ID when the API provides one. If it does not, create a normalized key from quote text and author. This keeps the favorites list clean and predictable.

localStorage is useful for a small Angular project, but it should not be treated as always safe and perfectly formatted. Users can clear storage, browser extensions can modify it, and old versions of your app may leave outdated data behind. If your app blindly parses stored values, one broken value can crash the whole favorites page.

Problematic code:

          loadFavorites(): Quote[] {
            return JSON.parse(localStorage.getItem("favoriteQuotes")!);
          }

This code assumes the value exists and contains valid JSON. If the value is missing or corrupted, the app throws an error.

Better approach:

          loadFavorites(): Quote[] {
            const savedFavorites = localStorage.getItem("favoriteQuotes");

            if (!savedFavorites) {
              return [];
            }

            try {
              const parsedFavorites = JSON.parse(savedFavorites);

              if (!Array.isArray(parsedFavorites)) {
                return [];
              }

              return parsedFavorites.filter((quote) => {
                return (
                  typeof quote.text === "string" &&
                  typeof quote.author === "string"
                );
              });
            } catch {
              localStorage.removeItem("favoriteQuotes");
              return [];
            }
          }

Safer save method:

          saveFavorites(favorites: Quote[]): void {
            const safeFavorites = favorites.map((quote) => ({
              id: quote.id,
              text: quote.text,
              author: quote.author || "Unknown author",
              category: quote.category || "general"
            }));

            localStorage.setItem("favoriteQuotes", JSON.stringify(safeFavorites));
          }

Pay attention to: Treat localStorage as external data. Parse it carefully, validate the shape, provide a fallback, and avoid letting broken saved data crash the app.

A share button sounds simple, but browser support and user permissions can vary. Some browsers support the Web Share API, others only support clipboard access, and some environments may block clipboard writes. A weak implementation assumes one method always works and gives users no feedback when it fails.

Problematic code:

          shareQuote(): void {
            navigator.share({
              text: `${this.quote.text} — ${this.quote.author}`
            });
          }

This can fail if navigator.share is unavailable or if the user cancels the action. It also does not handle an empty current quote.

Better approach:

          async shareQuote(quote: Quote | null): Promise<void> {
            if (!quote) {
              this.snackBar.open("Generate a quote first.", "Close", {
                duration: 2500
              });
              return;
            }

            const shareText = `"${quote.text}" — ${quote.author || "Unknown author"}`;

            try {
              if (navigator.share) {
                await navigator.share({
                  title: "Quote",
                  text: shareText
                });

                return;
              }

              await navigator.clipboard.writeText(shareText);

              this.snackBar.open("Quote copied to clipboard.", "Close", {
                duration: 2500
              });
            } catch {
              this.snackBar.open("Sharing was cancelled or failed.", "Close", {
                duration: 2500
              });
            }
          }

Template usage:

          <button
            mat-stroked-button
            type="button"
            [disabled]="!quote"
            (click)="shareQuote(quote)"
          >
            Share quote
          </button>

Pay attention to: Sharing should feel reliable. Check whether a browser API exists, provide a clipboard fallback, handle cancellation, and show a short confirmation message with a snackbar or toast.