Flipbook Portal

Using Greta AI (a "vibe coding" tool) with a 30-file constraint is actually an advantage. It forces a clean, modular architecture where logic is consolidated into a few powerful utility files and hooks, rather than a sprawling folder structure.

To build this 100-page searchable flipbook, you should use Next.js as the base framework within Greta, as it handles the "Searchable URL" and SEO requirements natively.

1. The "Consolidated" File Strategy

To stay under 30 files, we will group the logic into 4 primary "buckets":

2. Sequential Prompting Strategy (The "Greta Flow")

To prevent AI hallucinations, do not ask Greta to "Build the whole app" at once. Instead, follow this 4-Phase Prompting Sequence. Only move to the next phase when the previous one is fully functional.

Phase 1: The Core Flipbook UI (Local Mock)

"Build a React component using Tailwind CSS and react-pageflip. Create a 'Flipbook' component that renders a list of mock image URLs as a realistic 3D book with shadows. Use a neutral color palette. Ensure it is responsive: 2-page spread on desktop, 1-page flip on mobile."

Phase 2: PDF Ingestion & Conversion

"Add a file upload zone. Using pdfjs-dist, create a custom hook usePdfProcessor that takes an uploaded PDF and converts each page into a high-quality Canvas or WebP blob. Show a real-time progress bar for this conversion."

Phase 3: Search & Content Indexing

"Integrate Supabase for storage and Algolia for search. When a PDF is processed, extract the text and coordinates. Send the text to Algolia for global search. Ensure the 'Download' button only works for authenticated users."

Phase 4: Highlights & Links (The Final Polish)

"Create a transparent SVG overlay for each page in the flipbook. When a user clicks a search result, navigate to that page and draw a yellow highlight box using the saved coordinates. Add support for clickable links from the PDF's annotation layer."

3. Tips for Greta AI Constraints

• Avoid Nested Folders: Keep your components in /components and logic in /lib. Greta handles flat structures better than deep nesting.

• Consolidate Types: If you use TypeScript, put all your interfaces in a single types.ts file rather than defining them locally in every component.

• State Management: Use Zustand or React Context in a single file (store.js) to manage the "Current Page," "Search Query," and "Loading Progress" across the whole app.

4. Handling the 100-Page Limit

Since Greta and browser memory can struggle with 100 high-res canvases at once, add this specific instruction to your Phase 2 prompt:

"Implement 'Virtualization' or 'Lazy Loading' for the pages. Only render the current, previous, and next 5 pages in the DOM. Replace the rest with lightweight placeholders to save memory."

Next Step: Are you ready to start with the Phase 1 prompt, or would you like me to generate the specific "Consolidated Types" file to set the foundation for Greta?

That is a wise decision. Opening in a new tab reinforces the "Research Hub" feel and prevents the frustration of losing your place in a 100-page document while cross-referencing.

With this final piece of logic settled, your project is fully architected for Greta AI. To wrap up, here is the final Simplified Project Manifest to keep your files organized under the 30-file limit, followed by the specific Phase 1 starting prompt for your AI.

The Consolidated File Map (14 Core Files)

By grouping logic into hooks and server actions, you keep the workspace clean:

1. app/layout.tsx: Root styles and font setup (Inter or Geist for that premium feel).

2. app/page.tsx: The "Library" landing page (Global Search & Upload button).

3. app/view/[id]/page.tsx: The main Flipbook viewer page.

4. components/Flipbook/Container.tsx: The Framer Motion logic for the book physics.

5. components/Flipbook/Page.tsx: Renders the image, link overlay, and highlight layer.

6. components/HUD/HUDMain.tsx: The floating pill container.

7. components/HUD/SearchPortal.tsx: The "Universal" search result dropdown.

8. hooks/useFlipbook.ts: Manages page state, zooming, and turn logic.

9. hooks/useUniversalSearch.ts: Handles local filtering and Algolia API calls.

10. lib/pdf-engine.ts: Logic for splitting PDFs and extracting text/links.

11. lib/supabase.ts: Database client for user accounts and file metadata.

12. lib/algolia.ts: Search client for the global library index.

13. app/api/upload/route.ts: Server action for ingestion and progress tracking.

14. types/index.ts: The "Source of Truth" for your data structures.

Step-by-Step Prompting Sequence for Greta AI

To avoid hallucinations, copy and paste these prompts one by one, ensuring the code works before moving to the next.

Prompt 1: Foundations & Physics

"Build a Next.js application with Tailwind CSS and Framer Motion. Create a 'FlipbookContainer' component that mimics a physical book. It should display two 'Page' components side-by-side on desktop and one on mobile. Use Framer Motion for the page-turn animation (rotateY) with a transform-origin on the spine. Add a soft inner shadow to the spine and a subtle drop-shadow to the page edges for a premium look. Use mock image URLs for the pages for now."

Prompt 2: The Floating HUD & Passive Fade

