[Feature] Build a pool member invitation system with QR code generation and deep link handling

[Sendi0011]

Getting Started

1. Fork the repository: https://github.com/JointSave-org/Joint_Save
2. Clone your fork:

git clone https://github.com/<your-username>/Joint_Save.git
cd Joint_Save

3. Create a new branch:

git checkout -b feat/pool-invite-qr-codes

---

Overview

Pool creators currently share invite links by manually copying the pool contract address and sending it over messaging apps. The existing /join/[contractId] route and join_requests table already support the invite flow, but the sharing experience is manual and error-prone — users must copy-paste a long Stellar address string, and there's no visual confirmation of which pool they're joining.

This issue adds QR code generation for pool invite links and deep link handling so pool creators can share a scannable QR code and members can join with a single scan.

Requirements

QR Code Generation

• Install qrcode.react (or qrcode if React-specific wrapper not needed) as a new dependency
• New component: PoolInviteQR on the group detail page (admin-only):
  • Renders a QR code encoding the full invite URL: https://[domain]/join/[contractAddress]
  • Below the QR code: pool name, pool type, and member count for confirmation
  • "Download QR" button that exports the QR code as a PNG file (use qrcode library's server-side rendering or canvas-to-blob approach)
  • "Copy Link" button that copies the invite URL to clipboard with a toast confirmation

Share Sheet Integration

• Add a "Share Invite" button on the group detail page that triggers the Web Share API (navigator.share()) with:
  • Title: "Join [pool name] on JointSave"
  • Text: "Join my [pool type] savings pool on JointSave. [description if set]"
  • URL: the invite link
• Fall back to a share modal with platform-specific buttons (copy link, download QR, email) if Web Share API is unavailable

Deep Link Handling

• Update the /join/[contractId] page to:
  • Read the from query parameter (optional) to track where the user came from (e.g., ?from=qr_scan)
  • Log the join method in the pool_activity table (activity_type: join_link_clicked, with metadata containing the referral source)
  • Display the pool preview (name, type, member count, total saved) before the user commits to joining — this already exists in the join page but should be verified to work correctly

Mobile Optimization

• The QR code should be large enough to scan from a phone screen (minimum 200x200px)
• The "Share Invite" button should be prominently placed (not hidden in a dropdown) on mobile

Acceptance Criteria

• QR code renders correctly on the group detail page for pool admins
• QR code encodes a valid URL that loads the /join/[contractId] page
• "Download QR" exports a readable PNG image
• "Copy Link" copies the invite URL and shows a confirmation toast
• "Share Invite" triggers the native share sheet on supported browsers
• Deep link from QR scan correctly loads the pool preview on the join page
• Join method (qr_scan, direct_link, share) is logged in pool_activity
• QR code is scannable from a phone screen at typical reading distance

[mxrtins04]

Hi maintainer, can i be assigned this issue pleasee?

[Promise278]

i have experienced with system designs and archecture i would love to work on these please

[cLamberti]

Hi maintainer! I'm a Full Stack Software Engineer with React/Next.js/TypeScript experience.

My approach: add qrcode.react as a dependency and build PoolInviteQR on the group detail page (admin-only), rendering a QR for https://[domain]/join/[contractAddress] with pool name/type/member count below it for confirmation, plus "Download QR" (canvas-to-blob PNG export) and "Copy Link" (clipboard + toast) buttons. "Share Invite" wires up navigator.share() with the specified title/text/url, falling back to a share modal (copy link, download QR, email) when the Web Share API isn't available. On the join page, I'll add the optional from query param, log activity_type: join_link_clicked to pool_activity with the referral source in metadata, and verify the existing pool preview (name, type, member count, total saved) still renders correctly before the user commits to joining. QR code sized at least 200x200px and the Share button placed prominently (not in a dropdown) on mobile.

I'll confirm the exact pool_activity table schema and how the existing join_requests flow logs activity today before wiring the new activity_type, so the new logging stays consistent with what's already there rather than guessing the shape.

Portfolio: https://portfolio-christopher-lamberti.vercel.app/

Given the moving parts (new dependency, new component, clipboard/share APIs, DB logging, mobile verification), I'd plan for a clean PR within 3-4 days of assignment. I'll use the branch already suggested in the issue (feat/pool-invite-qr-codes).

Best regards,
Christopher Lamberti

[Cyberking99]

Hello, please can I take this?

I am a full stack developer with experience in building dApps, web, and mobile applications.

[grantfox-oss]

🦊 GrantFox — @Cyberking99 has been assigned to this issue as part of the Official Campaign | FWC26 campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #187)
2. Your PR will be reviewed by the JointSave-org maintainers

Good luck! Track your progress on GrantFox.