4.5 KiB
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 (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}
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 (
<main>
<p>Ponderants</p>
</main>
);
}
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');
});