feat: Build Public UPA (Universal Profile Address) Page

uchibeke commented 10 months ago

This is mostly a frontend task because we noticed we had mostly backend tasks.

Description

We are introducing a new feature, the Universal Profile Address (UPA) page, which serves as a personal hub for users to share their contact information, social profiles, and receive payments. This issue is open to contributions and is worth 2 Hacktoberfest Chimoney Issue points.

Features

Copy-able Payment Pointer: Users should be able to easily copy the payment pointer. See sample at
Bank Details: Display user's bank details with a lock icon to toggle visibility (this would be hidden by default and toggling show should require a passcode)
Social Media Profile Links: Optional fields for linking to popular social media profiles. See sample data
Portfolio Link: Field for users to add a link to their portfolio.
Bio Section: A section for users to write a short bio.
Professional Title: Field for users to add their professional title.
QR Code: Show a QR code that links to the user's UPA page (current page)
Contact Form: Click to popup form for visitors to send a direct message to the user. Requires message and Email address of sender.
Privacy and Other Policies: Links to privacy and other policies. Bottom of page
Verification Badge: Display verification badge for verified profiles.
Activity Feed: A section showing user highlights like travel, speaking engagements, etc.
Theme Switch: Allow users to switch between dark and light themes.
Pay Now Button: Button to open a payment modal where visitors can enter the payment amount and their email, which will then direct to an external payment page.

Technical Requirements

Build using Next.js and Material-UI (mui) for a modern, responsive design.
Ensure the page is SEO-friendly and performant.
Follow best practices for accessibility and user experience.

Acceptance Criteria:

All listed features are implemented and functional.
Responsive design ensuring the UPA page is accessible on various devices.
Proper error handling and validation where necessary.
Adequate test coverage.

Contribution Guidelines

Fork this repository and create a new branch for your work.
Make sure to follow the established coding standards and practices.
Create a pull request with your changes and provide a detailed description of the implementation and any additional notes.
Tag the maintainers for review.

Sample/Mock Data format for the user Profile is:

const user = {
      "meta": {
        "name": "John Doe",
        "email": "john.doe@example.com",
        // ... other existing user meta data
      },
      "upa": {
        "profile": {
          "professionalTitle": "Software Developer",
          "bio": "Passionate developer with a love for open source.",
          "portfolioLink": "https://portfolio.example.com",
          "socialLinks": {
            "linkedin": "https://linkedin.com/in/johndoe",
            "github": "https://github.com/johndoe",
            "twitter": "https://twitter.com/johndoe",
            // ... other social platforms
          },
          "verificationBadge": true,
          "activityFeed": [
            {
              "type": "travel",
              "description": "Traveled to San Francisco for a tech conference.",
              "date": "2023-10-20"
            },
            // ... other activities
          ]
        },
        "payment": {
          "paymentPointer": "$wallet.example.com/johndoe",
          "bankDetails": {
            "iban": "GB33BUKB20201555555555",
            "bic": "BUKBGB22",
            "bankName": "Bank UK",
            "accountName": "John Doe",
            "accountNumber": "12345678",
            "sortCode": "20-20-15"
          },
          "mobileMoney": {
            "provider": "M-Pesa",
            "accountNumber": "0712345678"
          },
          "crypto": {
            "bitcoin": "1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa",
            "ethereum": "0xAb5801a7D398351b8bE11C439e05C5B3259aeC9B",
            // ... other cryptocurrencies
          }
        }
      }
    }

The standard format above can be used by Data Providers to power UPA pages.

For inspiration, see sample profile pages:

Looking forward to your contributions!

Screenshots

No response

Ready to Work?

[ ] I want to work on this issue

vinfinity7 commented 10 months ago

assign me this @uchibeke

uchibeke commented 10 months ago

assign me this @uchibeke

Done

Danimoz commented 10 months ago

I want to work on this @uchibeke

uchibeke commented 10 months ago

I want to work on this @uchibeke

Done

Gudnessuche commented 10 months ago

This is cool

Dejare commented 10 months ago

hello ser ✋🏾

Babsmutini commented 10 months ago

Can i also work on this, i have a nice idea on how it should be implemented

uchibeke commented 10 months ago

Can i also work on this, i have a nice idea on how it should be implemented

Yes please. Go for it. Make it modular and the profile data portable because the Frontend should be able to plug into 3rd party user profile/payment info providers and potentially also hosted by users

Happy to provide feedback on your approach, if needed

uchibeke commented 10 months ago

@Danimoz @Babsmutini @Dejare and @vinfinity7

how’s this going?

Babsmutini commented 10 months ago

still on it, I had some bit of unclarity regarding what it meant to do. Can I relate it to how Linktree is? whereby a user has a profile with all their profile accounts in one place

uchibeke commented 10 months ago

still on it, I had some bit of unclarity regarding what it meant to do. Can I relate it to how Linktree is? whereby a user has a profile with all their profile accounts in one place

Yes. Like the examples I shared. What is the purpose of this page?

an easy page that has my payment info
and also has some of my social info but priority should be payment info

Also, read through each of the lines in the issue. There’s additional insight about what this is and it’s more than just a linktree page since it’s open source, data can be pulled from multiple providers (you don’t have to worry about this) and had payment and KYC built in.

Danimoz commented 10 months ago

Still on it too

Danimoz commented 10 months ago

Please can I use tailwind instead of MUI

uchibeke commented 10 months ago

Please can I use tailwind instead of MUI

Yes. You can use tailwind. Good choice!

Chimoney / chimoney-community-projects