usephalanx · rnagulapalle · Apr 11, 2026 · Apr 11, 2026 · Apr 11, 2026 · Apr 11, 2026
diff --git a/QA.md b/QA.md
@@ -0,0 +1,17 @@
+app_type: spa
+coverage_applies: false
+coverage_source: null
+coverage_threshold: 0
+coverage_tool: none
+install_steps:
+- cd /tmp/forge-repos/hello-world-react-app-e30fc2a0
+- npm install
+lint_tool: none
+notes: Verify that all tests in the test suite pass for the Hello World React app
+  using Vitest.
+stack: TypeScript/React+Vite
+test_files:
+- src/components/HelloWorld.test.tsx
+- src/App.test.tsx
+test_runner: npx vitest run
+workspace: /tmp/forge-repos/hello-world-react-app-e30fc2a0
diff --git a/RUNNING.md b/RUNNING.md
@@ -1,33 +1,68 @@
-# Running the Todo API
+# Hello World React App
+
+A minimal React + Vite + TypeScript application that renders a centered "Hello World" heading using CSS modules.
+
+## TEAM_BRIEF
+stack: TypeScript/React+Vite
+test_runner: npx vitest run
+lint_tool: none
+coverage_tool: none
+coverage_threshold: 0
+coverage_applies: false
 
 ## Prerequisites
 
-- Python 3.10 or later
+- Node.js >= 18
+- npm >= 9
 
-## Install dependencies
+## Setup
 
 ```bash
-pip install fastapi uvicorn pydantic
+npm install
 ```
 
-For running the test suite you will also need:
+## Development Server
 
 ```bash
-pip install httpx pytest
+npm run dev
 ```
 
-## Start the server
+Opens on http://localhost:5173 by default.
+
+## Build
 
 ```bash
-uvicorn main:app --reload --host 0.0.0.0 --port 8000
+npm run build
 ```
 
-The API will be available at <http://localhost:8000>.
+## Running Tests
 
-Interactive docs are served at <http://localhost:8000/docs>.
+```bash
+npm test
+```
 
-## Run the tests
+This runs `vitest run` which executes all `*.test.tsx` files in the `src/` directory.
 
-```bash
-pytest tests/
+Test files:
+- `src/components/HelloWorld.test.tsx` — Unit tests for the HelloWorld component
+- `src/App.test.tsx` — Integration tests for the App component
+
+## Project Structure
+
+```
+├── index.html                          # Vite HTML entry point
+├── package.json                        # Dependencies and scripts
+├── tsconfig.json                       # TypeScript configuration
+├── vite.config.ts                      # Vite + Vitest configuration
+├── vite-env.d.ts                       # TypeScript declarations for Vite
+├── src/
+│   ├── main.tsx                        # React DOM entry point
+│   ├── App.tsx                         # Root App component
+│   ├── App.module.css                  # App-level centering styles
+│   ├── App.test.tsx                    # Integration tests for App
+│   └── components/
+│       ├── HelloWorld.tsx              # HelloWorld component
+│       ├── HelloWorld.module.css       # HelloWorld scoped styles
+│       └── HelloWorld.test.tsx         # Unit tests for HelloWorld
+└── RUNNING.md                          # This file
 ```
diff --git a/SETUP.md b/SETUP.md
@@ -1,25 +1,24 @@
 # Setup Instructions
 
+This project uses npm for dependency management. Lock files are not committed
+and must be generated locally.
+
 ## Install Dependencies
 
 ```bash
-pip install -r requirements.txt
+npm install
 ```
 
-## Install Test Dependencies
-
-```bash
-pip install pytest httpx
-```
+This will generate `package-lock.json` and populate `node_modules/`.
 
 ## Run Tests
 
 ```bash
-pytest tests/ -v
+npm test
 ```
 
-## Run the Application
+## Start Development Server
 
 ```bash
-uvicorn main:app --reload
+npm run dev
 ```
diff --git a/index.html b/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hello World</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "hello-world-react",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^14.3.1",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "@vitejs/plugin-react": "^4.2.1",
+    "jsdom": "^24.0.0",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "vitest": "^1.6.0"
+  }
+}
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,14 @@
+/*
+ * Legacy App.css kept for compatibility.
+ * Primary styles are in App.module.css (CSS Modules).
+ * This file provides fallback app-level styles.
+ */
+
+.app-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  width: 100%;
+  background-color: #ffffff;
+}
diff --git a/src/App.module.css b/src/App.module.css
@@ -0,0 +1,7 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
diff --git a/src/App.test.tsx b/src/App.test.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import App from './App';
+
+describe('App', () => {
+  it('renders the HelloWorld component with correct text', () => {
+    render(<App />);
+    const heading = screen.getByTestId('hello-heading');
+    expect(heading).toBeDefined();
+    expect(heading.textContent).toBe('Hello World');
+  });
+
+  it('renders the app container with a CSS module class', () => {
+    render(<App />);
+    const container = screen.getByTestId('app-container');
+    expect(container).toBeDefined();
+    expect(container.className).toBeTruthy();
+    expect(container.className.length).toBeGreaterThan(0);
+  });
+
+  it('app container contains the hello heading', () => {
+    render(<App />);
+    const container = screen.getByTestId('app-container');
+    const heading = screen.getByTestId('hello-heading');
+    expect(container.contains(heading)).toBe(true);
+  });
+
+  it('app container has the correct CSS module class name', () => {
+    render(<App />);
+    const container = screen.getByTestId('app-container');
+    expect(container.className).toContain('container');
+  });
+
+  it('renders the heading as an h1 element inside the app', () => {
+    render(<App />);
+    const heading = screen.getByTestId('hello-heading');
+    expect(heading.tagName).toBe('H1');
+  });
+
+  it('app container is a div element', () => {
+    render(<App />);
+    const container = screen.getByTestId('app-container');
+    expect(container.tagName).toBe('DIV');
+  });
+});
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import HelloWorld from './components/HelloWorld';
+import styles from './App.module.css';
+
+/**
+ * Root application component.
+ *
+ * Renders the HelloWorld component inside a centered flex container.
+ */
+function App(): React.JSX.Element {
+  return (
+    <div className={styles.container} data-testid="app-container">
+      <HelloWorld />
+    </div>
+  );
+}
+
+export default App;
diff --git a/src/components/HelloWorld.module.css b/src/components/HelloWorld.module.css
@@ -0,0 +1,6 @@
+.heading {
+  font-size: 3rem;
+  font-weight: 700;
+  color: #333333;
+  text-align: center;
+}
diff --git a/src/components/HelloWorld.test.tsx b/src/components/HelloWorld.test.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import HelloWorld from './HelloWorld';
+
+describe('HelloWorld', () => {
+  it('renders an <h1> element with the text "Hello World"', () => {
+    render(<HelloWorld />);
+    const heading = screen.getByTestId('hello-heading');
+    expect(heading).toBeDefined();
+    expect(heading.tagName).toBe('H1');
+    expect(heading.textContent).toBe('Hello World');
+  });
+
+  it('applies the CSS module heading class', () => {
+    render(<HelloWorld />);
+    const heading = screen.getByTestId('hello-heading');
+    expect(heading.className).toBeTruthy();
+    expect(heading.className.length).toBeGreaterThan(0);
+    expect(heading.className).toContain('heading');
+  });
+
+  it('renders exactly one heading element', () => {
+    const { container } = render(<HelloWorld />);
+    const headings = container.querySelectorAll('h1');
+    expect(headings.length).toBe(1);
+  });
+
+  it('heading is accessible via role', () => {
+    render(<HelloWorld />);
+    const heading = screen.getByRole('heading', { level: 1 });
+    expect(heading).toBeDefined();
+    expect(heading.textContent).toBe('Hello World');
+  });
+});
diff --git a/src/components/HelloWorld.tsx b/src/components/HelloWorld.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import styles from './HelloWorld.module.css';
+
+/**
+ * HelloWorld component.
+ *
+ * Renders a styled <h1> heading displaying "Hello World".
+ * Uses CSS modules for scoped styling.
+ */
+function HelloWorld(): React.JSX.Element {
+  return (
+    <h1 className={styles.heading} data-testid="hello-heading">
+      Hello World
+    </h1>
+  );
+}
+
+export default HelloWorld;
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,35 @@
+/*
+ * Global reset and base styles.
+ * Provides a clean foundation: no default margins/padding,
+ * white background, and modern system font stack.
+ */
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  background-color: #ffffff;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+  width: 100%;
+  min-height: 100vh;
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/src/test-setup.ts b/src/test-setup.ts
@@ -0,0 +1,5 @@
+/**
+ * Test setup file for vitest.
+ * Extends matchers with @testing-library/jest-dom utilities.
+ */
+import "@testing-library/jest-dom";
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+/**
+ * Type declarations for CSS module imports.
+ * Allows TypeScript to understand .module.css imports.
+ */
+declare module "*.module.css" {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}