Generate a FULLY FUNCTIONAL, multi-page Next.js MVP application (not just a landing page) based on the following detailed instructions. The application will be a cloud-based IDE for TinyGo, enabling developers to compile and test Go code for embedded systems and WebAssembly directly in their browser.
PROJECT OVERVIEW:
The application, named 'TinyGo Playground', aims to democratize Go development for embedded systems and WebAssembly. It solves the problem of complex setup and hardware dependency for developers wanting to experiment with TinyGo. The core value proposition is providing an accessible, browser-based environment to write, compile, run, and debug Go code targeting microcontrollers and WASM, without requiring local installations or physical hardware for initial development and prototyping.
TECH STACK:
- Frontend Framework: Next.js (App Router)
- UI Library: shadcn/ui (for accessible, reusable components)
- Styling: Tailwind CSS
- State Management: React Context API (for global state like auth, theme) and component-level state (useState, useReducer)
- ORM: Drizzle ORM (PostgreSQL or SQLite for MVP)
- Database: PostgreSQL (preferred for production) or SQLite (for easier local MVP setup)
- Authentication: NextAuth.js (or Clerk for simplified auth)
- Language: TypeScript
- Other essential packages: React Hook Form (for forms), Zod (for validation), Tailwind CSS Typography, potentially a WASM runtime/emulator library if feasible within MVP scope.
DATABASE SCHEMA:
1. **users**
* `id` (UUID, Primary Key)
* `name` (VARCHAR)
* `email` (VARCHAR, Unique)
* `emailVerified` (TIMESTAMP)
* `image` (VARCHAR, nullable)
* `createdAt` (TIMESTAMP, default: now())
* `updatedAt` (TIMESTAMP)
2. **accounts** (for NextAuth.js)
* `id` (VARCHAR, Primary Key)
* `userId` (UUID, Foreign Key to users.id)
* `type` (VARCHAR)
* `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)
4. **verification_tokens** (for NextAuth.js)
* `identifier` (VARCHAR)
* `token` (VARCHAR)
* `expires` (TIMESTAMP)
5. **projects**
* `id` (UUID, Primary Key)
* `userId` (UUID, Foreign Key to users.id)
* `name` (VARCHAR, not null)
* `description` (TEXT, nullable)
* `createdAt` (TIMESTAMP, default: now())
* `updatedAt` (TIMESTAMP)
6. **files**
* `id` (UUID, Primary Key)
* `projectId` (UUID, Foreign Key to projects.id)
* `name` (VARCHAR, not null) -- e.g., 'main.go', 'utils.go'
* `content` (TEXT, not null)
* `isMainFile` (BOOLEAN, default: false) -- Indicates the entry point
* `createdAt` (TIMESTAMP, default: now())
* `updatedAt` (TIMESTAMP)
CORE FEATURES & USER FLOW:
1. **Authentication Flow**:
* User lands on the homepage.
* Sees options to 'Sign Up' or 'Sign In'.
* Clicks 'Sign Up/In', redirected to a dedicated auth page (or modal).
* Chooses a provider (e.g., GitHub, Google).
* Authenticates via the provider.
* Upon successful authentication, user is redirected to their dashboard.
* If user tries to access authenticated routes (Dashboard, Projects) without being logged in, they are redirected to the Sign In page.
2. **Project Management Flow**:
* **Dashboard**: Authenticated users see a list of their existing projects. Options to 'Create New Project' or view existing ones.
* **Create New Project**: User clicks 'Create New Project'. A modal or form appears asking for Project Name and optional Description. Upon submission, a new project entry is created in the `projects` table, and the user is redirected to the project's editor page.
* **View/Edit Project**: User clicks on an existing project from the dashboard. They are redirected to the project editor page.
* **Project Editor Page**: Displays the project name. Contains a file explorer (initially with a default 'main.go' file) and the code editor. Options to 'Add New File', 'Delete File', 'Rename File', 'Save Project'.
3. **Code Editor & Compilation Flow**:
* **Editor**: User writes Go code in the editor. Syntax highlighting and basic auto-completion are enabled.
* **Target Selection**: User selects the compilation target (e.g., 'Arduino Uno', 'ESP32', 'WebAssembly', 'WASI'). This selection is stored in the component's state.
* **Compile Button**: User clicks the 'Compile' button.
* **Backend Compilation**: A request is sent to a backend API endpoint (`/api/compile`). The request includes the selected target, the code content from the active file (or all files in the project), and the project ID.
* **Backend Processing**: The server receives the code, saves it temporarily (or uses in-memory), invokes the TinyGo compiler (likely via a Docker container or a server-side installation) with the specified target. It captures STDOUT, STDERR, and any compilation artifacts (like WASM binary or machine code instructions for simulation).
* **Response**: The API returns the compilation output (success message, errors, warnings, or the compiled artifact). If compilation fails, errors are displayed prominently in the UI.
* **Output/Simulation**: If compilation is successful, the output is displayed. For WASM/WASI, this might be a confirmation or logs. For embedded targets, this could trigger a simulation (if a suitable simulator is integrated) or simply display 'Compilation successful. Ready to flash.'
4. **File Management Flow**:
* **Add File**: User clicks 'Add File' in the editor. A prompt or small input field appears to enter the new file name (e.g., 'helper.go'). Upon confirmation, a new entry is added to the `files` table, and the file appears in the file explorer.
* **Save File**: User explicitly clicks 'Save' or the editor auto-saves. The content of the active file is sent to `/api/files/{fileId}` via PUT request, updating the `content` in the `files` table.
* **Delete File**: User can delete a file (with confirmation). This removes the entry from the `files` table.
API & DATA FETCHING:
- **`POST /api/auth/{provider}`**: Handles authentication initiation.
- **`GET /api/auth/session`**: Fetches current user session data.
- **`GET /api/projects`**: Fetches a list of the authenticated user's projects.
- **`POST /api/projects`**: Creates a new project. Request Body: `{ name: string, description?: string }`. Response: `{ project: Project }`.
- **`GET /api/projects/{projectId}`**: Fetches a specific project's details and its files.
- **`PUT /api/projects/{projectId}`**: Updates a project's name/description.
- **`DELETE /api/projects/{projectId}`**: Deletes a project and its associated files.
- **`POST /api/projects/{projectId}/files`**: Adds a new file to a project. Request Body: `{ name: string, content: string, isMainFile?: boolean }`. Response: `{ file: File }`.
- **`GET /api/projects/{projectId}/files/{fileId}`**: Fetches a specific file's content.
- **`PUT /api/projects/{projectId}/files/{fileId}`**: Updates a file's content. Request Body: `{ content: string }`. Response: `{ file: File }`.
- **`DELETE /api/projects/{projectId}/files/{fileId}`**: Deletes a file.
- **`POST /api/compile`**: Compiles Go code using TinyGo. Request Body: `{ projectId: string, target: string, mainFileContent?: string }`. Response: `{ success: boolean, output: string, errors: string, artifact?: any }`. The server will need to manage the TinyGo compilation process, potentially using Docker.
Data Fetching Strategy:
- Use server components for initial data fetching (projects list, project files) where possible to improve performance and SEO.
- Use client components for interactive parts (editor, compilation controls).
- Employ React Query or SWR for client-side data fetching, caching, and state synchronization for dynamic data like compilation results and file updates.
COMPONENT BREAKDOWN (Next.js App Router Structure):
- **`app/`**
* **`(auth)`** (Auth Group)
* `layout.tsx`: Basic layout for auth pages.
* `page.tsx`: Sign In/Sign Up page (integrates with NextAuth.js).
* **`(app)`** (Authenticated App Group)
* `layout.tsx`: Main application layout (sidebar, header, footer). Includes auth check.
* **`dashboard/`**
* `page.tsx`: Displays user's projects. Contains 'Create New Project' button. Fetches projects via API.
* **`projects/[projectId]/`**
* `page.tsx`: Project Editor page. Fetches project details and files. Renders `EditorLayout`.
* `editor.tsx`: Main component for the editor page. Manages file explorer and editor pane.
* `file-explorer.tsx`: Sidebar component showing project files. Handles adding, renaming, deleting files.
* `code-editor.tsx`: The Monaco Editor or similar component for writing code. Manages code input, syntax highlighting.
* `compiler-controls.tsx`: Buttons/dropdowns for selecting target and triggering compilation. Handles sending compile requests.
* `output-panel.tsx`: Displays compilation output, errors, and simulation results.
* **`page.tsx`**: Public Homepage. Introduction to TinyGo Playground.
* **`layout.tsx`**: Root layout (html, body, providers).
* **`api/`**
* `auth/[...nextauth]/route.ts`: NextAuth.js API route.
* `projects/route.ts`: Handles GET/POST for `/api/projects`.
* `projects/[projectId]/route.ts`: Handles GET/PUT/DELETE for `/api/projects/{projectId}`.
* `projects/[projectId]/files/route.ts`: Handles POST for `/api/projects/{projectId}/files`.
* `projects/[projectId]/files/[fileId]/route.ts`: Handles GET/PUT/DELETE for `/api/projects/{projectId}/files/{fileId}`.
* `compile/route.ts`: Handles POST for `/api/compile`.
- **`components/`**
* `ui/`: Re-exports from shadcn/ui (Button, Input, Card, Dialog, ScrollArea, Tabs, Alert, etc.).
* `common/`: Shared components (e.g., `Header`, `Footer`, `Sidebar`, `ProjectCard`, `LoadingSpinner`).
* `editor/`: Editor-specific components (e.g., `FileExplorerItem`, `CompilerStatusIndicator`).
- **`lib/`**: Utility functions, API clients, database connection (Drizzle).
- **`hooks/`**: Custom React hooks (e.g., `useAuth`, `useCompile`).
- **`styles/`**: Global CSS files (Tailwind base, custom styles).
UI/UX DESIGN & VISUAL IDENTITY:
- **Design Style**: Modern, clean, and developer-focused. Emphasis on clarity and usability. A slightly dark theme is generally preferred for code editors.
- **Color Palette**:
* Primary (Dark Background): `#1E1E1E` (Near Black)
* Secondary (Darker Accent): `#252526`
* Tertiary (Slightly Lighter Accent): `#333333`
* Primary Text: `#D4D4D4` (Light Gray)
* Secondary Text: `#808080` (Medium Gray)
* Accent (Actionable elements, highlights): `#007ACC` (Classic Blue) or a vibrant `#4FC3F7` (Light Blue)
* Success: `#4CAF50` (Green)
* Error: `#F44336` (Red)
* Warning: `#FF9800` (Orange)
- **Typography**: Sans-serif font stack. Use a monospaced font for the code editor.
* Headings: Inter (`font-family: 'Inter', sans-serif;`)
* Body Text: Inter (`font-family: 'Inter', sans-serif;`)
* Code: Source Code Pro or Fira Code (`font-family: 'Source Code Pro', monospace;`)
- **Layout**:
* Homepage: Minimalist, clear value proposition, CTA buttons.
* Dashboard: Card-based layout for projects, clear 'Create' button.
* Editor: Three-column layout (or two-column with collapsible sidebar): File Explorer | Code Editor | Output/Compiler Status.
- **Responsiveness**: The application should be fully responsive. Editor layout might simplify on smaller screens (e.g., tabs for file explorer/output).
ANIMATIONS:
- **Transitions**: Smooth transitions for sidebar collapse/expand, modal open/close, and route changes (using Next.js's built-in features or Framer Motion if needed).
- **Hover Effects**: Subtle background changes or slight scaling on buttons and interactive elements.
- **Loading States**: Use skeleton loaders or spinners (e.g., from shadcn/ui or a custom SVG) for data fetching and compilation processes. Indicate compilation progress clearly.
EDGE CASES:
- **Authentication**: Handle expired sessions, failed login attempts gracefully. Provide clear error messages.
- **Empty States**: Dashboard (no projects), File Explorer (no files). Display informative messages and clear calls to action (e.g., 'Create your first project').
- **Compilation Errors**: Display errors from TinyGo clearly, highlighting the line number if possible. Provide easy copy-to-clipboard for errors.
- **Large Files**: Implement handling for potentially large code files (though less likely with embedded/WASM focus).
- **Network Errors**: Show user-friendly messages for API failures during saving, fetching, or compiling.
- **Validation**: Client-side and server-side validation for all form inputs (project names, file names).
- **Concurrent Edits**: (Out of MVP scope, but consider for future) If multiple users edit same file.
- **Resource Limits**: If using serverless functions for compilation, be mindful of execution time and memory limits. Consider background job queues for long compilations.
SAMPLE/MOCK DATA:
1. **User Profile (Mock)**:
```json
{
"id": "user-uuid-123",
"name": "Ada Lovelace",
"email": "ada@example.com",
"image": "https://example.com/ada.jpg"
}
```
2. **Project List (Dashboard)**:
```json
[
{
"id": "proj-uuid-abc",
"name": "Blinky LED",
"description": "Simple LED blinking example for Arduino Uno.",
"createdAt": "2023-10-27T10:00:00Z"
},
{
"id": "proj-uuid-def",
"name": "WASM Greeter",
"description": "A basic WebAssembly module that returns a greeting string.",
"createdAt": "2023-10-26T15:30:00Z"
}
]
```
3. **Project Details (Editor Page Load)**:
```json
{
"id": "proj-uuid-abc",
"name": "Blinky LED",
"description": "Simple LED blinking example for Arduino Uno.",
"createdAt": "2023-10-27T10:00:00Z",
"updatedAt": "2023-10-27T10:05:00Z",
"files": [
{
"id": "file-uuid-main",
"projectId": "proj-uuid-abc",
"name": "main.go",
"content": "package main\n\nimport (\n\t"time"\n\t"machine"\n)\n\nfunc main() {\n\tfor {\n\t\tmachine.LED.Toggle()\n\t\ttime.Sleep(time.Millisecond * 500)\n\t}\n}",
"isMainFile": true,
"createdAt": "2023-10-27T10:00:00Z",
"updatedAt": "2023-10-27T10:05:00Z"
}
]
}
```
4. **File Structure (File Explorer)**:
```json
[
{
"id": "file-uuid-main",
"projectId": "proj-uuid-abc",
"name": "main.go",
"isMainFile": true
},
{
"id": "file-uuid-helper",
"projectId": "proj-uuid-abc",
"name": "helpers.go",
"isMainFile": false
}
]
```
5. **Compilation Success Output**:
```json
{
"success": true,
"output": "Compiled main.go for Arduino Uno successfully.",
"errors": "",
"artifact": "// Base64 encoded binary or similar"
}
```
6. **Compilation Error Output**:
```json
{
"success": false,
"output": "",
"errors": "main.go:7:20: undefined: machine.LEDS",
"artifact": null
}
```
7. **Empty Project State**:
```json
{
"id": "proj-uuid-new",
"name": "New Project",
"description": null,
"createdAt": "2023-10-27T11:00:00Z",
"updatedAt": "2023-10-27T11:00:00Z",
"files": [
{
"id": "file-uuid-default",
"projectId": "proj-uuid-new",
"name": "main.go",
"content": "package main\n\nfunc main() {\n\tprintln(\"Hello, TinyGo!\")\n}",
"isMainFile": true,
"createdAt": "2023-10-27T11:00:00Z",
"updatedAt": "2023-10-27T11:00:00Z"
}
]
}
```
TURKISH TRANSLATIONS (Examples for UI elements):
- Sign In: 'Giriş Yap'
- Sign Up: 'Kayıt Ol'
- Create New Project: 'Yeni Proje Oluştur'
- Project Name: 'Proje Adı'
- Save: 'Kaydet'
- Compile: 'Derle'
- Target: 'Hedef Platform'
- Output: 'Çıktı'
- Errors: 'Hatalar'
- File Explorer: 'Dosya Gezgini'
- Add File: 'Dosya Ekle'
- Dashboard: 'Kontrol Paneli'
- Settings: 'Ayarlar'
- Loading...: 'Yükleniyor...'
- No Projects Found: 'Proje Bulunamadı'
- Create Project: 'Proje Oluştur'
- Project saved successfully: 'Proje başarıyla kaydedildi.'
- Compilation failed: 'Derleme başarısız oldu.'