Frontend: Build User Profile & Settings Page

[mftee]

Description:
Implement a user profile and settings page with tabbed interface for managing personal information, security settings, notification preferences, payment methods, and account preferences.

Page Route: /profile or /settings

Requirements:

• Tabbed navigation interface
• Profile information editing
• Password change functionality
• Notification preferences
• Payment method management
• Account deletion option
• Responsive layout

Tabs to Implement:

1. Profile Tab

• Profile Photo Upload (with crop functionality)
• Personal Information: Full Name, Email (read-only with verified badge), Phone Number, Company Name, Role badge (display only)
• Address Information: Street, City, State, ZIP, Country
• Save Changes button

2. Security Tab

• Change Password form (current password, new password, confirm password with strength meter)
• Two-Factor Authentication (2FA): Enable/Disable toggle, QR code display, backup codes generation
• Active Sessions: List with device type, browser, location, last activity, revoke buttons
• Login History: Recent logins table with timestamp, location, device
• Logout all other sessions button

3. Notifications Tab

• Email Notifications (toggle all, individual notification types)
• SMS Notifications (toggle all, phone verification required)
• In-App Notifications (toggle all)
• Notification Types: Shipment Updates, Payment Notifications, New Messages, Document Uploads, System Announcements, Marketing
• Frequency Settings: Instant, Daily Digest, Weekly Summary

4. Payment Methods Tab

• List of saved payment methods (card brand logo, last 4 digits, expiration, default badge)
• Add New Payment Method button (opens modal)
• Payment History table (recent transactions)
• Download invoices functionality

5. Preferences Tab

• Language Selection
• Timezone
• Date Format (MM/DD/YYYY, DD/MM/YYYY, etc.)
• Currency (USD, EUR, GBP, etc.)
• Theme (Light, Dark, System)
• Measurement Units (Imperial, Metric)
• Privacy Settings: Profile visibility, show email/phone toggles
• Application Settings: Default dashboard view, items per page, email signature

6. Account Tab

• Account Information (read-only): User ID, Account created date, Last login, Account status
• Data Export: Request data export, download link when ready, GDPR compliance note
• Delete Account: Warning message, confirmation modal, re-enter password, final confirmation checkbox

Components to Create:

/components/profile/
├── ProfileLayout.tsx (main layout with tabs)
├── TabNavigation.tsx (tab switcher, reusable)
├── ProfileTab.tsx
├── SecurityTab.tsx
├── NotificationsTab.tsx
├── PaymentMethodsTab.tsx
├── PreferencesTab.tsx
├── AccountTab.tsx
├── AvatarUpload.tsx (reusable)
├── PasswordChangeForm.tsx
├── TwoFactorSetup.tsx
├── ActiveSessionsList.tsx
├── PaymentMethodCard.tsx (reusable)
├── AddPaymentMethodModal.tsx
├── NotificationToggle.tsx (reusable)
├── DeleteAccountModal.tsx
└── DataExportSection.tsx

/components/shared/
├── Tabs.tsx (reusable tabs component)
├── FormSection.tsx (reusable form wrapper)
├── ConfirmationModal.tsx (reusable)
└── CropImageModal.tsx (reusable image cropper)

Technical Requirements:

• react-dropzone for file upload
• react-image-crop for avatar cropping
• qrcode.react for 2FA QR codes
• react-credit-cards-2 for card display
• Form validation with react-hook-form + zod
• State management with Zustand or Context

Form Validation:

• Full name: minimum 2 characters
• Email: valid email format
• Phone: valid phone format (optional)
• Password: minimum 8 characters, uppercase, lowercase, number
• Payment card: valid card number, expiry date, CVV

Password Strength Indicator:

• Visual meter (5 levels: Very Weak, Weak, Fair, Good, Strong)
• Color-coded bars (red, orange, yellow, blue, green)
• Real-time feedback as user types
• Requirements checklist

2FA Setup Flow:

1. User clicks Enable 2FA
2. Display QR code for authenticator app
3. User scans with app
4. User enters verification code
5. Generate backup codes
6. Confirm enablement

Acceptance Criteria:

• All 6 tabs implemented and functional
• Tab navigation works smoothly
• Profile form validation working
• Avatar upload with crop functionality
• Password change with validation and strength meter
• 2FA setup flow (QR code + verification)
• Active sessions list with revoke functionality
• Notification toggles persist to database
• Payment methods CRUD operations
• Preferences save correctly
• Account deletion with confirmation flow
• Responsive design (tabs stack on mobile)
• Form dirty state detection (unsaved changes warning)
• Loading states on save operations
• Success/error toast notifications
• TypeScript: no type errors
• All forms use react-hook-form + zod

