search

Betarena / boilerplate

Betarena Template Repository
0 stars 0 forks source link

[FEATURE]: Implement Author Profile for Betarena #12

Open jonsnowpt opened 2 weeks ago

jonsnowpt commented 2 weeks ago

Is there an existing issue for this?

📝 Description

Develop the author profile section for Betarena, which displays user profiles as authors, including their publications and other relevant information. The profile will offer functionalities for users to subscribe or follow the author.

Features:

  1. Profile Information:

    • User Avatar
    • Username
    • Name
    • About
    • Followers count
    • Following count
    • Subscribers count
    • Option to share the user profile

  2. Highlighted Publication:

    • Publication Avatar
    • Publication Name
    • Author's Name
    • About information for the publication

  3. Articles List:

    • Feature image (if available)
    • Avatar
    • Author Name
    • Reading time
    • Published date
    • Article title
    • Tags associated with the articles

  4. Actions:

    • Subscribe to the user/author
    • Follow the user/author
    • Edit Profile (for the profile owner)

  5. Views:

    • Visitor View: What any visitor sees when viewing an author's profile.
    • Owner View: What the user sees when viewing their own profile.

  6. Theme Support:

    • Available on Desktop, Tablet, and Mobile.
    • Supports both light and dark themes.

Design Reference:

Use the provided screenshots as the design reference for both the visitor view and the owner view.

Implementation Steps:

  1. Set up Firestore and Hasura:

    • Ensure Firestore and Hasura connections are configured.
    • Implement data fetching logic using Redis first, then fallback to Hasura.

  2. Profile Page Components:

    • Create components for displaying user avatar, username, name, about, followers, following, and subscribers count.
    • Add share profile functionality.

  3. Highlighted Publication:

    • Create a component to display the highlighted publication details.

  4. Articles List:

    • Create a component to list articles with all the required details.

  5. Actions:

    • Implement subscribe and follow functionalities using Firestore endpoints.
    • Add an edit profile button for the owner view.

  6. Views and Themes:

    • Implement responsive design for desktop, tablet, and mobile.
    • Implement theme switching for light and dark modes.

  7. Testing:

    • Test all functionalities thoroughly on different devices and themes.
    • Ensure data fetching logic works correctly with both Redis and Hasura.

Assets:

Screenshot 1 Screenshot 2 Image

Image

Deliverables:

Timeline:

Ensure to follow best practices for code quality and maintainability throughout the implementation.

Feature target platform availability

URL

USER:

{url}/a/user/{username}

SPORTSTACK

{url}/a/sportstack/{username}

💠 Feature required data

Data Sources:

Endpoints:

Data Logic:

⚡️ Cache

Use the already cached articles on Redis when available.

🔎 SEO

Author about Subscribers Link Publication name and link Publication about on articles: Publication name and link Title and link Tags and links

🔎 SEO DETAILS

FOR THE USER PROFILE:

Use the betarena_prod authors seo_details table user

{
  "main_data": {
    "title": "{name} - Betarena",
    "noindex": false,
    "keywords": "{name}, betarena wos",
    "nofollow": false,
    "canonical": "{url}/a/user/{username}",
    "description": "Read writing from {name} on Betarena WOS. {about}"
  },
  "opengraph": {
    "url": "{url}/a/user/{username}",
    "type": "website",
    "title": "{name} - Betarena",
    "images": [
      {
        "alt": "{name} - Betarena",
        "url": "{profile_photo}",
        "width": 88,
        "height": 88
      }
    ],
    "locale": "en",
    "description": "Read writing from {name} on Betarena WOS. {about}"
  },
  "twitter_card": {
    "site": "@betarenasocial",
    "image": "{profile_photo}",
    "title": "{name}, Betarena",
    "image_alt": "{name} - Betarena",
    "description": "Read writing from {name} on Betarena WOS. {about}"
  }
}

Variables used:

{name} = Firestore Name {about} = Firestore About {profile_photo} = Firestore Profile Photo

SPORTSTACK:

Use the betarena_prod authors seo_details table sportstack

{
  "main_data": {
    "title": "{username} - Betarena",
    "noindex": false,
    "keywords": "{username}, betarena wos",
    "nofollow": false,
    "canonical": "{url}/a/sportstack/{username}",
    "description": "Read writing from {username} on Betarena WOS. {about}"
  },
  "opengraph": {
    "url": "{url}/a/sportstack/{username}",
    "type": "website",
    "title": "{username} - Betarena",
    "images": [
      {
        "alt": "{username} - Betarena",
        "url": "{avatar}",
        "width": 88,
        "height": 88
      }
    ],
    "locale": "en",
    "description": "Read writing from {username} on Betarena WOS. {about}"
  },
  "twitter_card": {
    "site": "@betarenasocial",
    "image": "{avatar}",
    "title": "{username} - Betarena",
    "image_alt": "{username} - Betarena",
    "description": "Read writing from {username} on Betarena WOS. {about}"
  }
}

Variables used:

{username} = Hasura {about} = Hasura {avatar} = Hasura

TRANSLATIONS

betarena_prod translation author_profile

Anything else? Remarks

https://www.figma.com/design/KLZ8I88MggBM3YpHi8jSzj/BTA-Betarena?m=dev&node-id=0-1

Related projects this feature will involve to achieve