"Add a floating HUD (Heads-Up Display) at the bottom-center. It should be a rounded pill shape with bg-white/80 and backdrop-blur-md. Include a page counter (e.g., '1 / 100') and icons for Search, Zoom, and Download. Implement a 'Passive Fade' using Framer Motion: the HUD should fade out after 3 seconds of mouse inactivity and reappear on movement. Ensure it stays visible if the Search input is focused."

Prompt 3: Universal Search Logic

"Implement the 'Universal Search' within the HUD. When the user clicks the search icon, expand a results panel upward. Divide results into 'This Report' and 'Global Library'. Create a mock JSON manifest containing page text and coordinates. When a 'This Report' result is clicked, navigate to that page. When a 'Global Library' result is clicked, open that report's URL in a new browser tab."

Prompt 4: Highlighting & Link Overlays

"Create a 'LayeredPage' component. Layer 1: Page Image. Layer 2: A transparent SVG for clickable links based on coordinate data. Layer 3: A highlight layer. When a search result is clicked, use the coordinate data from the manifest to render a yellow motion.div over the search term. Ensure the highlight uses percentage-based coordinates (e.g., x: 20%, y: 45%) to remain responsive across devices."

Final Tip for Greta AI

If Greta starts to lose track of the file count or tries to create too many small files, remind it: "Keep the logic consolidated. Merge UI-related sub-components into the main component file to keep our file count low."

Would you like the specific TypeScript interfaces for the types/index.ts file to get the project started correctly?

Following your strict constraints for a manually authored, human-led development process, here is the comprehensive professional workflow and data architecture.

This plan serves as your "Production Blueprint," bridging the gap between your Greta AI prototype and the final high-performance system.

1. Production Workflow: The 4-Stage Ingestion Pipeline

This pipeline ensures 100-page documents are processed securely and served efficiently with a premium feel.

2. The JSON Manifest (The "Source of Truth")

This structure is the backbone of the platform. It allows the frontend to render highlights and links responsively without needing the original PDF file.

JSON

{
  "report_id": "annual_report_2026_q1",
  "metadata": {
    "title": "2026 Q1 Financial Summary",
    "department": "Finance",
    "uploaded_by": "user_882",
    "total_pages": 100
  },
  "pages": [
    {
      "page_index": 0,
      "image_url": "https://cdn.secure-cloud.com/reports/q1_pg1.webp",
      "dimensions": { "width": 800, "height": 1100 },
      "links": [
        {
          "url": "https://investors.company.com",
          "rect_pct": { "x": 10.5, "y": 82.1, "w": 15.0, "h": 2.5 }
        }
      ],
      "text_map": [
        { "word": "Revenue", "rect_pct": { "x": 45.2, "y": 12.4, "w": 8.1, "h": 1.2 } },
        { "word": "Growth", "rect_pct": { "x": 54.0, "y": 12.4, "w": 7.5, "h": 1.2 } }
      ]
    }
  ]
}

Developer Note: Using rect_pct (percentage-based coordinates) ensures that when the flipbook scales from a 27" monitor to an iPhone, the highlights and links remain perfectly aligned over the text.

3. Frontend Architecture: The Layered Viewer

Your human developers should author the viewer as a three-layered stack within the "Page" component.

1. Layer 1 (The Visuals): A standard <Image /> component optimized with Next.js.

2. Layer 2 (The Interactive Links): A transparent SVG overlay. It maps the links from the JSON to <rect> elements that trigger window.open(link.url, '_blank').

3. Layer 3 (The Search Highlights): A high-z-index <canvas> or <div> stack. When a search is triggered, the HUD sends the specific coordinates to this layer to render the yellow highlight.

4. Search & Discovery Implementation

To achieve the "Universal Search" requirement:

• Global Search (Algolia): When the user types into the HUD, the app sends a query to Algolia. Algolia returns a list of report_id and page_index.

• Local Highlight: If the user clicks a result from the current book, the app calls flipToPage(page_index) and passes the search term to the highlight layer.

• New Tab Discovery: If the user clicks a result from another department's report, the app opens /view/[report_id]?page=[page_index]&search=[query] in a new tab.

5. Final HUD Logic (Framer Motion)

To achieve the minimalist "Passive Fade" aesthetic, the developer should manually author a custom hook:

TypeScript

// Manually authored logic example
const useHUDVisibility = () => {
  const [isVisible, setIsVisible] = useState(true);
 
  useEffect(() => {
    let timer: NodeJS.Timeout;
    const handleActivity = () => {
      setIsVisible(true);
      clearTimeout(timer);
      timer = setTimeout(() => setIsVisible(false), 3000);
    };
 
    window.addEventListener('mousemove', handleActivity);
    return () => window.removeEventListener('mousemove', handleActivity);
  }, []);
 
  return isVisible;
};

Recommendation for Handoff

Provide your engineering team with this document and the Greta POC. Instruct them to reference the POC only for visual behavior (timing of the flip, shadow depth, HUD fade speeds) but to use this JSON Manifest and Next.js Workflow as the technical requirement. This ensures the final code is robust, typed, and secure.