Build avatar, file upload (mock), and image crop UI

[Abidoyesimze]

Epic

Page Design Issues (Dummy Data Only)

Description

• Create avatar component with placeholder, initials, and image
• Build mock file upload flow with progress and cancellation
• Add simple crop UI for square avatars (mock processing)
• Design spec (must use; measurable):
  • Tokens per Issue 3
  • Avatar sizes: 24/32/40/64
  • Upload dropzone keyboard accessible; focus/hover states consistent
  • Crop handles 8–12px hit area

Acceptance criteria

• Avatar component variants
• Mock upload with progress and cancel
• Crop UI works for square outputs
• PR includes screenshots and demo GIF

Suggested GitHub labels

frontend, media, components, priority-medium

---

[Menjay7]

Hi! I came across this issue and would love to work on it. I have experience with similar tasks and I'm confident I can investigate, implement a clean solution, and thoroughly test it before submitting a PR. If the issue is still open, I would appreciate it if you could assign it to me. Thank you!

[mac-dubem]

I have experience building frontend UI components and upload workflows. I can implement the avatar variants, mock upload flow with progress/cancel, and square crop UI, along with screenshots and a demo GIF for verification.

[watifee]

@watifee has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi maintainer, kindly assign this issue to me — my strong technical expertise and deep familiarity with complex codebases make me exceptionally well-positioned to deliver this implementation cleanly, correctly, and in full alignment with the repository's established patterns and standards. I bring a sharp attention to detail that ensures edge cases are handled gracefully, failure states are never overlooked, and every line of code I ship is purposeful and production-ready. You can count on me to close this right the first time — thoroughly tested, fully documented, and zero loose ends.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @watifee to this issue.

[Just-Bamford]

@Just-Bamford has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I'd love to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Just-Bamford to this issue.

[ezehalexa]

@ezehalexa has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I would like to work on this issue because I have extensive experience building interactive, pixel-perfect frontend interfaces and working with image manipulation components.

To resolve this, I will implement a clean, user-friendly UI for the avatar selection and integrate an image cropping library (such as react-image-crop or similar, depending on the stack) to handle the crop functionality smoothly. I will also build a robust mock file upload system to simulate the backend handling.

I focus heavily on component modularity, responsive design, and intuitive UX. I am ready to get started immediately and deliver high-quality frontend code for this feature.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @ezehalexa to this issue.

[grantfox-oss]

🦊 GrantFox — @Just-Bamford has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #465)
2. Your PR will be reviewed by the Neurowealth maintainers

Good luck! Track your progress on GrantFox.

[drips-wave]

Congratulations, @Just-Bamford! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @Just-Bamford: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