# **File: COMMIT\_01\_SETUP.md** ## **Commit 1: Project Setup & Smoke Test** ### **Objective** Initialize the Next.js 16 (App Router) project, install all core dependencies, and verify the app loads with a magnitude.run smoke test. ### **Implementation Specification** **1\. Create package.json** Create a file at /package.json with the following contents: JSON { "name": "ponderants", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "test": "npx magnitude" }, "dependencies": { "@ai-sdk/google": "^0.0.21", "@ai-sdk/react": "^3.0.106", "@atproto/api": "^0.12.18", "@deepgram/sdk": "^3.3.4", "@mantine/core": "^7.10.2", "@mantine/hooks": "^7.10.2", "@react-three/drei": "^9.106.0", "@react-three/fiber": "^8.16.8", "ai": "^3.1.27", "jsonwebtoken": "^9.0.2", "next": "14.2.4", "react": "^18", "react-dom": "^18", "surrealdb.js": "^0.11.2", "three": "^0.165.0", "umap-js": "^1.3.3", "zod": "^3.23.8" }, "devDependencies": { "@types/jsonwebtoken": "^9.0.6", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "14.2.4", "magnitude-test": "^0.1.5", "postcss": "^8", "postcss-preset-mantine": "^1.15.0", "postcss-simple-vars": "^7.0.1", "typescript": "^5" } } **2\. Create tsconfig.json** Create a file at /tsconfig.json: JSON { "compilerOptions": { "lib": \["dom", "dom.iterable", "esnext"\], "allowJs": true, "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": \[ { "name": "next" } \], "paths": { "@/\*": \["./src/\*"\] } }, "include": \["next-env.d.ts", "\*\*/\*.ts", "\*\*/\*.tsx", ".next/types/\*\*/\*.ts"\], "exclude": \["node\_modules"\] } **3\. Create next.config.mjs** Create a file at /next.config.mjs: JavaScript /\*\* @type {import('next').NextConfig} \*/ const nextConfig \= { // Add any future Next.js configurations here }; export default nextConfig; **4\. Create Root Layout (app/layout.tsx)** Create a file at /app/layout.tsx: TypeScript import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "./globals.css"; const inter \= Inter({ subsets: \["latin"\] }); export const metadata: Metadata \= { title: "Ponderants", description: "Your AI Thought Partner", }; export default function RootLayout({ children, }: Readonly\<{ children: React.ReactNode; }\>) { return ( \ \{children}\ \ ); } **5\. Create Global CSS (app/globals.css)** Create a file at /app/globals.css (this will be minimal, as directed): CSS /\* We will add Mantine's base styles here in the next commit \*/ body { margin: 0; padding: 0; } **6\. Create Homepage (app/page.tsx)** Create a file at /app/page.tsx: TypeScript export default function Home() { return ( \ \Ponderants\ \ ); } **7\. Create magnitude.config.ts** Initialize the magnitude.run configuration. Create a file at /magnitude.config.ts: TypeScript import { defineConfig } from 'magnitude-test'; export default defineConfig({ project: 'Ponderants', // This will be the base URL for all tests url: 'http://localhost:3000', // We will configure magnitude to find tests in this directory tests: 'tests/magnitude/\*\*/\*.mag.ts', }); ### **Test Specification** **1\. Create Test File (tests/magnitude/01-smoke.mag.ts)** Create a file at /tests/magnitude/01-smoke.mag.ts: TypeScript import { test } from 'magnitude-test'; test('Application boots and displays homepage', async (agent) \=\> { // Act: Navigate to the homepage (uses the default URL // from magnitude.config.ts) await agent.act('Navigate to the homepage'); // Check: Verify that the homepage text is visible // This confirms the Next.js app is serving content. await agent.check('The text "Ponderants" is visible on the screen'); });