This project is a single-page application (SPA) built with Next.js for the Frontend Technical Assessment. It allows users to upload PDF documents, annotate them with highlights, underlines, comments, and signatures, and export the annotated document as a PDF. The application features a modern, responsive design with an intuitive user interface.
- Node.js: Version 18 or higher
- npm: Comes with Node.js (or use
yarnif preferred) - Git: To clone the repository
- Clone the Repository:
git clone https://github.com/abdulhammed24/pdflux.git cd pdflux - Install Dependencies:
npm install
- Run the Development Server:
npm run dev
Open http://localhost:3000 in your browser to view the application.
- Build for Production (optional):
npm run build npm start
- Next.js: Framework for building the SPA with server-side rendering and static site generation capabilities.
- react-pdf: Renders PDF documents in the browser for display and interaction.
- pdf-lib: Manipulates and embeds annotations into the exported PDF.
- pdfjs-dist: Provides PDF rendering and text layer support for annotations.
- react-dnd: Implements drag-and-drop functionality for file uploads.
- signature_pad: Enables freehand signature drawing on the document.
- zustand: Lightweight state management for handling annotations and UI states.
- lucide-react: Provides modern, customizable icons for the UI.
- tailwindcss: Utility-first CSS framework for responsive and sleek styling.
- Next.js: Chosen for its SPA capabilities, built-in routing, and performance optimizations like Turbopack.
- react-pdf & pdf-lib: Essential for PDF rendering and manipulation, ensuring annotations are preserved in exports.
- react-dnd: Simplifies drag-and-drop with a robust API.
- signature_pad: Offers a lightweight solution for signature drawing.
- zustand: Keeps state management simple and performant without boilerplate.
- tailwindcss: Speeds up UI development with responsive, reusable styles.
- Challenge: Accurately mapping user clicks to PDF coordinates for annotations.
- Solution: Used pdfjs-dist text layer to align annotations with document content and normalized coordinates relative to the viewport.
- Challenge: Embedding highlights, underlines, and signatures into the PDF without quality loss.
- Solution: Leveraged pdf-lib to programmatically add annotations as PDF objects, ensuring fidelity to the original document.
- Challenge: Ensuring the annotation tools worked seamlessly across screen sizes.
- Solution: Used TailwindCSS with a mobile-first approach and dynamic viewport scaling for the PDF viewer.
- Annotation Presets: Save and reuse common annotation styles (e.g., favorite highlight colors).
- Multi-Page Support: Improve navigation and annotation across multiple PDF pages.
- Collaboration Features: Real-time annotation sharing with other users via WebSockets.
- Accessibility: Enhance keyboard navigation and screen reader support for better inclusivity.