Hiring update + New task: Build an Online PDF Editor (assignment + implementation steps)

Dear All Candidates,

Congratulations! You have been selected for the next round of our hiring process. For the next round we are asking candidates to build a small application: an Online PDF Editor using PHP, MySQL (phpMyAdmin) and modern frontend techniques.

Please find full project details, expectations, and submission instructions in the attached task brief (or below). Your final submission must include the source code, a SQL dump (for phpMyAdmin import), and a recorded screen walkthrough showing the complete application working. Send the recording and any questions (if required) to official.cswithgk@gmail.com.

Deadline: Please follow the timeline given by the recruitment team.

Best regards,

Recruitment Team — CSwithGK

Project Overview — What you must build

Create a web-based Online PDF Editor that allows a user to upload a PDF and perform in-place edits on a single-screen interface without converting the file to other formats.

Key capabilities (required):

  • Upload and open any PDF (multi-page supported).
  • Single-screen editor (render the PDF pages and show a toolbar + properties panel on the same screen).
  • Add text, move/resize text boxes, change font size and color.
  • Add highlights, draw freehand annotations, add shapes (rectangle/circle), and sticky notes/comments.
  • Add or remove pages (basic controls: insert blank page, delete page, reorder pages).
  • Save edits back to a PDF file (preserve original content where possible and embed the edits as real PDF content, not images).
  • Download the edited PDF.
  • User authentication (simple accounts) and document listing (My Documents) — backed by MySQL/phpMyAdmin.

Optional but nice-to-have features (bonus points):

  • Text editing / in-place text replacement within existing PDF text (if feasible).
  • Signature placement or image insertion (upload PNG/JPG and place on PDF).
  • Version history (save multiple versions per doc).
  • Real-time autosave.

Technology Stack (mandatory)

  • Backend: PHP (7.x or 8.x)
  • Database: MySQL (provide SQL dump for phpMyAdmin import)
  • Frontend: HTML5, CSS3, JavaScript
  • Use client-side PDF rendering (recommended: PDF.js to render pages in canvas) and a JS PDF manipulation library (recommended: pdf-lib or other open-source library) to compose edits in-browser before sending to server.
  • For server-side PDF processing (merging, flattening annotations, or preparing final PDF), you may use PHP libraries like setasign/fpdi and tcpdf (available via Composer). If you choose other open-source PHP libraries, mention them in your README.

Important: Solutions that simply rasterize the page to an image and save an image-only PDF will be penalized. The edits should be vector/text/annotation-aware where feasible.

 

Database Schema (suggested)

Provide a MySQL schema and SQL dump. Suggested tables:

  • users — stores candidate users/test accounts
    • id (INT, PK, AUTO_INCREMENT)
    • username (VARCHAR)
    • email (VARCHAR)
    • password_hash (VARCHAR)
    • created_at (DATETIME)
  • documents — stores uploaded PDFs and metadata
    • id (INT, PK, AUTO_INCREMENT)
    • user_id (INT, FK -> users.id)
    • filename_original (VARCHAR)
    • filename_stored (VARCHAR)
    • title (VARCHAR)
    • pages (INT)
    • created_at (DATETIME)
    • updated_at (DATETIME)
  • document_versions — optional for versioning
    • id, document_id, version_label, filename_stored, created_at
  • annotations — optional if you store edits separately
    • id, document_id, user_id, page_number, type, data(json), created_at

Make sure to provide a db_dump.sql so evaluators can import it using phpMyAdmin.

File/Folder Structure (recommended)

/online-pdf-editor/

  /public/                # web root

    index.php             # single screen app loader

    auth.php              # login/logout/register endpoints

    upload.php            # handle uploads

    save.php              # save edited PDF

    api/                  # JSON endpoints (list docs, get doc, delete)

  /app/

    /controllers/

    /models/

  /vendor/                # composer libraries

  /storage/uploads/       # saved PDFs

  /storage/versions/      # saved versions

  README.md

  db_dump.sql

6) Detailed Implementation Steps (step-by-step)

A. Setup and Environment

  1. Prepare local environment: PHP 7.4+/8.x, MySQL, phpMyAdmin, Composer.
  2. Clone or create project folder and initialize composer.
  3. Create the database and import db_dump.sql (provide this file).
  4. Create config.php with DB credentials and an uploads path constant. Keep sensitive configs out of the repo using .env or exclude config.php from public sharing in real projects.

B. User Authentication

  1. Create simple registration and login (session-based).
  2. Store passwords using password_hash() and password_verify().
  3. Protect upload and editor pages behind auth checks.

