Initialize HemHub project foundation

frontend/src/App.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react'
+import { afterEach, expect, test, vi } from 'vitest'
+import App from './App'
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
+test('visar sidans rubrik', () => {
+  vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+    new Response(JSON.stringify({ status: 'UP' }), {
+      status: 200,
+      headers: { 'Content-Type': 'application/json' },
+    }),
+  )
+
+  render(<App />)
+
+  expect(screen.getByRole('heading', { name: 'HemHub' })).toBeInTheDocument()
+})
+

frontend/src/App.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react'
+
+type HealthResponse = {
+  status: string
+}
+
+function App() {
+  const [backendStatus, setBackendStatus] = useState<string | null>(null)
+  const [hasError, setHasError] = useState(false)
+
+  useEffect(() => {
+    const loadHealth = async () => {
+      try {
+        const response = await fetch('/api/health')
+
+        if (!response.ok) {
+          throw new Error(`Backend svarade med status ${response.status}`)
+        }
+
+        const health = (await response.json()) as HealthResponse
+        setBackendStatus(health.status)
+      } catch {
+        setHasError(true)
+      }
+    }
+
+    void loadHealth()
+  }, [])
+
+  let statusMessage = 'Kontrollerar backend…'
+
+  if (hasError) {
+    statusMessage = 'Backend kunde inte nås'
+  } else if (backendStatus) {
+    statusMessage = `Backend: ${backendStatus}`
+  }
+
+  return (
+    <main>
+      <h1>HemHub</h1>
+      <p>Frontend har startat.</p>
+      <p aria-live="polite">{statusMessage}</p>
+    </main>
+  )
+}
+
+export default App
+

frontend/src/main.tsx

@@ -0,0 +1,11 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+import './styles.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
+

frontend/src/styles.css

@@ -0,0 +1,23 @@
+:root {
+  font-family: system-ui, sans-serif;
+  color: #1f2937;
+  background: #f3f4f6;
+}
+
+body {
+  margin: 0;
+}
+
+main {
+  max-width: 40rem;
+  margin: 6rem auto;
+  padding: 2rem;
+  border-radius: 0.75rem;
+  background: white;
+  box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 8%);
+}
+
+h1 {
+  margin-top: 0;
+}
+

frontend/src/test/setup.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/vitest'
+

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />