meetmendapara09/snap2sheet

Purpose and Entry Points

SnapToSheet is a single-page Next.js application that converts an uploaded invoice image into structured accounting data and a downloadable Excel workbook. The browser entry is src/app/page.tsx, within the shared application shell at src/app/layout.tsx. The primary interactive workflow is implemented by src/components/OcrToExcel.tsx.

Client Extraction and Review Workflow

src/components/OcrToExcel.tsx owns the user-facing state machine: image selection, local preview, extraction request status/errors, structured-result preview, and workbook download. It sends an image Data URL to the server rather than exposing model credentials in the browser. It also hosts the resilience path: client-side Tesseract OCR can produce text for extraction when direct vision extraction is unavailable.

Server Extraction Boundary

src/app/api/extract-invoice/route.ts is the principal trust and integration boundary. It receives invoice content, uses the server-only OPENROUTER_API_KEY, and requests strict structured invoice JSON from OpenRouter’s amazon/nova-2-lite-v1:free vision model. The route supports image-first input and OCR-text input, insulating the UI from provider-specific prompting, response parsing, and API failures. src/app/api/extract-invoice/debug/route.ts is a separate diagnostic endpoint for examining this integration flow.

Invoice Normalization and Parsing

src/lib/invoice-extractor.ts defines or centralizes invoice extraction/normalization logic used around model output, including the structured domain expected by preview and export stages. src/lib/ocr-text-parser.ts supports the fallback path by interpreting OCR text into invoice-oriented fields. These library modules form the boundary between untrusted model/OCR output and the application’s normalized invoice representation.

Excel Export and Accounting Output

After extraction, src/components/OcrToExcel.tsx renders reviewable invoice data and generates the workbook client-side through xlsx. The export produces five accounting-oriented sheets: Invoice Summary, Line Items, Audit Trail, Accounting Entries, and Raw Data. This stage applies numeric formatting, calculated totals/formulas, GST fields, and total-verification information; no workbook needs to be persisted or generated by the server.

End-to-End Flow and Failure Handling

The normal path is: browser image upload → Data URL POST to src/app/api/extract-invoice/route.ts → OpenRouter vision inference → validated/normalized structured invoice result → browser preview → local Excel download. On vision failure or unsuitable input, src/components/OcrToExcel.tsx invokes Tesseract.js, then submits OCR text through the same extraction API path for structured interpretation. The principal boundaries are browser/server credential isolation, server/provider inference, and unstructured-to-structured normalization.

Runtime, Infrastructure, and External Services

The app runs on Node.js 18.18+ (20+ recommended) using Next.js 16 App Router and React 19. It is suitable for Vercel-style Next.js deployment, with OPENROUTER_API_KEY configured in deployment environment variables as indicated by .env.example. External dependencies with architectural impact are OpenRouter (remote vision-model access), Tesseract.js (browser-side OCR fallback), and xlsx (client-side workbook construction). The API key remains confined to src/app/api/extract-invoice/route.ts; the application has no indicated authentication or persistent server-side history.