Profile & Edit Profile Flow

As a user, I want to be able to view my profile, so that I can view how I look on Dearly.

Acceptance Criteria

Create the user profile page, while ensuring that when changing groups, only the images visible in select groups are shown and any other groups. When the setting buttons is clicked, it should show popup to edit profile. User should be able to take a photo form their camera or select from their photo library, user can also edit their information like name, username, bio, and birthday. Don't worry about the notification and nudge flow for now.

• Define what API endpoints are needed for the feature and write proper hooks for them with Tanstack Query/Mutation
• Define what components can be reused and create new component and variant if needed
• Combine hooks and components together to build the feature
• Handle visual rendering of empty data state, loading state, and error state with skeletons

Notes

• Ensure that when the update is pending, disable to save button so it's not spamming API call.
• Ensure that it will not fetch more data than needed to render on the screen to optimize for speed.
• Ensure that unnecessary refreshes/API call's are properly cached and aren't re-rendered again using useCallback and useMemo.
• Ensure that when you pull down the page, it automatically refetch the posts.

Resources

API Documentation
Frontend Practices
Tanstack Query
Tanstack Mutation

Design Notes

Interaction & Accessibility

• Switch group:
  • ADVANCED: slide up bottom sheet for selecting group
  • BASIC: a whole new page to select group
• Should show spinner when pulling down the page

Resources

Dearly on Figma - click to Hi-fis

Definition of Done

• All acceptance criteria are met.
• Tested and approved by the design team.
• Code review to ensure reusability and modularity.