search

Betarena / boilerplate

Betarena Template Repository
0 stars 0 forks source link

[FEATURE]: Implement Author Profile for Betarena #12

Closed jonsnowpt closed 3 months ago

jonsnowpt commented 5 months 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

migbash commented 4 months ago

🟧 UPDATE (cumulative)

0. (combo) firebase-services + scores-lib

1. scores-lib

2. (combo) firebase-services + scores-lib

3. scores-lib

4. scores-lib

5. scores-lib

jonsnowpt commented 4 months ago

@Izobov

1.

Image

2, 3, 4, 5, 6, 7, 8, 9

Image

jonsnowpt commented 4 months ago

@Izobov

Still missing several corrections.

16.

Image

19 to 25.

Image

Izobov commented 4 months ago

@jonsnowpt 8 - it's dynamic, depends on size of "about" information, why do we need a lot of empty space if "about" contains only 1 line of words for example (or no about information at all)?

Izobov commented 4 months ago

@jonsnowpt 22 -it's aligned on bottom line if we align it on top by about it will looks different from figma image image

@Izobov it can be the bottom but cant go beyond that limit on the top

Izobov commented 4 months ago

@jonsnowpt 10 what hovers? what elements?

@Izobov the hover over the edit my profile button;

23 - not clear

jonsnowpt commented 4 months ago

@Izobov

5.

Image

28.

Image

jonsnowpt commented 4 months ago

@Izobov

For the highlighted user sportstack we should add a new field on the Firestore profile with the highlighted sportstack:

sportstack_highlight => id

Image

Izobov commented 4 months ago

@jonsnowpt how user can set highlited sportstack? And what to do if there's now highlighted sporttack?

@Izobov

how user can set highlited sportstack? And what to do if there's now highlighted sporttack?

For now, since there is no GUI, I will add the ID manually on Firestore. There will always be a default sportstack, if not, the user author profile link will not exist.

@jonsnowpt @migbash hmm sounds like new condition... Not all users will have a/user/{username}

jonsnowpt commented 4 months ago

@Izobov

Besides the missing points, we have these issues:

29.

Image

31.

Image

33.

Image

34.

Image

jonsnowpt commented 4 months ago

@Izobov

Missing at this time:

35.

Image

36.

https://github.com/user-attachments/assets/ddab4114-284d-4dbf-bdeb-b03c115e4933

37.

Image

Image

40.

Image

Izobov commented 4 months ago

@jonsnowpt Is it possible not to change the size when changing the theme? This is probably a designer mistake. Sportstack tabs on light theme also has 16px

image image

Izobov commented 4 months ago

@jonsnowpt 5 cannot understand wich avatar size is wrong?

@Izobov

Those ones:

Image

jonsnowpt commented 4 months ago

https://github.com/user-attachments/assets/98e866d4-c6db-40ab-aafe-489cacc615ad

Image

Izobov commented 4 months ago

42, this is due to our data loading workflow. Now the client waits for the data to be fully loaded: 1) user 2) first 10 articles + SEO

So, when the page is rendered on the client, we already have 10 articles, no placeholders needed. The reason for loading user information is because from the server we have user = { name, username, ....other_fields, subscribers: [...ids]} since we need to convert 3 subscribers to profiles, I need to do another fetch on the client side.

At author_profile/draft/1 I proposed a different workflow for data, where we do not wait for 10 articles and there the downloaders are synchronized

Syncing is now easy, just letting you know what's going on here and why it's happening.

jonsnowpt commented 4 months ago

@Izobov

Image

Image

Izobov commented 4 months ago

@jonsnowpt 39 I dont understand what styles i need to change

image image

image image

@Izobov

Resolved

jonsnowpt commented 4 months ago

@Izobov

Image

Image

46.

https://betarena-scores-platform.herokuapp.com/a/content

https://betarena-scores-platform.herokuapp.com/a/tag/forecasts

https://betarena-scores-platform.herokuapp.com/a/betarena-soccer/millonarios-vs-atletico-nacional-betting-tip-2024-19169152-1721661377

jonsnowpt commented 4 months ago

@Izobov

Missing:

Image Image

Image

50 and 51

Image

Image

Image

jonsnowpt commented 4 months ago

@Izobov

Image

55.

https://github.com/user-attachments/assets/9ed68b1d-fd87-4ca9-84cc-d88dc67b7d69

https://github.com/user-attachments/assets/2451152a-710f-4c3c-aecd-4f588b1f400d

https://github.com/user-attachments/assets/7e33c3cc-7e9a-4a7d-88e8-fd7da480be7b

jonsnowpt commented 4 months ago

@Izobov

https://github.com/user-attachments/assets/71c0983e-ea15-4c47-8906-28af94b42dc4