📄 PDF Annotator - Full Stack Application
A full-stack application to upload, view, and annotate PDF documents with persistent highlights. Built with React, Node.js, and MongoDB.
🚀 Features
🔑 Authentication – Secure JWT-based login & registration
📂 PDF Upload & Storage – UUID-based local storage
👀 PDF Viewer – Render PDFs with pagination & zoom (PDF.js)
✏️ Text Highlighting – Select & highlight text with color options
📌 Highlight Management – Save, view, and delete highlights
📚 User Dashboard – Manage uploaded PDFs
🔎 Search – Find PDFs and highlights
📱 Responsive Design – Works on desktop, tablet, and mobile
🏗️ Architecture Frontend (React) → Backend (Node.js + Express) → Database (MongoDB) PDF.js Viewer → Auth / File / Highlight APIs → Users, PDFs, Highlights
⚙️ Tech Stack
Frontend: React 18, React Router, PDF.js, Axios, Context API
Backend: Node.js, Express, JWT, Multer, bcryptjs, Mongoose
Database: MongoDB (local or Atlas)
Other: UUID, Helmet, dotenv
🛠️ Setup Instructions
- Backend cd pdf-annotator-backend npm install cp .env.example .env # configure MongoDB + JWT_SECRET npm run dev
Runs on http://localhost:5000
- Frontend cd pdf-annotator-frontend npm install cp .env.example .env # set REACT_APP_API_URL=http://localhost:5000/api npm start
Runs on http://localhost:3000
🔗 Key API Endpoints
POST /api/auth/register → Register user
POST /api/auth/login → Login user
POST /api/pdfs/upload → Upload PDF
GET /api/pdfs → Get all PDFs
POST /api/highlights → Create highlight
GET /api/highlights/:pdfUuid → Get highlights for a PDF
📦 Project Structure pdf-annotator-backend/ ├── models/ # User, PDF, Highlight ├── routes/ # Auth, PDFs, Highlights ├── middleware/ # Auth, Error handler └── server.js
pdf-annotator-frontend/ ├── src/components/ # Auth, Dashboard, PDFViewer, UI ├── src/contexts/ # Auth, PDF, Toast contexts └── src/App.js
🔮 Future Enhancements
Drawing tools (freehand, arrows, shapes)
Notes and tagging for highlights
Cloud storage (Google Drive, Dropbox)
Real-time collaboration & sharing