C. Upload Flow

  1. Create upload.php to accept PDF uploads (validate MIME type application/pdf and file size limit).
  2. Save the uploaded file into /storage/uploads/{user_id}/{timestamp}_{rand}.pdf.
  3. Record file metadata in the documents table.

D. Single-Screen Editor UI

  1. Build index.php to show a layout with:
    • Top toolbar (select tool: text, draw, highlight, shape, comment, add page, remove page, save, download)
    • Left sidebar (page thumbnails)
    • Main canvas area where the selected page renders
    • Right properties panel (font size, color, stroke width, opacity)
  2. Use PDF.js to render the currently selected page onto an HTML5 <canvas>.
  3. Overlay a transparent layer on top of the canvas (or multiple layers) to host interactive HTML elements for annotations (text boxes as absolutely positioned divs, SVG for drawings, etc.).
  4. Make sure all interactive elements can be moved, resized, and edited. Use a lightweight JS UI helper (or write your own drag/resize handlers).

E. Implementing Annotations and Edits

Approach 1 (client-side composition) — recommended:

  • Capture all edits as a JSON model (list of operations: addText, drawPath, highlight, addImage, addPage, deletePage, etc.).
  • When user clicks Save, use a clientside PDF library (like pdf-lib) to open the original PDF in the browser, apply the edits programmatically to each page (add text, draw shapes, embed images) and then produce a new PDF blob.
  • Upload the final PDF blob to save.php using fetch() as multipart/form-data or application/octet-stream.

Approach 2 (server-side flattening):

  • Send the edits JSON to the server and use server-side PDF libraries (FPDI + TCPDF) to apply edits and produce final PDF. This requires more server-side PDF handling knowledge but is acceptable.

Make sure the saved PDF preserves vector/text constructs whenever possible and does not simply produce raster-only pages.

F. Saving, Versioning and Download

  1. When the server receives the final PDF, store it in /storage/versions/ and create a new document_versions record.
  2. Update documents.updated_at and optionally documents.pages if page count changed.
  3. Provide a download endpoint download.php?doc_id=... that streams the PDF with proper Content-Type: application/pdf headers.

G. Additional Requirements

  • Add server-side validation for file types and sizes.
  • Implement CSRF token for form submissions.
  • Sanitise all inputs and validate session ownership (one user shouldn't access another user's documents).
  • Use prepared statements for DB queries.

7) API Endpoints / End-user Flows (Suggested)

  • POST /auth/register.php — create account
  • POST /auth/login.php — login
  • POST /upload.php — upload PDF
  • GET /api/documents.php — list user documents (JSON)
  • GET /api/document.php?id= — get document metadata
  • POST /api/save.php — save edited PDF (receive PDF blob or edits JSON)
  • GET /download.php?id= — download final file

8) Deliverables (exactly what to submit)

  1. Full source code (zipped). Follow the folder structure above.
  2. db_dump.sql for importing into phpMyAdmin (must be included).
  3. A README.md with setup and run instructions, composer packages used, and any shortcuts.
  4. A short test user account and credentials to access the app (or instructions to create one).
  5. A screen recording (MP4 preferred) that demonstrates the full app flow: registration/login, uploading a sample PDF, adding text/annotations/shapes, saving, downloading the edited PDF, and the files present in storage (show phpMyAdmin or file listing). Send this recording file to official.cswithgk@gmail.com — mention your candidate name and email in the message body.
  6. (Optional) A short notes.txt listing additional features you implemented and any known limitations.

9) Evaluation Criteria / Marking Rubric

Your submission will be evaluated on:

  • Functionality (40%) — Does the app let a user edit and save a PDF on a single screen with required editing tools?
  • Code quality (20%) — Clean, readable, modular code, proper naming, and comments where necessary.
  • Database & Security (15%) — Proper use of MySQL, prepared statements, password hashing, and basic web security measures.
  • UI/UX & Usability (15%) — Single-screen flow, intuitive toolbar, responsive layout.
  • Extras & Documentation (10%) — Extra features, a clear README, and a proper screen recording demonstration.

10) Testing Checklist (what the evaluator will test)

  • Can register and login.
  • Upload a multi-page PDF successfully.
  • Render each page clearly in the editor.
  • Add text, move/resize it, change font size/color.
  • Draw freehand and add highlights.
  • Add a new page and delete a page.
  • Save and download an edited PDF. Verify edits are present in the downloaded PDF.
  • Check database entries in phpMyAdmin.
  • Check that submitted files are stored in `storage/uploads

Tags:
Previous Post Next Post
Share to other apps
Copy Post Link

Contact Form