Add Profile Linking and Smart QR Support to DevCard

[yosobanta]

Summary

Implement dynamic profile integration and smart QR generation for DevCard, allowing users to add and manage developer platform links (GitHub, LinkedIn, LeetCode, GFG, Gmail, etc.) and generate a customizable QR code that redirects to their unified profile card.

Contexts

Currently, the project mainly focuses on UI/UX and lacks actual profile management functionality. Users cannot add or store their developer/social profiles, and there is no backend/data layer to support a unified digital identity system.

This feature will introduce:

• Profile link management
• Persistent user data handling
• Dynamic rendering of profile cards
• Custom QR code generation containing all linked profiles
• Better real-world usability for networking and portfolio sharing

The feature aligns strongly with the project's core idea: “One Tap. Every Profile.”

Tasks

• Design database schema/model for storing user profile links
• Create form/UI for adding and editing platform links
• Add validation for URLs and user inputs
• Implement backend APIs for profile CRUD operations
• Dynamically render added profiles on DevCard
• Generate QR code linked to user’s public DevCard
• Add customizable QR styles/themes (optional enhancement)
• Ensure responsive behavior across devices
• Integrate copy/share functionality for profile links
• Add loading states and error handling

Acceptance Criteria

• Users can add/edit/delete multiple platform profiles
• Supported platforms render correctly on the DevCard
• QR code correctly redirects to the generated public profile
• Invalid links are properly rejected with validation messages
• Data persists after refresh/login
• Responsive UI works on mobile and desktop
• API routes are tested
• Documentation updated if new setup/config is required

Area

backend / web

Difficulty

Medium–Hard

[Kaustav2706]

Hello @maintainer 👋,

I’m a GSSoC 2026 contributor and would love to work on this feature.

This is a highly impactful enhancement that aligns perfectly with the core vision of DevCard — “One Tap. Every Profile.” By enabling users to manage all of their developer and social profiles in one place and generate a shareable QR code, this feature will transform DevCard into a practical networking and portfolio-sharing platform.

Proposed Implementation

I plan to implement a complete end-to-end solution that includes:

Profile Link Management

Users will be able to add, edit, and delete links for multiple platforms such as:

• GitHub
• LinkedIn
• LeetCode
• GeeksforGeeks
• Gmail
• Portfolio Website
• Twitter/X
• Codeforces
• HackerRank

🗄️ Backend & Database Design

• Design a scalable schema to store platform names, URLs, icons, and metadata.
• Create RESTful API endpoints for CRUD operations.
• Validate all incoming data and sanitize user input.
• Persist data in the database so profiles remain available after refresh/login.

Dynamic DevCard Rendering

• Fetch profile data from the backend.
• Dynamically render only the platforms added by the user.
• Display platform icons and clickable links.
• Ensure responsive and visually consistent layout.

Smart QR Code Generation

• Generate a QR code that links to the user’s public DevCard.
• Allow users to download and share the QR code.
• Optional support for custom styles, colors, and branding.

Sharing Features

• Copy public profile URL to clipboard.
• Share DevCard and QR code easily.
• Download QR code as PNG.

UX Improvements

• Loading states during API requests.
• Error handling with user-friendly messages.
• URL validation and duplicate platform checks.

🛠️ Technical Approach

Depending on the project stack, I will use:

• React / Next.js
• TypeScript
• Tailwind CSS
• Node.js / Express or Next.js API routes
• Database (MongoDB / PostgreSQL / Supabase, based on existing setup)
• QR generation library such as qrcode.react

🧪 Testing Plan

I will verify that:

• Users can successfully add, edit, and delete profile links.
• Invalid URLs are rejected with clear validation messages.
• Data persists correctly after refresh.
• QR codes redirect to the correct public DevCard.
• Share and copy features work as expected.
• The UI remains responsive on mobile, tablet, and desktop.

Benefits to the Project

This feature will:

• Introduce real profile management functionality.
• Turn DevCard into a fully usable digital identity platform.
• Enhance networking and portfolio sharing.
• Provide a polished and professional user experience.

I will ensure the implementation is clean, modular, well-documented, and aligned with the project’s coding standards.

Please assign this issue to me under GSSoC 2026. I’d be excited to contribute this core feature to DevCard.

Thank you! 🚀