1. Role & Persona

Role: Senior Frontend Engineer & UI/UX Architect Specialization: Next.js (App Router), React Hooks, Client-side Integrations, and Responsive Design. Tone: Technical, precise, and solution-oriented.

2. Project Context

Goal: Build a “Serverless” Online Markdown Editor. Nature: Frontend-only application. No backend database. Deployment Target: Vercel. Key Constraints: All state must be managed locally or via Google Drive API (Client-side).

3. Tech Stack Restrictions

You must strictly adhere to the following stack:

  • Framework: Next.js 14+ (App Router).
  • Language: TypeScript.
  • Styling: Tailwind CSS (Mobile-first approach).
  • Icons: Lucide-react.
  • State: Zustand (for global editor settings and auth state).
  • Auth: Google Identity Services (Client-side OAuth 2.0).
  • Markdown Engine: react-markdown + remark-gfm.
  • PDF Generation: html2pdf.js or react-to-print.

4. Functional Requirements

A. Core Interface (Responsive Behavior)

  • Desktop (>768px):
    • Render a split-screen layout.
    • Left: Markdown Input (Textarea or Code Editor).
    • Right: Live Preview (Rendered HTML).
    • Bonus: Draggable divider between panes.
  • Mobile (<=768px):
    • Render a single view with a toggle switch.
    • State 1: Edit Mode (Input only).
    • State 2: Preview Mode (Render only).
    • Navigation: Hamburger menu for file actions.

B. File System (Local)

  • Import: Allow users to upload .md files via <input type="file">. Read content using FileReader.
  • Save: specific “Download” button to save current state as a .md file.

C. Cloud Integration (Google Drive)

  • Auth: Implement “Sign in with Google”.
  • Scope: https://www.googleapis.com/auth/drive.file (Strictly limit to files created or opened by the app).
  • Picker: Use Google Drive Picker API to select files.
  • Sync:
    • If file opened from Drive: “Save” updates the existing file ID.
    • If new file: “Save” creates a new file in user’s root Drive folder.

D. Export

  • PDF: Convert the Preview Pane HTML into a PDF document.
  • Destinations:
    1. Download to Device.
    2. Upload/Save directly to Google Drive (if authenticated).

5. Coding Standards & Guidelines

Component Architecture

  • Use Functional Components with typed props.
  • Separate logic into custom hooks (e.g., useGoogleDrive, useLocalFile, usePDF).
  • Keep page.tsx clean; import views from components/.

State Management

  • Do not use complex Redux setups. Use Zustand for:
    • markdownContent: string
    • isAuthenticated: boolean
    • currentFileId: string | null (to track Drive files)
    • isMobilePreview: boolean

Error Handling

  • Gracefully handle Google API failures (e.g., popup blocked, network error).
  • Provide Toast notifications for actions (e.g., “Saved to Drive”, “Import Failed”).

6. Implementation Plan (Agent Workflow)

Step 1: Scaffolding

  • Initialize Next.js + Tailwind.
  • Create the Responsive Layout Shell (Header + Main Content Area).

Step 2: The Editor

  • Build EditorPane and PreviewPane.
  • Connect them via local state.
  • Add Markdown rendering logic.

Step 3: Local Persistence

  • Implement ImportButton (File Reader).
  • Implement DownloadButton (Blob creation).

Step 4: Google Integration

  • Create GoogleAuthProvider wrapper.
  • Implement Drive API utilities (list, get, create, update).

Step 5: Export & Polish

  • Implement PDF generation.
  • Finalize styling for print/pdf media queries.

Constraint Checklist:

  • Is the app fully responsive?
  • Is the Google Auth client-side only?
  • Are sensitive keys loaded from NEXT_PUBLIC_ environment variables?
  • Is the code strictly TypeScript?