A web-based construction takeoff tool built with Next.js, TypeScript, and shadcn/ui that allows users to measure distances and areas directly on PDF blueprints.

• 📄 PDF file upload and rendering
• 📏 Linear measurements with real-world units
• 📐 Area measurements for spaces
• 🔍 Scale calibration for accurate measurements
• 📱 Responsive design
• 🎨 Modern UI with shadcn/ui components
• 📄 Multi-page PDF support
• 💾 Page-specific measurements

• Next.js 15 - React framework
• TypeScript - Type safety
• PDF.js - PDF rendering
• shadcn/ui - UI components
• Tailwind CSS - Styling
• Lucide Icons - Icons

• Node.js 18+
• npm or yarn

1. Clone the repository:

git clone <repository-url>
cd <project-directory>

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open http://localhost:3000 in your browser.

1. Upload PDF: Click the file input to upload your PDF blueprint.

2. Set Scale:

   • Enter a known measurement length
   • Select the unit (feet, meters, or inches)
   • Click "Set Scale"
   • Click two points on the drawing that represent that known length

3. Take Measurements:

   • Use the "Measure" tool for linear measurements
   • Use the "Area" tool for area measurements
   • Click points on the drawing to create measurements
   • For areas, click near the starting point to complete the shape

4. Navigate Pages:

   • Use "Previous" and "Next" buttons to move between PDF pages
   • Measurements are saved per page

5. View Results:

   • Measurements are displayed in real-time on the drawing
   • A list of all measurements for the current page is shown below

src/
├── app/                  # Next.js app directory
├── components/          
│   ├── ui/              # shadcn/ui components
│   └ PdfViewer.tsx    # Main PDF viewer component
├── hooks/
│   └── usePdfHandler.ts # PDF handling logic
└── types/
    └── pdf.ts           # TypeScript definitions

• Built with Next.js App Router
• Uses TypeScript for type safety
• Implements a custom hook for PDF handling
• Utilizes two-canvas system for PDF and annotations
• Follows modern React patterns and best practices

This project is licensed under the MIT License - see the LICENSE file for details.