You are tasked with building a fully functional, multi-page MVP SaaS application using Next.js (App Router), Tailwind CSS, and Drizzle ORM. The application, tentatively named 'AI Proof Solver', aims to revolutionize how complex mathematical and logical problems, like Knuth's 'Claude Cycles', are solved by integrating human expertise with AI-powered proof assistants.
PROJECT OVERVIEW:
AI Proof Solver is a cloud-based SaaS platform designed to tackle intricate mathematical and logical challenges. It bridges the gap between human intuition and the computational power of AI, specifically Large Language Models (LLMs) and formal proof assistants. Users can upload problems, leverage AI to generate hypotheses and potential solution paths, collaborate with other experts, and rigorously verify proofs. The core value proposition is to accelerate the discovery and verification process for complex proofs, making it more accessible and reliable for mathematicians, computer scientists, and researchers.
TECH STACK:
- Frontend: React (Next.js 14+ with App Router)
- Styling: Tailwind CSS
- Backend/ORM: Drizzle ORM with PostgreSQL (or chosen compatible SQL DB)
- Authentication: NextAuth.js (e.g., with Google, GitHub providers)
- UI Components: shadcn/ui (for clean, accessible, and customizable components)
- State Management: React Context API or Zustand for global state, component-local state where appropriate.
- API Layer: Next.js API Routes (or server actions for a more integrated approach)
- Deployment: Vercel (recommended for Next.js)
- Other Libraries: zod (for validation), react-hook-form (for forms), potentially a markdown renderer or LaTeX viewer.
DATABASE SCHEMA (Drizzle ORM - PostgreSQL):
1. `users` table:
- `id` (uuid, primary key)
- `name` (text)
- `email` (text, unique)
- `emailVerified` (timestamp | null)
- `image` (text | null)
- `createdAt` (timestamp, default now())
- `updatedAt` (timestamp, default now())
2. `accounts` table (for NextAuth.js):
- `id` (text, primary key)
- `userId` (uuid, foreign key to users.id)
- `type` (text)
- `provider` (text)
- `providerAccountId` (text)
- `refresh_token` (text | null)
- `access_token` (text | null)
- `expires_at` (bigint | null)
- `token_type` (text | null)
- `scope` (text | null)
- `id_token` (text | null)
- `session_state` (text | null)
3. `sessions` table (for NextAuth.js):
- `sessionToken` (text, primary key)
- `userId` (uuid, foreign key to users.id)
- `expires` (timestamp)
4. `verificationTokens` table (for NextAuth.js):
- `identifier` (text)
- `token` (text, unique)
- `expires` (timestamp)
5. `problems` table:
- `id` (uuid, primary key)
- `title` (text, not null)
- `description` (text, not null) // Stores problem details, can include LaTeX
- `fileUrl` (text | null) // URL to uploaded file (e.g., PDF, .tex)
- `status` (enum: 'draft', 'in_progress', 'verification', 'solved', 'failed') default 'draft'
- `createdByUserId` (uuid, foreign key to users.id)
- `createdAt` (timestamp, default now())
- `updatedAt` (timestamp, default now())
6. `problem_contributions` table:
- `id` (uuid, primary key)
- `problemId` (uuid, foreign key to problems.id)
- `userId` (uuid, foreign key to users.id)
- `contributionType` (enum: 'hypothesis', 'solution_path', 'verification_step', 'comment')
- `content` (text, not null) // The actual contribution text, can include LaTeX or code snippets
- `toolUsed` (text | null) // e.g., 'ChatGPT-4', 'Coq', 'Lean'
- `isValidated` (boolean, default false)
- `createdAt` (timestamp, default now())
- `updatedAt` (timestamp, default now())
7. `collaborators` table (Many-to-Many between users and problems):
- `userId` (uuid, foreign key to users.id)
- `problemId` (uuid, foreign key to problems.id)
- `role` (enum: 'owner', 'editor', 'viewer') default 'viewer'
- `addedAt` (timestamp, default now())
- Primary Key: (`userId`, `problemId`)
CORE FEATURES & USER FLOW:
1. Authentication:
- User lands on the homepage.
- Clicks 'Sign In'/'Sign Up'.
- Redirected to NextAuth.js OAuth flow (e.g., Google).
- Upon successful authentication, redirected to the dashboard.
- User profile data is stored in the `users` table.
2. Problem Creation:
- Authenticated user navigates to 'Create Problem'.
- User fills in `title` and `description` (rich text editor supporting LaTeX).
- Option to upload a file (PDF, .tex) via a file upload component (e.g., using `uploadthing` or similar).
- File is stored (e.g., S3, Vercel Blob) and its URL is saved in `problems.fileUrl`.
- Problem is saved with status 'draft' and linked to the creator via `createdByUserId`.
- The creator is automatically added as an 'owner' in the `collaborators` table.
3. Problem Dashboard:
- Authenticated user sees a dashboard listing their problems and problems they collaborate on.
- Table view showing `title`, `status`, `createdAt`, `createdBy`.
- Each row links to the problem detail page.
- Filtering and sorting options for problems.
4. Problem Detail View:
- User clicks on a problem from the dashboard.
- Displays problem `title`, `description`, `fileUrl` (if any), `status`.
- Section for 'Contributions' (hypotheses, solutions, etc.).
- UI to add new contributions.
- Section for 'Collaborators' and inviting new ones (if owner/editor).
5. AI Hypothesis Generation (MVP Focus: Integration, not complex AI logic):
- Within Problem Detail View, user clicks 'Generate Hypothesis' (simulated or via API call).
- A modal or section appears, prompting for AI tool choice (e.g., 'ChatGPT-4').
- A POST request is sent to a backend API route (e.g., `/api/problems/[id]/generate-hypothesis`).
- This route would ideally call an external AI API (e.g., OpenAI API) with the problem description and context.
- The LLM response is saved as a new `problem_contributions` entry with `contributionType='hypothesis'` and `toolUsed='ChatGPT-4'`. Status might change to 'in_progress'.
6. Adding Manual Contributions (Solution Paths, Verification Steps):
- User clicks 'Add Contribution' in Problem Detail View.
- Selects `contributionType` (e.g., 'solution_path', 'verification_step').
- Enters content using a rich text editor.
- Submits the contribution, which is saved to `problem_contributions`.
7. Basic Verification Flow:
- Contributions marked as 'verification_step' can be reviewed.
- A simple 'Validate'/'Reject' button for collaborators with appropriate roles.
- Clicking 'Validate' sets `problem_contributions.isValidated = true`.
- Problem status could update based on validation progress (e.g., move to 'verification').
API & DATA FETCHING:
- API Routes (App Router using Server Components/Server Actions where possible):
- `POST /api/auth/*`: Handled by NextAuth.js.
- `POST /api/problems`: Create a new problem.
- `GET /api/problems`: Fetch list of problems for the dashboard.
- `GET /api/problems/[id]`: Fetch details of a single problem.
- `PUT /api/problems/[id]`: Update problem details.
- `POST /api/problems/[id]/contributions`: Add a new contribution.
- `GET /api/problems/[id]/contributions`: Fetch contributions for a problem.
- `PUT /api/contributions/[contributionId]/validate`: Validate a contribution.
- `POST /api/problems/[id]/collaborators`: Add a collaborator.
- Data Fetching:
- Primarily server-driven fetches in Server Components for initial load.
- Client-side fetching using `fetch` or libraries like SWR/React Query for dynamic updates (e.g., after adding a contribution).
- Use Server Actions for form submissions and mutations to simplify data flow.
COMPONENT BREAKDOWN (Next.js App Router Structure):
- `app/
- (auth)/
- sign-in/page.tsx // Sign-in page
- (main)/
- layout.tsx // Main layout with header, sidebar
- dashboard/page.tsx // Problem dashboard (list view)
- problems/
- create/page.tsx // Form to create a new problem
- [id]/
- page.tsx // Problem detail view
- components/
- ProblemDetails.tsx // Displays problem info
- ContributionList.tsx // Lists all contributions
- ContributionForm.tsx // Form to add new contribution
- AIHypothesisGenerator.tsx // Button/modal to trigger AI generation
- CollaboratorManagement.tsx // Manage collaborators
- layout.tsx // Main application layout (sidebar, header)
- api/
- auth/[...nextauth]/route.ts // NextAuth.js handler
- problems/
- [id]/route.ts // API routes for individual problems (e.g., GET, PUT)
- [id]/contributions/route.ts // API routes for contributions
- contributions/
- [contributionId]/validate/route.ts // API route for validation
- components/
- ui/ // Re-exported shadcn/ui components (Button, Input, Card, Dialog, Table, etc.)
- common/
- Header.tsx
- Sidebar.tsx
- Footer.tsx
- RichTextEditor.tsx // For problem descriptions and contributions (e.g., TipTap, Quill)
- FileUpload.tsx
- StatusBadge.tsx
- LaTeXRenderer.tsx // Renders LaTeX strings (e.g., using MathJax or KaTeX)
- lib/
- db.ts // Drizzle ORM client initialization
- auth.ts // NextAuth.js configuration
- utils.ts // Utility functions
- providers/
- QueryClientProvider.tsx // If using React Query
- types/
- index.ts // Shared TypeScript types
State Management:
- Server Components: Fetch data directly.
- Client Components: Use `useState`, `useReducer` for local state. Use Context API or Zustand for shared state like user authentication status, UI themes.
UI/UX DESIGN & VISUAL IDENTITY:
- Style: Minimalist Clean with subtle scientific/academic undertones.
- Color Palette:
- Primary: `#0f172a` (Dark Blue/Black for backgrounds, text)
- Secondary: `#1e40af` (Steel Blue for accents, buttons)
- Accent: `#2563eb` (Bright Blue for highlights, active states)
- Neutral: `#f8fafc` (Off-white for text on dark backgrounds), `#94a3b8` (Grey for secondary text, borders)
- Success: `#10b981` (Green for validation success)
- Danger: `#ef4444` (Red for errors, rejection)
- Typography:
- Headings: 'Inter', sans-serif (modern, readable)
- Body Text: 'Inter', sans-serif
- Code/LaTeX: 'Fira Code', monospace (clear distinction)
- Layout:
- Clean, spacious layout with a persistent sidebar for navigation and a main content area.
- Use cards for distinct sections (problem details, contributions).
- Responsive design targeting desktop-first, with graceful degradation for tablets and mobiles.
- Animations:
- Subtle page transitions (fade-in/out).
- Button hover effects (slight scale or color change).
- Loading spinners/skeletons for data fetching.
- Smooth expansion/collapse for collapsible sections.
ANIMATIONS:
- Page Transitions: Use Framer Motion or Tailwind CSS transitions for smooth fades between pages (e.g., `transition-opacity duration-300 ease-in-out`).
- Button Hovers: Slight `scale-105` or background color changes on hover using Tailwind.
- Loading States: Implement skeleton loaders or spinners using shadcn/ui's `Skeleton` component or custom spinners with Tailwind animations (`@keyframes spin`).
- Form Submissions: Disable buttons and show spinners during submission to prevent duplicate requests.
- Expand/Collapse: Use `max-h` and `transition` for smooth animations when revealing/hiding content sections.
EDGE CASES:
- Authentication:
- Redirect unauthenticated users to the sign-in page.
- Handle expired sessions gracefully.
- Implement role-based access control (e.g., only owners/editors can modify problems).
- Authorization:
- Ensure users can only access/modify problems they are collaborators on.
- Empty States:
- Dashboard: Show a friendly message and a 'Create Problem' CTA when no problems exist.
- Problem Detail: Display messages like 'No contributions yet' or 'Start by generating a hypothesis'.
- Validation:
- Input validation on all forms (problem creation, contribution form) using Zod and `react-hook-form`.
- API-level validation for all incoming data.
- Error Handling:
- Display user-friendly error messages for API failures, file uploads, etc.
- Use global error handling (e.g., a toast notification system).
- AI Integration:
- Handle API rate limits and errors from external LLM providers.
- Provide clear feedback to the user about AI generation status (pending, success, failure).
- File Uploads:
- Handle large file uploads and potential network interruptions.
- Validate file types and sizes.
SAMPLE DATA:
1. User:
```json
{
"id": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"name": "Dr. Evelyn Reed",
"email": "e.reed@university.edu",
"image": "/images/avatars/evelyn.png"
}
```
2. Problem (Draft):
```json
{
"id": "p1p2p3p4-a5b6-c7d8-e9f0-1234567890ab",
"title": "Exploring the Commutativity of Non-Associative Algebras",
"description": "Investigate the conditions under which a non-associative algebra A exhibits commutative properties. Consider the structure arising from Knuth's \"Claude Cycles\". LaTeX: $\forall a, b \in A, a \circ b = b \circ a$",
"status": "draft",
"createdByUserId": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"createdAt": "2024-03-15T10:00:00Z"
}
```
3. Contribution (Hypothesis):
```json
{
"id": "c1c2c3c4-d5e6-f7a8-b9c0-1234567890de",
"problemId": "p1p2p3p4-a5b6-c7d8-e9f0-1234567890ab",
"userId": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"contributionType": "hypothesis",
"content": "Hypothesis: Commutativity might be directly linked to the cyclic structure derived from Claude's Cycles under specific field characteristics.",
"toolUsed": "ChatGPT-4",
"createdAt": "2024-03-15T11:00:00Z"
}
```
4. Contribution (Solution Path - AI Generated):
```json
{
"id": "c5c6c7c8-d9e0-f1a2-b3c4-567890abcdef",
"problemId": "p1p2p3p4-a5b6-c7d8-e9f0-1234567890ab",
"userId": "some-ai-user-id", // Or a specific AI service user
"contributionType": "solution_path",
"content": "Path 1: Assume a finite field $F_p$. Using group theory, we can attempt to map the cyclic structure to known commutative groups... [Detailed Steps Follow]...",
"toolUsed": "Claude-3-Opus",
"createdAt": "2024-03-16T09:30:00Z"
}
```
5. Contribution (Verification Step - Manual):
```json
{
"id": "c9a0b1c2-d3e4-f5a6-b7c8-9012345678ef",
"problemId": "p1p2p3p4-a5b6-c7d8-e9f0-1234567890ab",
"userId": "b2c3d4e5-f6a7-b8c9-d0e1-234567890abc", // Another user
"contributionType": "verification_step",
"content": "Step 1 Validation: The mapping to $F_p$ is valid for characteristic $p > 2$. The claim about group isomorphism needs further proof.",
"toolUsed": null,
"isValidated": false,
"createdAt": "2024-03-17T14:00:00Z"
}
```
6. Collaborator Link:
```json
{
"userId": "b2c3d4e5-f6a7-b8c9-d0e1-234567890abc",
"problemId": "p1p2p3p4-a5b6-c7d8-e9f0-1234567890ab",
"role": "editor",
"addedAt": "2024-03-16T10:00:00Z"
}
```
7. Problem (In Progress):
```json
{
"id": "p5p6p7p8-b9c0-d1e2-f3a4-567890abcdef",
"title": "Formalizing the Square-Free Integers Problem",
"description": "Develop a formal proof using Lean that the set of square-free integers is infinite.",
"status": "in_progress",
"createdByUserId": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"createdAt": "2024-03-18T11:00:00Z"
}
```
8. Contribution (Comment):
```json
{
"id": "c3d4e5f6-a7b8-c9d0-e1f2-34567890abcd",
"problemId": "p1p2p3p4-a5b6-c7d8-e9f0-1234567890ab",
"userId": "b2c3d4e5-f6a7-b8c9-d0e1-234567890abc",
"contributionType": "comment",
"content": "I think the approach needs to consider the interaction between the algebraic structure and the field axioms more explicitly in step 3.",
"toolUsed": null,
"createdAt": "2024-03-18T15:00:00Z"
}
```
9. AI Model Configuration (Internal/Future Feature - not in MVP but for context):
```json
{
"problemId": "p1p2p3p4-a5b6-c7d8-e9f0-1234567890ab",
"aiModel": "openai/gpt-4-turbo",
"temperature": 0.7,
"maxTokens": 2048,
"systemPrompt": "You are an expert mathematical proof assistant..."
}
```
10. Problem (Verification):
```json
{
"id": "p9a0b1c2-d3e4-f5a6-b7c8-9012345678ef",
"title": "Monadic Decomposition of Tensor Products",
"description": "Formal proof using Coq for the decomposition theorem.",
"status": "verification",
"createdByUserId": "c3d4e5f6-a7b8-c9d0-e1f2-34567890abcd",
"createdAt": "2024-03-20T10:00:00Z"
}
```
This comprehensive prompt provides the necessary details for an AI to generate a robust and functional MVP of the AI Proof Solver application.