You are an AI assistant tasked with generating a fully functional, multi-page Next.js MVP application for 'CodeGarden (ToolWeaver)'. This application aims to solve the problem of fragmented and idiosyncratic AI and traditional development tooling faced by modern software engineers. The core value proposition is to provide an integrated platform for managing, configuring, and utilizing various AI code generation tools and development utilities within a project-centric workflow.
PROJECT OVERVIEW:
CodeGarden (ToolWeaver) is a SaaS platform designed to bring order to the chaotic landscape of software development tools, especially with the proliferation of AI code generators. It allows developers to configure and manage different AI tools (like OpenAI's GPT, Anthropic's Claude, Google's Gemini, GitHub Copilot, etc.) and traditional dev tools within project-specific "toolsets". Users can seamlessly transfer code snippets, commands, and context between these tools without manual copy-pasting. The platform provides a project-based code editor with syntax highlighting and basic linting, integrated within a user-friendly interface. The goal is to streamline the development workflow, reduce context switching, and enhance productivity by centralizing tool management and interaction.
TECH STACK:
- Frontend Framework: Next.js (App Router)
- Styling: Tailwind CSS
- UI Components: shadcn/ui (leveraging Radix UI and Tailwind CSS)
- ORM: Drizzle ORM
- Database: PostgreSQL (or any Drizzle-compatible SQL database)
- Authentication: NextAuth.js (or Clerk/Lucia for a more streamlined experience if preferred)
- State Management: React Context API for global state, local component state where appropriate.
- API Layer: Next.js API Routes or Server Actions.
- Icons: Lucide React
- Form Handling: React Hook Form + Zod for validation
- Syntax Highlighting: Prism.js or similar in the editor component.
- Utilities: Date-fns, Lodash (optional)
DATABASE SCHEMA (Drizzle ORM - PostgreSQL):
1. `users`:
- `id` (UUID, primary key, default: uuid_generate_v4())
- `name` (VARCHAR)
- `email` (VARCHAR, unique)
- `emailVerified` (TIMESTAMP with time zone)
- `image` (VARCHAR, nullable)
- `createdAt` (TIMESTAMP with time zone, default: now())
- `updatedAt` (TIMESTAMP with time zone, default: now())
2. `accounts` (for NextAuth.js):
- `id` (VARCHAR, primary key)
- `userId` (UUID, foreign key to users.id)
- `type` (VARCHAR, e.g., 'oauth', 'email')
- `provider` (VARCHAR)
- `providerAccountId` (VARCHAR)
- `refresh_token` (TEXT, nullable)
- `access_token` (TEXT, nullable)
- `expires_at` (BIGINT, nullable)
- `token_type` (VARCHAR, nullable)
- `scope` (VARCHAR, nullable)
- `id_token` (TEXT, nullable)
- `session_state` (VARCHAR, nullable)
3. `sessions` (for NextAuth.js):
- `sessionToken` (VARCHAR, primary key)
- `userId` (UUID, foreign key to users.id)
- `expires` (TIMESTAMP with time zone)
4. `verificationTokens` (for NextAuth.js):
- `identifier` (VARCHAR, primary key)
- `token` (VARCHAR, unique)
- `expires` (TIMESTAMP with time zone)
5. `projects`:
- `id` (UUID, primary key, default: uuid_generate_v4())
- `userId` (UUID, foreign key to users.id)
- `name` (VARCHAR, not null)
- `description` (TEXT, nullable)
- `createdAt` (TIMESTAMP with time zone, default: now())
- `updatedAt` (TIMESTAMP with time zone, default: now())
6. `toolsets`:
- `id` (UUID, primary key, default: uuid_generate_v4())
- `projectId` (UUID, foreign key to projects.id)
- `name` (VARCHAR, not null)
- `description` (TEXT, nullable)
- `createdAt` (TIMESTAMP with time zone, default: now())
- `updatedAt` (TIMESTAMP with time zone, default: now())
7. `tools`:
- `id` (UUID, primary key, default: uuid_generate_v4())
- `name` (VARCHAR, not null) // e.g., 'OpenAI GPT-4', 'Claude 3 Opus', 'Copilot'
- `type` (VARCHAR, not null) // e.g., 'AI_GENERATOR', 'LINTER', 'DEBUGGER'
- `iconUrl` (VARCHAR, nullable)
8. `toolset_tools` (Many-to-Many relationship between toolsets and tools):
- `toolsetId` (UUID, foreign key to toolsets.id)
- `toolId` (UUID, foreign key to tools.id)
- `configuration` (JSONB, nullable) // Stores tool-specific settings like API keys, model names, specific parameters
- `order` (INTEGER) // To define the sequence or preference within a toolset
- Primary Key: (`toolsetId`, `toolId`)
9. `project_files`:
- `id` (UUID, primary key, default: uuid_generate_v4())
- `projectId` (UUID, foreign key to projects.id)
- `fileName` (VARCHAR, not null)
- `content` (TEXT, nullable) // Stores the actual code or file content
- `language` (VARCHAR, nullable) // e.g., 'javascript', 'python', 'markdown'
- `createdAt` (TIMESTAMP with time zone, default: now())
- `updatedAt` (TIMESTAMP with time zone, default: now())
CORE FEATURES & USER FLOW:
1. Authentication Flow:
- User lands on the homepage/login page.
- Clicks 'Sign Up' or 'Sign In' button.
- Redirected to NextAuth.js provider page (e.g., Google, GitHub, Email/Password).
- Upon successful authentication, redirected to the user's dashboard.
- If no user data exists for email, create a new user record.
- JWT is stored in httpOnly cookies.
2. Dashboard:
- Displays a list of the user's projects.
- 'Create New Project' button.
- Each project card shows project name, last updated date, and a link to the project page.
- User Profile/Settings access.
3. Project Creation/Management:
- User clicks 'Create New Project'.
- A modal or form appears to enter Project Name and Description.
- Upon creation, the user is redirected to the Project Page.
- Project settings (rename, delete) available.
4. Project Page (Core Editor View):
- Sidebar: Lists project files (tree view). Option to create new files/folders.
- Main Area: Displays the selected file's content in a code editor.
- Top Bar: Project name, Save button, Toolset selection dropdown.
- Tool Interaction Panel (collapsible/modal): Allows selecting a tool from the active toolset, inputting prompts, and viewing AI responses.
- User Flow for Editing & AI Interaction:
a. User opens a file (e.g., `utils.js`).
b. User selects a toolset (e.g., "JS Backend Tools").
c. User highlights a code block or types a prompt in the Tool Interaction Panel (e.g., "Refactor this function for better performance").
d. User selects the desired AI tool from the toolset dropdown (e.g., "OpenAI GPT-4").
e. User clicks 'Generate' or 'Refactor'.
f. The request is sent to the backend API, which forwards it to the AI tool's API (using stored configuration/API key).
g. The AI response is received and displayed in the Tool Interaction Panel.
h. User can choose to 'Insert' the response into the editor, 'Replace' the selected code, or 'Discard'.
i. If 'Insert/Replace', the `project_files` content is updated and saved (auto-save or manual).
5. Toolset Management:
- Accessed via Project Settings or a dedicated section.
- User can create new toolsets for a project.
- Add existing `tools` to a toolset.
- Configure individual tools within a toolset (e.g., entering API keys for AI models, selecting default models, setting parameters). Use JSONB field in `toolset_tools` for this.
- Define `order` for tools in a toolset.
- Pre-populate with common tools (e.g., GPT-4, Claude 3, Copilot).
API & DATA FETCHING:
- Use Next.js API Routes or Server Actions for backend logic.
- POST /api/projects: Create a new project. (Req: {name, description}, Auth: User)
- GET /api/projects: Get all projects for the logged-in user. (Auth: User)
- GET /api/projects/[projectId]: Get a specific project with its files. (Auth: User, Project Owner)
- PUT /api/projects/[projectId]/files/[fileId]: Update file content. (Req: {content}, Auth: User, Project Owner)
- POST /api/projects/[projectId]/files: Create a new file. (Req: {fileName, content}, Auth: User, Project Owner)
- GET /api/toolsets?projectId=[projectId]: Get toolsets for a project. (Auth: User, Project Member)
- POST /api/toolsets: Create a new toolset for a project. (Req: {projectId, name, description}, Auth: User, Project Owner)
- PUT /api/toolsets/[toolsetId]: Update toolset config (add/remove/configure tools). (Req: {tools: [{toolId, configuration, order}, ...]}, Auth: User, Project Owner)
- POST /api/generate: AI Code Generation endpoint.
- Req Body: { toolsetId, toolId, prompt, context (e.g., selected code), projectId, fileId (optional) }
- Auth: User
- Backend logic: Retrieves tool configuration from `toolset_tools`, calls the appropriate third-party AI API, returns the result.
- Data Fetching: Use server components where possible for initial data loading (projects, files). Client components will fetch data for dynamic sections like the tool panel or use `useSWR` or similar for client-side caching and revalidation.
COMPONENT BREAKDOWN (Next.js App Router Structure):
- `app/layout.tsx`: Root layout, includes global styles, providers (e.g., ThemeProvider, AuthProvider).
- `app/page.tsx`: Homepage/Landing Page (public).
- `app/(auth)/login/page.tsx`: Login page.
- `app/(auth)/signup/page.tsx`: Sign up page.
- `app/dashboard/layout.tsx`: Authenticated layout wrapper.
- `app/dashboard/page.tsx`: User dashboard listing projects.
- `app/dashboard/projects/create/page.tsx`: Page for creating a new project (or modal).
- `app/dashboard/projects/[projectId]/layout.tsx`: Project-specific layout.
- `app/dashboard/projects/[projectId]/page.tsx`: Main project page including editor and tool panel.
- `components/editor/CodeEditor.tsx`: Resizable code editor component (using an external library).
- `components/editor/FileList.tsx`: Sidebar file tree view.
- `components/editor/FileListItem.tsx`: Individual file/folder item in the list.
- `components/editor/Toolbar.tsx`: Top bar with project title, save, toolset selection.
- `components/ai/ToolPanel.tsx`: Collapsible panel for AI prompts and responses.
- `components/ai/PromptInput.tsx`: Text area for user prompts.
- `components/ai/ResponseDisplay.tsx`: Renders AI generated code/text.
- `components/ai/ToolsetSelector.tsx`: Dropdown to select the active toolset.
- `components/ai/ToolConfigModal.tsx`: Modal for configuring individual tools (API keys, etc.).
- `app/settings/page.tsx`: User settings page (profile, account).
- `app/settings/projects/[projectId]/page.tsx`: Project settings page (manage toolsets, delete project).
- `components/ui/Button.tsx`, `components/ui/Input.tsx`, `components/ui/Card.tsx`, `components/ui/Dialog.tsx`, etc. (from shadcn/ui)
- `components/auth/SignInButton.tsx`, `components/auth/SignOutButton.tsx`: Auth related buttons.
- `components/common/LoadingSpinner.tsx`: Global loading indicator.
- `components/common/ErrorMessage.tsx`: Displays errors to the user.
UI/UX DESIGN & VISUAL IDENTITY:
- Design Style: "Modern Minimalist" with subtle gradient accents.
- Color Palette:
- Primary (Dark Mode): #1a202c (Background), #ffffff (Text)
- Secondary (Dark Mode): #2d3748 (Card/Panel backgrounds)
- Accent (Gradient): Linear gradient from #4299e1 (blue) to #63b3ed (light blue) for buttons, highlights, and active states.
- Subtle Accents: A muted purple like #9f7aea for secondary highlights.
- Typography: Inter (for headings and UI elements), Source Code Pro (for code editor).
- Layout: Sidebar-left for file navigation, main area for editor, collapsible panel on the right or bottom for AI interactions. Clean, spacious, and focused on content.
- Responsiveness: Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Tool panel might become a full-screen modal on mobile.
- Visuals: Subtle, smooth transitions. Focus on clear information hierarchy. Use of icons for clarity.
ANIMATIONS:
- Page Transitions: Subtle fade-in/fade-out using Next.js `useRouter` events or Framer Motion (if complexity demands).
- Component Mount/Unmount: Gentle fade and slide for modals, dropdowns, and the AI response panel.
- Loading States: Use `LoadingSpinner` components with subtle background dimming or skeleton loaders for data fetching.
- Hover Effects: Slight scale or background color change on interactive elements (buttons, links, file list items).
- Transitions: Tailwind CSS `transition` utilities for smooth property changes (e.g., `transition-all duration-300`).
EDGE CASES:
- Empty States:
- Dashboard: "You have no projects yet. Create your first project!"
- Project Page (No Files): "This project is empty. Create your first file."
- Tool Panel (No Response): "Enter a prompt or select code to get started."
- AI Tool Configuration: Clear instructions and validation for required fields (API keys).
- Authentication:
- Unauthenticated access to protected routes redirects to login.
- Session expiry handled gracefully (e.g., prompt to re-login).
- Error Handling:
- API Errors: Catch errors from third-party AI services, display user-friendly messages.
- Validation Errors: Use Zod and React Hook Form to validate user input for forms (project creation, tool configuration).
- General UI Errors: Use `try...catch` blocks and display `ErrorMessage` components.
- Rate Limiting: Implement backend logic or rely on third-party APIs' rate limits, informing the user if limits are hit.
- API Key Management: Securely store API keys (e.g., in encrypted environment variables or a secure vault service, retrieved server-side). Never expose keys to the frontend.
SAMPLE DATA (Mock Data for Frontend/DB):
1. User:
```json
{
"id": "uuid-user-1",
"name": "Alice Developer",
"email": "alice@example.com",
"image": "https://example.com/alice.jpg"
}
```
2. Project (for Alice):
```json
{
"id": "uuid-proj-1",
"userId": "uuid-user-1",
"name": "E-commerce API",
"description": "Backend services for a new online store.",
"createdAt": "2024-03-10T10:00:00Z",
"updatedAt": "2024-03-15T11:30:00Z"
}
```
3. Project File (within E-commerce API):
```json
{
"id": "uuid-file-1",
"projectId": "uuid-proj-1",
"fileName": "products.service.js",
"content": "function getProductById(id) { /* ... */ }\nfunction createProduct(data) { /* ... */ }",
"language": "javascript",
"createdAt": "2024-03-12T09:00:00Z",
"updatedAt": "2024-03-15T11:30:00Z"
}
```
4. Tool (OpenAI):
```json
{
"id": "uuid-tool-openai",
"name": "OpenAI GPT-4",
"type": "AI_GENERATOR",
"iconUrl": "/icons/openai.svg"
}
```
5. Toolset for Project 1:
```json
{
"id": "uuid-ts-js-backend",
"projectId": "uuid-proj-1",
"name": "JS Backend Tools",
"description": "Tools for Node.js backend development."
}
```
6. Toolset-Tool Mapping (OpenAI in JS Backend Toolsset):
```json
{
"toolsetId": "uuid-ts-js-backend",
"toolId": "uuid-tool-openai",
"configuration": {
"apiKey": "sk-xxxxxxxxxxxxxx", // Stored securely, NOT in frontend data sample
"model": "gpt-4-turbo-preview"
},
"order": 1
}
```
7. AI Response Example:
```json
{
"toolId": "uuid-tool-openai",
"response": "// Optimized function\nasync function getProductById(id) {\n // Add caching layer here\n const product = await db.products.findUnique({ where: { id } });\n // Add error handling and logging\n return product;\n}",
"promptUsed": "Refactor this function for better performance, add caching and error handling."
}
```
8. Empty Project List:
`[]` (for the dashboard API response)
9. Project with No Files:
`{
...,
"files": []
}` (when fetching project details)
10. Sample Prompt:
"Generate a PostgreSQL schema for a user table with email, password hash, and timestamps."