Skip to content

A web application to compare two PDF files side by side, highlight differences, and view previous comparison history.

Notifications You must be signed in to change notification settings

Sanghanmol/DocDiff

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

28 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ“„βœ¨ PDF Compare App

πŸš€ A modern PDF Comparison Tool built with Django (Backend) & React + Vite (Frontend).
Easily upload, compare, and track differences between two PDF files with an intuitive UI and history feature.


βœ… Features

  • πŸ“€ Upload two PDF files for comparison
  • πŸ” Extracts and compares text to highlight differences
  • πŸ“ Stores comparison history in the database
  • πŸ“Š View previous comparisons and reload them
  • 🎨 Clean React UI with Material UI and React-PDF

πŸ› οΈ Technologies Used

Component Technology Purpose
🧠 Backend Django + DRF API creation, storage, and comparison logic
πŸ’Ύ Database SQLite Lightweight storage for comparisons
πŸ“„ PDF Processing PyPDF2 (PyMuPDF) Extracts text content from PDFs
πŸ–ΌοΈ Frontend React + Vite + MUI UI, table, and PDF rendering
πŸ”— State Mgmt React Hooks State handling for file comparison

πŸ—οΈ Architecture & Design Choices

  • Decoupled Frontend & Backend
    • frontend/ – React + Vite app for UI
    • backend/ – Django REST Framework for APIs
  • Static File Integration – React build served via Django
  • Reusable APIs – Upload, Compare, and History endpoints
  • Simple DB – SQLite for local storage (can be replaced with Postgres/MySQL)

πŸ” How It Works – User Journey

  1. πŸ“„ Upload PDFs – User selects two PDF files
  2. 🧠 Text Extraction – Backend extracts text from both PDFs
  3. πŸ” Comparison – Differences are computed and summarized
  4. πŸ—ƒοΈ History Storage – Comparison details are saved in DB
  5. πŸ“œ Results Display – Side-by-side PDF view with difference summary

βš™οΈ Setup Instructions

πŸ”Ή 1️⃣ Backend Setup

  1. Go to backend folder cd backend

  2. Create virtual environment

  • python -m venv venv
  • source venv/bin/activate # Windows: venv\Scripts\activate
  1. Install dependencies pip install -r requirements.txt

  2. Create .env file (inside backend/)

  • DJANGO_SECRET_KEY=your_secret_key
  • DJANGO_DEBUG=True
  • DJANGO_ALLOWED_HOSTS=127.0.0.1,localhost
  1. Run migrations python manage.py migrate

  2. Start the backend server python manage.py runserver

πŸ”Ή 2️⃣ Frontend Setup

  1. Go to frontend folder cd frontend

  2. Install dependencies npm install

  3. Start development server npm run dev

  4. Build for production npm run build


πŸš€ Running the App

1️⃣ Start backend: python manage.py runserver

2️⃣ Start frontend (dev mode): npm run dev

3️⃣ Access the app: 🌐 http://127.0.0.1:8000


πŸ™ Acknowledgment

Made with ❀️ using Django + React + Vite + MUI to demonstrate a full-stack PDF comparison workflow.


About

A web application to compare two PDF files side by side, highlight differences, and view previous comparison history.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published