Generate a fully functional, multi-page Next.js MVP application for 'Shortcut Weaver'. This application allows developers to write code in Cherri, a programming language that compiles directly to Apple Shortcuts, enabling the creation of more complex and maintainable Shortcut projects.
**1. PROJECT OVERVIEW:**
Shortcut Weaver is a developer tool that solves the problem of managing large and complex Apple Shortcut projects. Cherri, the core programming language, offers a familiar syntax, type safety, and features like package management and modularity (functions, includes), directly compiling into runnable Shortcuts. This enhances the practicality and long-term maintainability of Shortcut automation. The value proposition is empowering users to build sophisticated automations within the Apple ecosystem with greater ease and structure.
**2. TECH STACK:**
- **Frontend Framework:** Next.js (App Router)
- **Styling:** Tailwind CSS
- **ORM:** Drizzle ORM (PostgreSQL compatibility)
- **Database:** PostgreSQL
- **Authentication:** NextAuth.js (or Lucia Auth for broader DB support)
- **UI Components:** shadcn/ui (highly customizable components)
- **State Management:** React Context API / Zustand (for global state if needed)
- **Code Editor Component:** Monaco Editor (for VSCode-like editing experience within the web app)
- **Deployment:** Vercel or similar platform
- **Build Tools:** esbuild/swc (integrated with Next.js)
- **Linting/Formatting:** ESLint, Prettier
**3. DATABASE SCHEMA (PostgreSQL via Drizzle ORM):**
```sql
-- users table
CREATE TABLE users (
id TEXT PRIMARY KEY,
name TEXT,
email TEXT UNIQUE NOT NULL,
emailVerified TIMESTAMP WITH TIME ZONE,
image TEXT
);
-- accounts table (for NextAuth.js)
CREATE TABLE accounts (
id SERIAL PRIMARY KEY,
userId TEXT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
type TEXT NOT NULL,
provider TEXT NOT NULL,
providerAccountId TEXT NOT NULL,
refresh_token TEXT,
access_token TEXT,
expires_at BIGINT,
token_type TEXT,
scope TEXT,
id_token TEXT,
session_state TEXT,
UNIQUE(provider, providerAccountId)
);
-- sessions table (for NextAuth.js)
CREATE TABLE sessions (
id SERIAL PRIMARY KEY,
sessionToken TEXT UNIQUE NOT NULL,
userId TEXT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
expires TIMESTAMP WITH TIME ZONE NOT NULL
);
-- verification_tokens table (for NextAuth.js)
CREATE TABLE verification_tokens (
identifier TEXT NOT NULL,
token TEXT NOT NULL,
expires TIMESTAMP WITH TIME ZONE NOT NULL,
PRIMARY KEY (identifier, token)
);
-- projects table
CREATE TABLE projects (
id TEXT PRIMARY KEY,
userId TEXT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
name TEXT NOT NULL,
description TEXT,
createdAt TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
updatedAt TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);
-- files table (representing Cherri source files)
CREATE TABLE files (
id TEXT PRIMARY KEY,
projectId TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
name TEXT NOT NULL, -- e.g., 'main.chri'
content TEXT NOT NULL, -- The Cherri code
createdAt TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
updatedAt TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);
-- packages table (for package manager)
CREATE TABLE packages (
id TEXT PRIMARY KEY,
name TEXT UNIQUE NOT NULL,
description TEXT,
repositoryUrl TEXT NOT NULL -- e.g., Git URL
);
-- project_packages table (many-to-many relationship)
CREATE TABLE project_packages (
projectId TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
packageId TEXT NOT NULL REFERENCES packages(id) ON DELETE CASCADE,
version TEXT, -- Specific version constraint
PRIMARY KEY (projectId, packageId)
);
-- compilation_jobs table
CREATE TABLE compilation_jobs (
id TEXT PRIMARY KEY,
projectId TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
fileId TEXT REFERENCES files(id) ON DELETE SET NULL, -- If compiling a specific file
status TEXT NOT NULL DEFAULT 'pending', -- e.g., 'pending', 'compiling', 'completed', 'failed'
outputUrl TEXT, -- URL to the compiled .shortcut file
errorMessage TEXT,
createdAt TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
completedAt TIMESTAMP WITH TIME ZONE
);
-- Triggers for updatedAt updates
CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
NEW.updatedAt = NOW();
RETURN NEW;
END;
$$ language 'plpgsql';
-- Apply triggers to relevant tables
CREATE TRIGGER update_projects_updated_at BEFORE UPDATE ON projects FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
CREATE TRIGGER update_files_updated_at BEFORE UPDATE ON files FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
```
**4. CORE FEATURES & USER FLOW:**
* **User Authentication:**
* **Flow:** User lands on the homepage. Clicks 'Sign In'/'Sign Up'. Redirected to authentication page (using NextAuth.js, supporting Google, GitHub, and email/password). After successful auth, user is redirected to their dashboard.
* **Edge Cases:** Invalid credentials, account already exists, email verification pending.
* **Project Management (Dashboard):**
* **Flow:** Authenticated user sees a dashboard listing their existing projects. Options to 'Create New Project' or open an existing one. Clicking 'Create New Project' opens a modal to name the project. Project is created and user is navigated to the project editor.
* **Edge Cases:** No projects found (empty state message), project name validation (e.g., no special characters).
* **Cherri Code Editor:**
* **Flow:** User is within a project. A multi-pane view shows: File Explorer (left), Monaco Editor (center), Output/Logs (bottom). User can create new `.chri` files, rename, delete. User writes Cherri code in the Monaco Editor. Syntax highlighting and basic error checking are provided in real-time.
* **Components:** `FileExplorer` (tree view for project files), `MonacoEditorWrapper` (integrates Monaco Editor, handles code changes, state management).
* **Edge Cases:** File upload/download errors, extremely large file content causing performance issues, editor initialization failures.
* **Cherri Compiler CLI (Web Interface):**
* **Flow:** User clicks a 'Compile' button within the project view. A compilation job is initiated. The user sees the job status (pending, compiling, completed, failed) in the output panel. On successful compilation, a download link for the `.shortcut` file is provided. The backend handles the actual compilation using a Cherri compiler implementation (details of compiler logic are out of scope for this prompt but assumed to exist).
* **API:** POST `/api/projects/[projectId]/compile` - Triggers compilation. Returns job ID.
* **API:** GET `/api/compilation-jobs/[jobId]` - Fetches job status and output URL.
* **Edge Cases:** Compilation errors (syntax, semantic), invalid Cherri code, server errors during compilation, large output files.
* **Package Manager Integration:**
* **Flow:** User can search for available packages (from a predefined list or remote repo) via a dedicated UI section or command within the editor. User can 'Add' a package to their project. The system manages dependency resolution and inclusion during compilation.
* **API:** GET `/api/packages?search={query}` - Searches packages.
* **API:** POST `/api/projects/[projectId]/packages` - Adds a package to the project.
* **Edge Cases:** Package not found, version conflicts, invalid repository URL.
**5. API & DATA FETCHING:**
- Utilize Next.js API Routes (`app/api/...`).
- Data fetching in components will primarily use Server Components where possible for initial load, and Client Components with `fetch` or libraries like SWR/React Query for dynamic data and mutations.
- API Responses will be JSON.
- Authentication will be handled via session tokens managed by NextAuth.js.
- Database operations will be performed using Drizzle ORM client instances within API routes or server actions.
**Example API Endpoint (`/api/projects/[projectId]/files`):**
* `GET /api/projects/{projectId}/files`: Fetch all files for a project. Returns `[{ id: 'file-1', name: 'main.chri', content: '...', ... }]`.
* `POST /api/projects/{projectId}/files`: Create a new file. Request Body: `{ name: 'newFile.chri', content: '...' }`. Returns created file object.
* `PUT /api/files/{fileId}`: Update file content. Request Body: `{ content: 'updated code...' }`. Returns updated file object.
* `DELETE /api/files/{fileId}`: Delete a file. Returns success status.
**6. COMPONENT BREAKDOWN (Next.js App Router Structure):**
* **`app/`:**
* `layout.tsx`: Root layout (html, body, providers).
* `page.tsx`: Homepage / Landing Page.
* `auth/page.tsx`: Sign In / Sign Up page.
* `dashboard/page.tsx`: User dashboard listing projects.
* `components/ProjectList.tsx`
* `components/CreateProjectModal.tsx`
* `projects/[projectId]/page.tsx`: Project Editor Page.
* `components/EditorLayout.tsx` (main layout with file explorer, editor, output)
* `components/FileExplorer.tsx` (handles file tree, create/delete/rename)
* `components/MonacoEditorWrapper.tsx` (integrates Monaco, handles code input, save actions)
* `components/CompilationOutput.tsx` (displays job status and logs)
* `components/CompileButton.tsx` (triggers compilation)
* `components/PackageManagerUI.tsx` (search/add packages)
* `api/` (API Routes):
* `auth/[...nextauth]/route.ts`
* `projects/[projectId]/route.ts` (CRUD for projects)
* `projects/[projectId]/files/route.ts` (CRUD for files)
* `files/[fileId]/route.ts` (CRUD for files)
* `packages/route.ts` (package search)
* `projects/[projectId]/packages/route.ts` (add package to project)
* `compilation-jobs/[jobId]/route.ts` (get job status)
* `projects/[projectId]/compile/route.ts` (trigger compilation)
* **`components/`:** Shared UI components (Button, Input, Modal, etc. from shadcn/ui or custom).
* **`lib/`:** Utility functions, ORM setup, external API clients.
* **`styles/`:** Global CSS.
**7. UI/UX DESIGN & VISUAL IDENTITY:**
- **Style:** Modern Minimalist Clean with subtle futuristic elements.
- **Color Palette:**
- Primary: `#6366F1` (Indigo-500 - for accents, buttons)
- Secondary: `#3B82F6` (Blue-500 - for secondary actions, links)
- Background: `#F9FAFB` (Light mode) / `#111827` (Dark mode - optional, can be added later)
- Text (Light): `#1F2937` (Gray-900)
- Text (Dark): `#E5E7EB` (Gray-200)
- Accent/Code Background: `#F3F4F6` (Gray-100) / `#2D3340` (Dark mode)
- **Typography:** Inter (from Google Fonts) - sans-serif. Use appropriate weights for headings and body text.
- **Layout:** Clean, spacious layouts. Focus on code readability. Use a sidebar for file navigation and a clear separation between editor and output.
- **Responsiveness:** Mobile-first approach, but prioritize desktop/laptop experience for the editor. Ensure UI is usable on various screen sizes.
**8. SAMPLE/MOCK DATA:**
* **Project List (Dashboard):**
```json
[
{ "id": "proj_abc123", "name": "iOS Quick Actions", "description": "Automate common iOS tasks.", "updatedAt": "2023-10-27T10:00:00Z" },
{ "id": "proj_def456", "name": "Mac File Organizer", "description": "Sorts files in Downloads folder.", "updatedAt": "2023-10-26T15:30:00Z" }
]
```
* **File List (Editor):**
```json
[
{ "id": "file_mainxyz", "name": "main.chri", "content": "// My first Cherri script\n\nfunc greet(name: String) -> Void {\n ShowAlert(message: \"Hello, \" + name + \"!\");\n}\n\ngreet(name: \"World\");", "updatedAt": "2023-10-27T11:00:00Z" },
{ "id": "file_utils789", "name": "utils.chri", "content": "// Utility functions\n", "updatedAt": "2023-10-27T10:55:00Z" }
]
```
* **Package Search Result:**
```json
[
{ "id": "pkg_network1", "name": "NetworkUtils", "description": "HTTP request helpers for Shortcuts.", "repositoryUrl": "git@github.com:user/repo.git" },
{ "id": "pkg_date2", "name": "DateTimeFormatter", "description": "Advanced date formatting.", "repositoryUrl": "git@github.com:user/repo2.git" }
]
```
* **Compilation Job Status:**
```json
{ "id": "job_qwerty", "status": "completed", "outputUrl": "/download/shortcuts/MyShortcut.shortcut", "completedAt": "2023-10-27T11:05:00Z" }
```
```json
{ "id": "job_asdfg", "status": "failed", "errorMessage": "Type mismatch on line 15: expected String, got Number.", "completedAt": "2023-10-27T11:06:00Z" }
```
* **Empty Project State:**
`ProjectList` should display a message like "No projects yet. Create your first project!" with a prominent 'Create Project' button.
* **Empty File Explorer State:**
Should display "No files in this project." or prompt to create a new file.
**9. TURKISH TRANSLATIONS:**
- **App Title:** Shortcut Weaver (Kısayol Dokumacısı)
- **Sign In:** Giriş Yap
- **Sign Up:** Kayıt Ol
- **Dashboard:** Kontrol Paneli
- **My Projects:** Projelerim
- **Create New Project:** Yeni Proje Oluştur
- **Project Name:** Proje Adı
- **Description:** Açıklama
- **Save:** Kaydet
- **Cancel:** İptal
- **File Explorer:** Dosya Gezgini
- **Compile:** Derle
- **Compiling...:** Derleniyor...
- **Compilation Failed:** Derleme Başarısız
- **Download Shortcut:** Kısayolu İndir
- **Search Packages:** Paket Ara
- **Add Package:** Paket Ekle
- **Settings:** Ayarlar
- **Logout:** Çıkış Yap
- **Error:** Hata
- **Success:** Başarılı
- **Loading...:** Yükleniyor...
- **No projects found:** Proje bulunamadı.
- **No files yet:** Henüz dosya yok.
**10. ANIMATIONS:**
- Subtle fade-ins for new components or data loading.
- Smooth transitions for sidebar collapse/expand.
- Button hover states with slight scale/color change.
- Loading spinners/skeletons for asynchronous operations (compilation status, data fetching).
- Monaco Editor should have standard code editor animations (e.g., cursor blinking, smooth scrolling).
**11. EDGE CASES & VALIDATIONS:**
- **Auth:** Redirects to appropriate pages after login/logout. Handle expired sessions.
- **Project/File Names:** Enforce valid naming conventions (e.g., no leading/trailing spaces, allowed characters). Prevent duplicate names within the same project.
- **Code Editor:** Auto-save functionality or clear 'unsaved changes' warnings before navigating away. Handle large file sizes gracefully.
- **Compilation:** Clear error messages linking to specific lines in the Cherri code. Handle timeouts for compilation jobs. Provide fallback for compilation if server-side compiler fails (e.g., offer to download source code).
- **Package Management:** Handle network errors when fetching package lists. Version conflict resolution strategy (e.g., prompt user, use latest compatible).
- **Empty States:** Provide helpful messages and calls to action when lists (projects, files) or data sections are empty.