feat: add public profile QR code sharing with image download#1821
Open
Pranav-chaudhari-2006 wants to merge 2 commits into
Open
feat: add public profile QR code sharing with image download#1821Pranav-chaudhari-2006 wants to merge 2 commits into
Pranav-chaudhari-2006 wants to merge 2 commits into
Conversation
Pranav-chaudhari-2006
requested a review
from Priyanshu-byte-coder
as a code owner
|
@Pranav-chaudhari-2006 is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel. A member of the Team first needs to authorize it. |
github-actions
Bot
added
gssoc26
GSSoC Label Checklist 🏷️@Priyanshu-byte-coder — please apply the appropriate labels before merging: Difficulty (pick one):
Quality (optional):
Validation (required to score):
|
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds a QR-code sharing flow for public profile URLs and introduces a modal UI to display/download the QR code, along with accompanying component tests and a local preview fallback for profile data.
Changes:
- Add
ProfileQrModalcomponent that renders a QR code and supports download/close interactions. - Add a “QR Code” action to
ShareProfileSectionthat opens the modal. - Add tests for
ProfileQrModal; addqrcode.reactdependency; add a mock profile fallback on public profile page fetch failure.
Reviewed changes
Copilot reviewed 5 out of 7 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| test/components/ProfileQrModal.test.tsx | Adds interaction tests for the new QR modal (rendering, closing, download). |
| src/components/ShareProfileSection.tsx | Adds QR Code button and state to open/close ProfileQrModal. |
| src/components/ProfileQrModal.tsx | Implements the QR modal UI, body scroll locking, and QR download behavior. |
| src/app/u/[username]/page.tsx | Wraps profile/session fetches with catch and adds a mock profile fallback for local preview. |
| package.json | Adds qrcode.react dependency required by the new modal. |
Comments suppressed due to low confidence (1)
test/components/ProfileQrModal.test.tsx:1
- Two issues here: (1) if the test fails before line 127,
toDataURLmay never be restored, leaking state into other tests—prefervi.spyOn(HTMLCanvasElement.prototype, \"toDataURL\")with automatic restoration or usetry/finally. (2) inside thecreateElementspy, callingdocument.createElement(tagName)re-enters the mocked function and can recurse if invoked; capture the original implementation before spying and call that for non-atags.
import React from "react";
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+83
to
+90
| let [profile, loggedInUsername] = await Promise.all([ | ||
| fetchPublicProfile(username, { includeAchievements: true }).catch(() => null), | ||
| getLoggedInGitHubUsername().catch(() => null), | ||
| ]); | ||
|
|
||
| // Temporary mock fallback for local front-end preview when Supabase is not connected | ||
| if (!profile) { | ||
| profile = { |
|
|
||
| const profileUrl = getProfileUrl(username); | ||
|
|
||
| if (!profile) { |
Comment on lines
+22
to
+23
| useEffect(() => { | ||
| if (!isOpen) return; |
Comment on lines
+31
to
+39
| document.addEventListener("keydown", handleKeyDown); | ||
| // Lock background scrolling when modal is open | ||
| document.body.style.overflow = "hidden"; | ||
|
|
||
| return () => { | ||
| document.removeEventListener("keydown", handleKeyDown); | ||
| document.body.style.overflow = "unset"; | ||
| }; | ||
| }, [isOpen, onClose]); |
Comment on lines
+103
to
+105
| <QRCodeCanvas | ||
| id="profile-qr-canvas" | ||
| value={profileUrl} |
Comment on lines
+70
to
+76
| <div | ||
| ref={modalRef} | ||
| role="dialog" | ||
| aria-modal="true" | ||
| aria-labelledby="qr-modal-title" | ||
| className="relative w-full max-w-sm transform overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-2xl transition-all animate-in zoom-in-95 duration-200 text-center" | ||
| > |
Comment on lines
+62
to
+65
| const backdrop = screen.getByRole("dialog").previousSibling; | ||
| if (backdrop) { | ||
| fireEvent.click(backdrop); | ||
| } |
Comment on lines
+126
to
+127
| // Clean up prototypes | ||
| HTMLCanvasElement.prototype.toDataURL = originalToDataURL; |
…vation, canvas ref and dev-gated fallback
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📱 Public Profile QR Code Sharing with High-Res Download
A premium, highly accessible in-person sharing solution for DevTrack public profiles. This feature enables users to generate a scannable, downloadable QR code of their public profile directly from the sharing section.
✨ Features Implemented
backdrop-blur-sm bg-black/60) utilizing Lucide Icons and smooth micro-animations (zoom-in-95 animate-in) that match the premium visual language of DevTrack.<username>-devtrack-qr.png).overflow = "hidden") when the modal is active and supports flexible dismiss mechanisms (backdrop click, explicit "X" button, or pressing theEscapekey).http://localhost:3000/u/<any_name>.📂 Codebase Changes
Components & Views
[NEW]ProfileQrModal.tsx: High-fidelity canvas-based QR Modal featuring download capability, esc-key capture, scroll management, and clean transitions.[MODIFY]ShareProfileSection.tsx: Integrates the "QR Code" control button alongside existing platforms, handling visibility states.[MODIFY]page.tsx: Introduces a frontend mock fallback if Supabase client environment variables are unavailable, ensuring zero local preview blockages.Testing Setup
[NEW]ProfileQrModal.test.tsx: Comprehensive testing suite evaluating conditional rendering, scroll-locking, multiple dismissal listeners (Esc/click outside), and download logic.Video Reference
devtrack.QR.code.added.mp4
🧪 Quality Verification
All validation and code quality checks have been successfully run locally:
1. Unit & Integration Tests
We implemented a complete test suite covering visibility, scroll lock, dismiss actions, and downloads.
test/components/ProfileQrModal.test.tsxResult: PASS (7/7 tests succeeded)
✓ test/components/ProfileQrModal.test.tsx (7)
✓ ProfileQrModal (7)
✓ does not render when isOpen is false
✓ renders modal content when isOpen is true
✓ calls onClose when Close button is clicked
✓ calls onClose when backdrop is clicked
✓ calls onClose when Escape key is pressed
✓ locks and unlocks body scroll appropriately
✓ triggers download of QR code when download button is clicked
2. TypeScript Compilation
No syntax, dependency, or structural type warnings were reported.
Command:
bash
npm run type-check
Result: Success (0 errors)
3. Production Build Validation
A clean, optimized production build was run to verify server-side rendering, routing structure, and PWA configurations.
Command:
bash
Remove-Item -Recurse -Force .next; npm run build
Result: Success (Compiled successfully)