Create Document Comparison View Component

[mftee]

Description:
Implement a component that allows users to compare two land documents side-by-side, highlighting differences and conflicts.

Requirements:

• Split-screen layout for two documents
• Synchronized scrolling
• Highlight differences in metadata
• Conflict indicators (overlapping claims, inconsistent dates)
• Zoom controls for document images
• Toggle between different comparison modes
• Export comparison report
• Annotation tools for marking discrepancies

Acceptance Criteria:

• Documents load and display correctly
• Scrolling is synchronized smoothly
• Differences are clearly highlighted
• Works with both PDF and image formats
• Mobile-responsive layout (stacked view on small screens)
• Performance optimized for large documents

Tech Stack: Next.js, TypeScript, Tailwind CSS, PDF.js

[gregemax]

@gregemax has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi maintainer, I’d like to work on this issue.

I have strong experience building document-heavy interfaces with Next.js, TypeScript, Tailwind CSS, and PDF.js, including rendering large PDFs, synchronized views, and performance-sensitive UI interactions. I understand how critical accuracy, clarity, and performance are when comparing legal land documents.

My approach will be to:

Build a responsive split-screen layout with side-by-side and stacked (mobile) views

Render PDFs using PDF.js and images via optimized canvas/image rendering

Implement smooth synchronized scrolling with debounced listeners

Highlight metadata differences (owners, parcel IDs, dates) using clear visual markers

Add conflict indicators for overlapping claims and inconsistent dates

Support multiple comparison modes (visual, metadata-only, conflicts-only)

Add zoom controls with synchronized or independent zooming

Implement annotation tools for marking discrepancies and comments

Export a comparison report (PDF/JSON) including differences and annotations

Optimize performance with lazy loading, virtualization, and memoized diff logic

I can start immediately and complete this within the estimated timeframe. Please assign this issue to me if this approach works. Thanks!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @gregemax to this issue.

[Tybravo]

@Tybravo has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Doing extra tasks I love. Hello, I am a full-stack Software Engineer with 7+ years of experience and a Blockchain Developer. And I do like to work on the Issue. #126 Create Document Comparison View Component

I have strong hands-on experience building advanced, user-friendly and visually engaging frontend interfaces using React, TypeScript, and Next.js, with a focus on reusable component architecture, modern UI patterns, responsive design, state management, and performance optimization. I work across both frontend and backend systems, including backend logic, API design, database architecture, and schema modeling.

I have experience building modern, scalable web applications using React, Typescript, Next.js, Node.js, Java, Rust, and related technologies. Some relevant projects (personal and OPEN SOURCE) I have worked on include:

--> https://www.verilens.xyz/
--> https://repeasy.wal.app/
--> https://docwalrus.vercel.app/
--> https://grainlify.0xo.in/

I am comfortable working within an existing codebase or independently , following project conventions, and delivering clean, maintainable, and well-structured solutions. My GitHub repositories can speak for themselves in demonstrating my experience and consistency across different types of projects.

I am confident I can contribute effectively and deliver high-quality results.

Thank you for your time and considering my application.

Regards,
Tybravo.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Tybravo to this issue.

[Chucks1093]

@Chucks1093 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hello, I'm a full stack engineer and I want to work on this issue.
I'll start by building a side by side document comparison view where PDFs and images can be opened together. I'll use PDF.js for documents and normal image rendering where needed. The two views will scroll together so users can easily spot differences.
After that, I'll highlight key conflicts like mismatched metadata, overlapping claims, or date issues, and add clear visual markers so nothing is missed. I'll include zoom controls, a simple way to switch comparison modes, and an export option that generates a clean comparison report with any annotations added.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Chucks1093 to this issue.

[ShantelPeters]

@ShantelPeters has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I would like to work on this issue , kindly assign please i'm ready to work.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @ShantelPeters to this issue.