From 55188d2e5d91fcd514bd99952fc836bd39778e7e Mon Sep 17 00:00:00 2001
From: Xin Feng <126309503+danielxfeng@users.noreply.github.com>
Date: Sun, 11 Jan 2026 12:51:34 +0200
Subject: [PATCH 1/3] feat/frontend: add healthy check

---
 .../src/lib/components/ui/badge/badge.svelte  | 49 +++++++++++++++++++
 frontend/src/lib/components/ui/badge/index.ts |  2 +
 frontend/src/lib/config/config.ts             |  3 +-
 frontend/src/lib/service/authApiService.ts    |  9 ++++
 frontend/src/routes/+page.svelte              | 10 ++--
 frontend/src/routes/HealthCheck.svelte        | 19 +++++++
 6 files changed, 88 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/lib/components/ui/badge/badge.svelte
 create mode 100644 frontend/src/lib/components/ui/badge/index.ts
 create mode 100644 frontend/src/routes/HealthCheck.svelte

diff --git a/frontend/src/lib/components/ui/badge/badge.svelte b/frontend/src/lib/components/ui/badge/badge.svelte
new file mode 100644
index 0000000..0acc5eb
--- /dev/null
+++ b/frontend/src/lib/components/ui/badge/badge.svelte
@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const badgeVariants = tv({
+		base: 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3',
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent',
+				secondary:
+					'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent',
+				destructive:
+					'bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white',
+				outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground'
+			}
+		},
+		defaultVariants: {
+			variant: 'default'
+		}
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+</script>
+
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = 'default',
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'span'}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>
diff --git a/frontend/src/lib/components/ui/badge/index.ts b/frontend/src/lib/components/ui/badge/index.ts
new file mode 100644
index 0000000..f05fb87
--- /dev/null
+++ b/frontend/src/lib/components/ui/badge/index.ts
@@ -0,0 +1,2 @@
+export { default as Badge } from './badge.svelte';
+export { badgeVariants, type BadgeVariant } from './badge.svelte';
diff --git a/frontend/src/lib/config/config.ts b/frontend/src/lib/config/config.ts
index 56145a1..b0e1788 100644
--- a/frontend/src/lib/config/config.ts
+++ b/frontend/src/lib/config/config.ts
@@ -1,3 +1,4 @@
 export const cfg = {
-	apiBaseUrl: import.meta.env.VITE_API_BASE_URL || 'http://localhost:3003/api/users'
+	apiBaseUrl: import.meta.env.VITE_API_BASE_URL || 'http://localhost:3003/api/users',
+	apiHealthCheckUrl: import.meta.env.VITE_API_HEALTH_CHECK_URL || 'http://localhost:3003/api/ping'
 };
diff --git a/frontend/src/lib/service/authApiService.ts b/frontend/src/lib/service/authApiService.ts
index 0f9e057..ea46a5c 100644
--- a/frontend/src/lib/service/authApiService.ts
+++ b/frontend/src/lib/service/authApiService.ts
@@ -37,6 +37,15 @@ import { cfg } from '$lib/config/config.js';
 
 type MethodType = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
 
+export const healthCheck = async (): Promise<boolean> => {
+	try {
+		const response = await fetch(cfg.apiHealthCheckUrl, { method: 'GET' });
+		return response.ok;
+	} catch {
+		return false;
+	}
+};
+
 const apiFetcher = async <TRequest, TResponse>(
 	path: string,
 	method: MethodType,
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 45944d3..eb68d2c 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,13 +1,17 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
+	import HealthCheck from './HealthCheck.svelte';
 	import NavLinks from './NavLinks.svelte';
 </script>
 
 <div class="flex flex-1 flex-col items-center justify-center gap-10">
 	<div class="flex max-w-4xl flex-col items-center justify-center gap-18 p-4">
-		<h1 class="animate-enter text-center text-2xl font-semibold lg:text-3xl xl:text-4xl">
-			Welcome to the Authentication Demo
-		</h1>
+		<div class="flex flex-col items-center justify-center gap-2">
+			<h1 class="animate-enter text-center text-2xl font-semibold lg:text-3xl xl:text-4xl">
+				Welcome to the Authentication Demo
+			</h1>
+			<HealthCheck />
+		</div>
 
 		{#if browser}
 			<NavLinks />
diff --git a/frontend/src/routes/HealthCheck.svelte b/frontend/src/routes/HealthCheck.svelte
new file mode 100644
index 0000000..764c5a4
--- /dev/null
+++ b/frontend/src/routes/HealthCheck.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Badge } from '$lib/components/ui/badge';
+	import { healthCheck } from '$lib/service/authApiService';
+	import { onMount } from 'svelte';
+
+	let backendHealthCheck = false;
+
+	onMount(async () => {
+		backendHealthCheck = await healthCheck();
+	});
+</script>
+
+<div class="text-sm text-muted-foreground">
+	{#if backendHealthCheck}
+		<Badge variant="secondary" class="font-semibold text-green-600">Backend is ready</Badge>
+	{:else}
+		<Badge variant="secondary" class="font-semibold text-red-600">Backend is waking up...</Badge>
+	{/if}
+</div>

From 66ddee164836949d02de2fb00106341d79e5e75d Mon Sep 17 00:00:00 2001
From: Xin Feng <126309503+danielxfeng@users.noreply.github.com>
Date: Sun, 11 Jan 2026 12:57:28 +0200
Subject: [PATCH 2/3] feat/frontend: add demo environment notice to the welcome
 page

---
 frontend/src/routes/+page.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index eb68d2c..5792a49 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -10,6 +10,7 @@
 			<h1 class="animate-enter text-center text-2xl font-semibold lg:text-3xl xl:text-4xl">
 				Welcome to the Authentication Demo
 			</h1>
+			<p class="text-center text-sm text-muted-foreground mt-6">This is a demo environment. Data is reset periodically.</p>
 			<HealthCheck />
 		</div>
 

From b981a04bca63cfa6086ace90097093bd715d9f81 Mon Sep 17 00:00:00 2001
From: Xin Feng <126309503+danielxfeng@users.noreply.github.com>
Date: Sun, 11 Jan 2026 12:57:51 +0200
Subject: [PATCH 3/3] chore/frontend: prettier

---
 frontend/src/routes/+page.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 5792a49..82bc859 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -10,7 +10,9 @@
 			<h1 class="animate-enter text-center text-2xl font-semibold lg:text-3xl xl:text-4xl">
 				Welcome to the Authentication Demo
 			</h1>
-			<p class="text-center text-sm text-muted-foreground mt-6">This is a demo environment. Data is reset periodically.</p>
+			<p class="mt-6 text-center text-sm text-muted-foreground">
+				This is a demo environment. Data is reset periodically.
+			</p>
 			<HealthCheck />
 		</div>