Design Guidelines:

• Clean, organized layout
• Consistent spacing and typography
• Clear visual hierarchy
• Destructive actions (delete) use red color
• Success actions use green
• Disabled states clearly visible
• Professional, trustworthy design

Testing Requirements:

• Test all form validations
• Test image upload and crop
• Test password strength meter
• Test notification toggles
• Test with different user roles
• Test responsive breakpoints
• Test unsaved changes warning

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 200 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[Josue19-08]

@Josue19-08 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hello maintainers 👋

I’m Josué, an experienced open-source contributor with a strong background in blockchain-oriented systems and full-stack development. I’ve worked on multiple projects involving Stellar and Soroban smart contracts, backend APIs, and frontend applications built with React, always paying close attention to code organization, performance, and user experience.

I’m used to contributing in collaborative open-source environments and understand the importance of clear scope definition, clean implementations, and maintainable solutions. From initial analysis to final pull request, I follow a structured approach that ensures reliability and long-term value for the project.

This issue is well aligned with my experience, and I’m confident I can provide a high-quality solution efficiently. Feel free to check my GitHub profile to review my previous contributions and technical work across different repositories.

I’m excited about the opportunity to contribute, collaborate with the maintainers, and help push this task to completion with a professional and results-driven mindset.

Best regards.

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

[Marvelousmicheal]

@Marvelousmicheal has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

can I work on this

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

[DanielEmmanuel1]

@DanielEmmanuel1 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hello Team, I’d be happy to take on the User Profile & Settings Page.

I’ve worked on several React/TypeScript dashboards that involve tabbed layouts, complex forms, and security-related features, so this setup is very familiar to me. I’m comfortable using react-hook-form with zod, building reusable components, and managing state cleanly with Zustand or Context.

I’ve previously implemented profile pages with avatar uploads and cropping, password strength indicators, 2FA flows with QR code verification, session management, notification settings, and payment method CRUD. I tend to be detail-oriented when it comes to validation, responsiveness, accessibility, and handling edge cases like unsaved changes or destructive actions.

I can follow the proposed structure, keep the UI clean and consistent, and deliver a solid, type-safe implementation that meets the acceptance criteria.

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

[Sandijigs]

@Sandijigs has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

hi My name is Sandra.
I have reviewed the issue and understand what needs to be done
I am a fullstack software/ Blockchain Engineer with over 6years of experience web2 experience(Fullstack) and 2 year web3 experience (JavaScript,TypeScript, Rust ,Python, Soroban,Solidity,(Backend, frontend, Mobile and smart contracts) ). I have contributed to several projects in the stellar ecosystem. . please Assign this Issue to me

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

[Emmzyemms]

@Emmzyemms has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I’d like to work on this frontend issue. I have experience with Web3 UI integration, wallet connections, and responsive React-based interfaces.
I can start immediately. Thanks!

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

[samuelgodsgift]

@samuelgodsgift has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I have 5+ years of experience. I would love to take on this issue! Kindly assign.

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

[Macnelson9]

@Macnelson9 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi team, I’d like to work on this issue.

I’m a Frontend Developer who thrives at the intersection of UI polish + product usability, and I’ve shipped responsive components/pages using Next.js/React + Tailwind (including interactions, animations, and pixel-accurate Figma builds).

What I’ll deliver

User Profile & Settings Page implemented to match the design/spec

Responsive behavior (mobile + desktop), no layout breakage

Hover/focus states + accessible semantics

Clean, reusable components and consistent styling

Approach

Review the design/spec and existing code patterns

Build the UI + interactions

QA on multiple breakpoints + open a PR with screenshots/video

If assigned, I’ll start immediately and share progress updates in the PR.

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

[Godsmiracle001]

@Godsmiracle001 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hello maintainer, i will love to work on this issue?

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

[gelluisaac]

@gelluisaac has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi! I’m a software engineer with hands-on experience in blockchain development, smart contracts, and full-stack systems. ’d be excited to contribute and help move this project forward.

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

[KingFRANKHOOD]

@KingFRANKHOOD has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hello, my name is Frankhood. I’m a frontend developer with hands-on experience building clean, responsive interfaces using React, Next.js, and Tailwind CSS.

I focus on writing clear, maintainable code and making sure features work as expected end to end, not just in isolation. I communicate progress regularly and keep things transparent as I work. I’m confident I can complete this task within an ETA of 24 HOURS while providing consistent updates throughout the process.

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