fix(profile): fix(profile): resolve real-time state desync between profile update form and DevCard using onSnapshot (#570)

[shivani11jadhav]

🚀 Final Pull Request Details for Issue #570

Description:
This PR successfully resolves the critical client-side state desynchronization glitch between the Profile Update Form settings and the dynamic visual DevCard preview component. Previously, updates to user profile metadata required a manual browser hard refresh (F5) to reflect on the card UI.

Key Technical Implementations:

• Reactive Local State: Refactored DevCard.tsx to handle a local reactive state variable realTimeUser initialized directly from the authentic user props context.
• Firestore onSnapshot Integration: Embedded a continuous live stream listener using onSnapshot bound to the active user's document path.
• Dynamic Collection Mapping: Enhanced the reference path to dynamically resolve and adapt whether the user belongs to the members or the admins collection based on their active role paradigm.
• Resource Cleanup Matrix: Configured an explicit unsubscribe cleanup function inside the useEffect hook stack to terminate the live database socket connection upon component destruction, eliminating any potential client memory leaks.
• Data Flow Uniformity: Connected all derived properties, animations, and elements (XP metrics, ranks, streak bars, achievements, badges, and social media anchor icons) to render from the reactive stream tokens.

Verification & Quality Assurance:

• Successfully ran npm run build local compilation check.
• Next.js successfully compiled all files and generated static pages across all 36 application routes with zero errors and zero warnings.

Fixes #570

[shivani11jadhav]

@Aditya948351 please review the pull request

[Aditya948351]

Great detailed description! Resolving the real-time state desync with onSnapshot is exactly what we needed for the DevCard. I'll review this soon.