Skip to content

Conversation

@Zaiidmo
Copy link

@Zaiidmo Zaiidmo commented Dec 10, 2025

✨ Summary

This PR introduces a new feature allowing users to download a polished,
branded PDF report containing their survey responses.
The report is generated client-side using pdf-lib, includes a modern
developer-friendly layout, and reflects the StateOfDev / GeeksBlaBla branding.

This closes a long-requested UX gap by giving respondents a personal,
shareable copy of their answers.


📄 Key Features

1. New /my-responses page

  • Loads authenticated user answers from Firestore.
  • Displays answers in a clean UI for on-screen review.
  • Provides a Download my report (PDF) action.

2. Fully custom PDF generator

Built with pdf-lib (no server required), including:

🎨 Layout & Styling

  • Tech-themed layout combining terminal + modern report aesthetics.
  • Custom header with StateOfDev and GeeksBlaBla logos.
  • Centered title, lighter subtitle, and subtle underline.
  • Metadata “card” with submission details.
  • Each section has its own visual block with:
    • Blue section header bar
    • Question → Answer pairs
    • Thin dividers for readability

🖼 Assets

  • Logos embedded directly into the PDF.
  • Footer on every page with:
    • StateOfDev.ma · GeeksBlaBla signature (center)
    • Page numbering (right)

🔧 Utilities

  • sanitizeForPdf() to safely remove unsupported glyphs (emojis, exotic chars).
  • wrapText() for accurate line wrapping using font metrics.

🧪 Tests

A full test suite was added covering:

  • sanitizeForPdf
  • wrapText
  • PDF generation “smoke test”
  • DOM + URL mocks to ensure proper download behavior

All tests pass.


🔍 Lint & Type Safety

  • Resolved all TypeScript + ESLint issues.
  • No remaining warnings in the new files.
  • Test environment stubs fixed to avoid ts/unbound-method and no-unsafe-*.

🧭 How to Use

  1. Complete the survey normally.
  2. After the “Thanks” page, click View & Download My Report.
  3. The /my-responses page displays your answers.
  4. Click Download my report (PDF) → generates a branded PDF file.

📸 Preview (Structure Overview)

Here are some screenshots of the entire functionality from the Thanks page to the first page of the generated doc

Screenshot 2025-12-10 at 4 08 20 pm Screenshot 2025-12-10 at 4 08 54 pm Screenshot 2025-12-10 at 4 09 21 pm

🚀 Why This Matters

This feature significantly improves survey UX by:

  • Giving participants something tangible and professional.
  • Reinforcing community engagement.
  • Increasing trust and transparency.
  • Creating a shareable artifact for career/portfolio use.

✔ Ready for Review

Feedback welcome!
Happy to adjust layout, spacing, copy, or branding as needed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant