diff --git a/.gitignore b/.gitignore
index 53eaa2196..e389f766c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,6 @@
 /target
 **/*.rs.bk
+.something/
+node_modules/
+frontend/node_modules/
+*.lock
diff --git a/frontend/package.json b/frontend/package.json
new file mode 100644
index 000000000..23b588a4b
--- /dev/null
+++ b/frontend/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "url-shortener-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.18.0",
+    "react-helmet-async": "^2.0.1",
+    "@tanstack/react-query": "^5.8.0",
+    "zustand": "^4.4.6",
+    "axios": "^1.6.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@vitejs/plugin-react": "^4.2.0",
+    "autoprefixer": "^10.4.16",
+    "daisyui": "^4.0.0",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.5",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0",
+    "vitest": "^1.0.0",
+    "@testing-library/react": "^14.1.0",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/user-event": "^14.5.1",
+    "jsdom": "^22.1.0",
+    "msw": "^2.0.0"
+  }
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
new file mode 100644
index 000000000..5a3561d33
--- /dev/null
+++ b/frontend/src/App.tsx
@@ -0,0 +1,14 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Home from './pages/Home';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Home />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
new file mode 100644
index 000000000..5950beb17
--- /dev/null
+++ b/frontend/src/main.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <HelmetProvider>
+      <App />
+    </HelmetProvider>
+  </React.StrictMode>
+);
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
new file mode 100644
index 000000000..33ea60f3d
--- /dev/null
+++ b/frontend/src/pages/Home.tsx
@@ -0,0 +1,175 @@
+import { Helmet } from 'react-helmet-async';
+import type { SEOConfig } from '../types/home';
+
+const SEO_CONFIG: SEOConfig = {
+  title: 'Shorten Links, Track Clicks | URL Shortener',
+  description: 'Free URL shortener with analytics. Create short links, track clicks, and measure performance. Get started in seconds.',
+  canonicalUrl: 'https://urlshortener.example.com',
+  ogImage: 'https://urlshortener.example.com/og-image.png',
+};
+
+const STRUCTURED_DATA = {
+  '@context': 'https://schema.org',
+  '@type': 'WebApplication',
+  name: 'URL Shortener',
+  description: SEO_CONFIG.description,
+  url: SEO_CONFIG.canonicalUrl,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'Web',
+  offers: {
+    '@type': 'Offer',
+    price: '0',
+    priceCurrency: 'USD',
+  },
+};
+
+function Home() {
+  return (
+    <>
+      <Helmet>
+        <title>{SEO_CONFIG.title}</title>
+        <meta name="description" content={SEO_CONFIG.description} />
+        <link rel="canonical" href={SEO_CONFIG.canonicalUrl} />
+
+        {/* Open Graph tags */}
+        <meta property="og:title" content={SEO_CONFIG.title} />
+        <meta property="og:description" content={SEO_CONFIG.description} />
+        <meta property="og:image" content={SEO_CONFIG.ogImage} />
+        <meta property="og:url" content={SEO_CONFIG.canonicalUrl} />
+        <meta property="og:type" content="website" />
+
+        {/* Twitter Card tags */}
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content={SEO_CONFIG.title} />
+        <meta name="twitter:description" content={SEO_CONFIG.description} />
+        <meta name="twitter:image" content={SEO_CONFIG.ogImage} />
+
+        {/* Structured data */}
+        <script type="application/ld+json">
+          {JSON.stringify(STRUCTURED_DATA)}
+        </script>
+      </Helmet>
+
+      <div className="min-h-screen flex flex-col">
+        <header role="banner">
+          <nav role="navigation" aria-label="Main navigation" className="navbar bg-base-100 shadow-lg">
+            <div className="flex-1">
+              <a href="/" className="btn btn-ghost text-xl">URL Shortener</a>
+            </div>
+            <div className="flex-none">
+              <ul className="menu menu-horizontal px-1">
+                <li><a href="/login">Login</a></li>
+                <li><a href="/register">Register</a></li>
+              </ul>
+            </div>
+          </nav>
+        </header>
+
+        <main id="main-content" role="main" className="flex-grow">
+          <section aria-labelledby="hero-heading" className="hero min-h-[60vh] bg-gradient-to-br from-primary to-secondary">
+            <div className="hero-content text-center">
+              <div className="max-w-2xl">
+                <h1 id="hero-heading" className="text-5xl font-bold text-white">
+                  Shorten Links, Track Clicks
+                </h1>
+                <p className="py-6 text-lg text-white/90">
+                  Create short, memorable links and track their performance with powerful analytics.
+                </p>
+                <div className="flex gap-4 justify-center">
+                  <a href="/register" className="btn btn-primary btn-lg">Get Started Free</a>
+                  <a href="#features" className="btn btn-outline btn-lg text-white border-white hover:bg-white hover:text-primary">
+                    Learn More
+                  </a>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section id="features" aria-labelledby="features-heading" className="py-20 px-4">
+            <div className="max-w-6xl mx-auto">
+              <h2 id="features-heading" className="text-3xl font-bold text-center mb-12">
+                Why Choose Us?
+              </h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                <article className="card bg-base-200 shadow-xl">
+                  <div className="card-body">
+                    <h3 className="card-title">URL Shortening</h3>
+                    <p>Create short, shareable links instantly.</p>
+                  </div>
+                </article>
+                <article className="card bg-base-200 shadow-xl">
+                  <div className="card-body">
+                    <h3 className="card-title">Analytics</h3>
+                    <p>Track clicks, locations, and devices.</p>
+                  </div>
+                </article>
+                <article className="card bg-base-200 shadow-xl">
+                  <div className="card-body">
+                    <h3 className="card-title">Dashboard</h3>
+                    <p>Manage all your links in one place.</p>
+                  </div>
+                </article>
+                <article className="card bg-base-200 shadow-xl">
+                  <div className="card-body">
+                    <h3 className="card-title">Security</h3>
+                    <p>Enterprise-grade security for your links.</p>
+                  </div>
+                </article>
+              </div>
+            </div>
+          </section>
+
+          <section aria-labelledby="how-it-works-heading" className="py-20 px-4 bg-base-200">
+            <div className="max-w-4xl mx-auto text-center">
+              <h2 id="how-it-works-heading" className="text-3xl font-bold mb-12">
+                How It Works
+              </h2>
+              <div className="flex flex-col md:flex-row gap-8 justify-center">
+                <div className="flex-1">
+                  <div className="text-4xl mb-4">1</div>
+                  <h3 className="font-bold text-xl mb-2">Paste</h3>
+                  <p>Enter your long URL</p>
+                </div>
+                <div className="flex-1">
+                  <div className="text-4xl mb-4">2</div>
+                  <h3 className="font-bold text-xl mb-2">Shorten</h3>
+                  <p>Get a short link instantly</p>
+                </div>
+                <div className="flex-1">
+                  <div className="text-4xl mb-4">3</div>
+                  <h3 className="font-bold text-xl mb-2">Share</h3>
+                  <p>Share and track clicks</p>
+                </div>
+              </div>
+            </div>
+          </section>
+        </main>
+
+        <footer role="contentinfo" className="footer p-10 bg-neutral text-neutral-content">
+          <nav aria-label="Footer navigation">
+            <h4 className="footer-title">Product</h4>
+            <a href="/features" className="link link-hover">Features</a>
+            <a href="/pricing" className="link link-hover">Pricing</a>
+            <a href="/api" className="link link-hover">API</a>
+          </nav>
+          <nav aria-label="Legal">
+            <h4 className="footer-title">Legal</h4>
+            <a href="/terms" className="link link-hover">Terms of Service</a>
+            <a href="/privacy" className="link link-hover">Privacy Policy</a>
+          </nav>
+          <nav aria-label="Contact">
+            <h4 className="footer-title">Contact</h4>
+            <a href="mailto:support@urlshortener.example.com" className="link link-hover">Support</a>
+          </nav>
+          <div>
+            <p>&copy; 2024 URL Shortener. All rights reserved.</p>
+          </div>
+        </footer>
+      </div>
+    </>
+  );
+}
+
+export default Home;
+
+export { SEO_CONFIG, STRUCTURED_DATA };
diff --git a/frontend/src/types/custom.d.ts b/frontend/src/types/custom.d.ts
new file mode 100644
index 000000000..166b68480
--- /dev/null
+++ b/frontend/src/types/custom.d.ts
@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.png' {
+  const content: string;
+  export default content;
+}
diff --git a/frontend/src/types/home.ts b/frontend/src/types/home.ts
new file mode 100644
index 000000000..a91e97322
--- /dev/null
+++ b/frontend/src/types/home.ts
@@ -0,0 +1,45 @@
+/**
+ * Homepage-specific type definitions.
+ * Owner: First scenario builder
+ */
+
+export interface Feature {
+  id: string;
+  icon: string;
+  title: string;
+  description: string;
+}
+
+export interface Testimonial {
+  id: string;
+  quote: string;
+  author: string;
+  role: string;
+  company?: string;
+  avatar?: string;
+}
+
+export interface FAQItem {
+  id: string;
+  question: string;
+  answer: string;
+}
+
+export interface PublicStats {
+  total_urls: number;
+  total_clicks: number;
+  active_users?: number;
+}
+
+export interface ShortenResponse {
+  short_code: string;
+  short_url: string;
+  original_url: string;
+}
+
+export interface SEOConfig {
+  title: string;
+  description: string;
+  canonicalUrl: string;
+  ogImage?: string;
+}
diff --git a/frontend/tests/pages/Home.test.tsx b/frontend/tests/pages/Home.test.tsx
new file mode 100644
index 000000000..8b5293dba
--- /dev/null
+++ b/frontend/tests/pages/Home.test.tsx
@@ -0,0 +1,251 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { HelmetProvider } from 'react-helmet-async';
+import { BrowserRouter } from 'react-router-dom';
+import Home, { SEO_CONFIG, STRUCTURED_DATA } from '../../src/pages/Home';
+
+const renderWithProviders = (component: React.ReactNode) => {
+  const helmetContext = {};
+  return render(
+    <HelmetProvider context={helmetContext}>
+      <BrowserRouter>
+        {component}
+      </BrowserRouter>
+    </HelmetProvider>
+  );
+};
+
+describe('Home Page SEO', () => {
+  beforeEach(() => {
+    document.head.innerHTML = '';
+  });
+
+  describe('Test Case 1: Page Title Tag', () => {
+    it('should have a title tag present', async () => {
+      renderWithProviders(<Home />);
+
+      await waitFor(() => {
+        const title = document.querySelector('title');
+        expect(title).not.toBeNull();
+      });
+    });
+
+    it('should have a descriptive title', async () => {
+      renderWithProviders(<Home />);
+
+      await waitFor(() => {
+        const title = document.querySelector('title');
+        expect(title?.textContent).toContain('URL Shortener');
+      });
+    });
+
+    it('should have a title under 60 characters', async () => {
+      renderWithProviders(<Home />);
+
+      expect(SEO_CONFIG.title.length).toBeLessThanOrEqual(60);
+    });
+
+    it('should include primary keywords in title', async () => {
+      expect(SEO_CONFIG.title.toLowerCase()).toContain('shorten');
+      expect(SEO_CONFIG.title.toLowerCase()).toContain('link');
+    });
+  });
+
+  describe('Test Case 2: Meta Description', () => {
+    it('should have a meta description tag present', async () => {
+      renderWithProviders(<Home />);
+
+      await waitFor(() => {
+        const metaDesc = document.querySelector('meta[name="description"]');
+        expect(metaDesc).not.toBeNull();
+      });
+    });
+
+    it('should have a meta description under 160 characters', async () => {
+      expect(SEO_CONFIG.description.length).toBeLessThanOrEqual(160);
+    });
+
+    it('should have a descriptive meta description content', async () => {
+      expect(SEO_CONFIG.description.toLowerCase()).toContain('url shortener');
+    });
+  });
+
+  describe('Test Case 3: Open Graph Tags', () => {
+    it('should have og:title tag present', async () => {
+      renderWithProviders(<Home />);
+
+      await waitFor(() => {
+        const ogTitle = document.querySelector('meta[property="og:title"]');
+        expect(ogTitle).not.toBeNull();
+      });
+    });
+
+    it('should have og:description tag present', async () => {
+      renderWithProviders(<Home />);
+
+      await waitFor(() => {
+        const ogDesc = document.querySelector('meta[property="og:description"]');
+        expect(ogDesc).not.toBeNull();
+      });
+    });
+
+    it('should have og:image tag present', async () => {
+      renderWithProviders(<Home />);
+
+      await waitFor(() => {
+        const ogImage = document.querySelector('meta[property="og:image"]');
+        expect(ogImage).not.toBeNull();
+      });
+    });
+
+    it('should have og:url tag present', async () => {
+      renderWithProviders(<Home />);
+
+      await waitFor(() => {
+        const ogUrl = document.querySelector('meta[property="og:url"]');
+        expect(ogUrl).not.toBeNull();
+      });
+    });
+
+    it('should have og:type tag present', async () => {
+      renderWithProviders(<Home />);
+
+      await waitFor(() => {
+        const ogType = document.querySelector('meta[property="og:type"]');
+        expect(ogType).not.toBeNull();
+        expect(ogType?.getAttribute('content')).toBe('website');
+      });
+    });
+  });
+
+  describe('Test Case 4: Semantic HTML Structure', () => {
+    it('should have a header element', () => {
+      renderWithProviders(<Home />);
+
+      const header = document.querySelector('header');
+      expect(header).not.toBeNull();
+      expect(header?.getAttribute('role')).toBe('banner');
+    });
+
+    it('should have a nav element within header', () => {
+      renderWithProviders(<Home />);
+
+      const nav = document.querySelector('header nav');
+      expect(nav).not.toBeNull();
+      expect(nav?.getAttribute('role')).toBe('navigation');
+    });
+
+    it('should have a main element', () => {
+      renderWithProviders(<Home />);
+
+      const main = document.querySelector('main');
+      expect(main).not.toBeNull();
+      expect(main?.getAttribute('role')).toBe('main');
+      expect(main?.getAttribute('id')).toBe('main-content');
+    });
+
+    it('should have section elements with proper labels', () => {
+      renderWithProviders(<Home />);
+
+      const sections = document.querySelectorAll('section');
+      expect(sections.length).toBeGreaterThanOrEqual(2);
+
+      // Check that sections have aria-labelledby
+      sections.forEach(section => {
+        const labelledBy = section.getAttribute('aria-labelledby');
+        expect(labelledBy).not.toBeNull();
+      });
+    });
+
+    it('should have a footer element', () => {
+      renderWithProviders(<Home />);
+
+      const footer = document.querySelector('footer');
+      expect(footer).not.toBeNull();
+      expect(footer?.getAttribute('role')).toBe('contentinfo');
+    });
+
+    it('should have proper heading hierarchy with h1', () => {
+      renderWithProviders(<Home />);
+
+      const h1 = screen.getByRole('heading', { level: 1 });
+      expect(h1).toBeInTheDocument();
+    });
+
+    it('should have h2 headings for sections', () => {
+      renderWithProviders(<Home />);
+
+      const h2s = screen.getAllByRole('heading', { level: 2 });
+      expect(h2s.length).toBeGreaterThanOrEqual(2);
+    });
+  });
+
+  describe('Test Case 5: Canonical URL', () => {
+    it('should have a canonical link tag', async () => {
+      renderWithProviders(<Home />);
+
+      await waitFor(() => {
+        const canonical = document.querySelector('link[rel="canonical"]');
+        expect(canonical).not.toBeNull();
+      });
+    });
+
+    it('should point canonical to the homepage URL', async () => {
+      renderWithProviders(<Home />);
+
+      await waitFor(() => {
+        const canonical = document.querySelector('link[rel="canonical"]');
+        expect(canonical?.getAttribute('href')).toBe(SEO_CONFIG.canonicalUrl);
+      });
+    });
+
+    it('should have a valid canonical URL format', () => {
+      const urlPattern = /^https?:\/\/.+/;
+      expect(SEO_CONFIG.canonicalUrl).toMatch(urlPattern);
+    });
+  });
+
+  describe('Structured Data (JSON-LD)', () => {
+    it('should have JSON-LD structured data', async () => {
+      renderWithProviders(<Home />);
+
+      await waitFor(() => {
+        const jsonLd = document.querySelector('script[type="application/ld+json"]');
+        expect(jsonLd).not.toBeNull();
+      });
+    });
+
+    it('should have valid Schema.org context', () => {
+      expect(STRUCTURED_DATA['@context']).toBe('https://schema.org');
+    });
+
+    it('should have WebApplication type', () => {
+      expect(STRUCTURED_DATA['@type']).toBe('WebApplication');
+    });
+
+    it('should include application name', () => {
+      expect(STRUCTURED_DATA.name).toBe('URL Shortener');
+    });
+  });
+
+  describe('Twitter Card Meta Tags', () => {
+    it('should have twitter:card meta tag', async () => {
+      renderWithProviders(<Home />);
+
+      await waitFor(() => {
+        const twitterCard = document.querySelector('meta[name="twitter:card"]');
+        expect(twitterCard).not.toBeNull();
+        expect(twitterCard?.getAttribute('content')).toBe('summary_large_image');
+      });
+    });
+
+    it('should have twitter:title meta tag', async () => {
+      renderWithProviders(<Home />);
+
+      await waitFor(() => {
+        const twitterTitle = document.querySelector('meta[name="twitter:title"]');
+        expect(twitterTitle).not.toBeNull();
+      });
+    });
+  });
+});
diff --git a/frontend/tests/setup.ts b/frontend/tests/setup.ts
new file mode 100644
index 000000000..9347c17d2
--- /dev/null
+++ b/frontend/tests/setup.ts
@@ -0,0 +1,7 @@
+import '@testing-library/jest-dom';
+import { cleanup } from '@testing-library/react';
+import { afterEach } from 'vitest';
+
+afterEach(() => {
+  cleanup();
+});
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 000000000..ca002b7b9
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "tests"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
new file mode 100644
index 000000000..8e3fc387a
--- /dev/null
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts", "vitest.config.ts"]
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
new file mode 100644
index 000000000..e45e78984
--- /dev/null
+++ b/frontend/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+      },
+    },
+  },
+});
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
new file mode 100644
index 000000000..ebdd33654
--- /dev/null
+++ b/frontend/vitest.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./tests/setup.ts'],
+    include: ['tests/**/*.{test,spec}.{ts,tsx}'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+    },
+  },
+});