FE - Implement User Profile Management in Ansopedia web app

[sanjaysah101]

Frontend Implementation for Enhanced User Profile Management in Ansopedia

Description:

The current Ansopedia frontend lacks functionalities to manage user profiles comprehensively. This limits users' ability to update their information and control its visibility. This issue outlines the frontend implementation aspects related to the proposed profile management API in the user service.

Frontend Requirements:

• Profile Editing:
  • Develop a user interface for users to edit and update their profiles. This includes fields for:
    • Personal Information (name, email, phone number, etc.)
    • Social Media Links (optional)
    • Address (optional)
    • Educational Details (schools, colleges, degrees, graduation years - optional)
    • Public/Private Profile Toggle (to control isPublic flag)
  • Implement validation rules for user-entered data to ensure data integrity.
• Profile Display:
  • Update user profile components to display the new profile fields (educational details, public/private status).
  • Implement logic to conditionally display profiles based on isPublic status (respect user privacy).
  • Consider displaying a verification badge if the user's account is verified (isVerified).

API Integration:

• Utilize the new profile management API endpoints from the user service for:
  • Fetching User Profile: Retrieve the user's profile data on page load or profile access.
  • Updating User Profile: Send user-edited profile data to the update endpoint after successful validation.

Error Handling:

• Implement proper error handling for API calls:
  • Display user-friendly messages for failed profile fetches (e.g., user not found, private account).
  • Inform users of validation errors during profile updates.
  • Consider displaying appropriate messages based on verification status (e.g., require verification for updates).

User Experience Considerations:

• Design an intuitive and user-friendly interface for profile editing.
• Provide clear feedback and validation messages during data entry.
• Implement loading indicators while fetching or updating profile data.
• Consider incorporating visual cues (icons, badges) to indicate verification status and profile privacy.

Testing:

• Test the frontend functionalities for various scenarios:
  • Successful profile updates and data retrieval.
  • Validation errors for invalid data entry.
  • Handling private profiles and unverified accounts.
  • Different user roles and access permissions (if applicable).

Benefits:

• Improved user experience with self-service profile management.
• Enhanced data accuracy and consistency with validation rules.
• Increased user control over profile visibility and information sharing.

Next Steps:

1. Collaborate with backend developers to ensure smooth API integration.
2. Design and implement user interface components for profile editing and display.
3. Implement API calls for profile fetching and updating with error handling.
4. Conduct thorough testing of all frontend functionalities and user interactions.

By implementing these frontend changes, we can seamlessly integrate with the backend profile management API, creating a robust and user-friendly profile management experience in Ansopedia.

UI

We need to design UI. currently look at this for refrence:

[ayushbharadva25]

I want to contribute

[sanjaysah101]

@ayushbharadva25 Yes, U can