User Profile Section with Dashboard - Story

jonsnowpt commented 1 year ago

As a Betarena user I want to be able to access my user profile so that I can manage and verify my user information on the platform

📝 DESCRIPTION

We are adding a new user profile section, where all Betarena users can check and manage their information on the platform, customizing the experience and monetizing their role inside Betarena.

📸 WIDGET IMAGE

-

📱 TARGET PLATFORMS

Available on all versions.

🎬 INITIAL STATE

When the user accesses the profile section, it should be redirected to the Dashboard view.

Widget verification to display

-

ℹ️ OTHER CONDITIONS (& RELEVANT INFO)

The username, by default, is a randomized created one, suggestion:

https://www.npmjs.com/package/unique-username-generator

For the Avatar upload, we are using Google Cloud Storage. A few SvelteKit suggestions:

https://www.programonaut.com/how-to-create-a-sveltekit-image-upload-step-by-step/

Storage folder: /Users_data

Code Snippet:

Then you need to import the firebase package and initialize it with your project's configuration:

import firebase from "firebase/app";
import "firebase/storage";

firebase.initializeApp({
  apiKey: "API_KEY",
  authDomain: "AUTH_DOMAIN",
  storageBucket: "STORAGE_BUCKET"
});

Then you can create a function that will handle the file input's change event:

const fileInput = document.querySelector("input[type='file']");

fileInput.addEventListener("change", async (event) => {
  const file = event.target.files[0];
  const storageRef = firebase.storage().ref();
  const fileRef = storageRef.child(`images/${file.name}`);
  await fileRef.put(file);
});

This function will take the selected file, create a reference to the Firebase Storage, and then use the put() method to upload the file to Firebase Storage.

Once the image is uploaded, you can use the getDownloadURL() method to get the URL of the image in Firebase Storage, and then use that URL to update the user's profile photo on your app.

const url = await fileRef.getDownloadURL();
console.log(url);
// use the url to update the user's profile photo

To keep the updated images, you can use the Firebase Storage metadata to store the information of the images and retrieve them later on.

const metadata = {
  customMetadata: {
    userId: "userId",
    uploadedAt: Date.now()
  }
};
await fileRef.updateMetadata(metadata);

Connect wallet:

Using the Moralis integration we have at this time.

Delete Account:

Deleting the account should remove all details about the user inside the platform, including Firebase Auth data and Moralis User.

Versions:

Supported all theme variations.

💠 WIDGET DATA

➤ FireStore

email ""
lang ""
profile_photo ""
register_date ""
registration_type

0 "discord"
1 "email"
2 "wallet"
username ""
wallet_id ""

➤ Firebase

-

🎏 TRANSLATIONS

Translations endpoint

profile_translations

⚡️ CACHE

-

🔎 SEO

-

Hreflang Support:

-

📈 GOOGLE ANALYTICS EVENTS

-

Placeholder when there is no content:

-

Resources

Figma Design:

https://www.figma.com/file/4SlIPyxRBX2qg1eLaPUk9U/BetArena---Working?node-id=32%3A1635&t=8wCjyCfWcN7QaBei-1

migbash commented 1 year ago

@jonsnowpt what should the page url be for this page ?

@jonsnowpt should the profile page have the <url>/{lang} in them as well ? For translations ? Or can it be a single page <url-profile> with just internal translation changing without url change ?

jonsnowpt commented 1 year ago

@migbash

Translations:

Yes, change the URL with the lang definition;

The only difference is that we will not translate the URL as we do on the rest of the platform since it is a closed section and has no benefit to the user.

URL

Dashboard https://scores.betarena.com/u/dashboard Settings https://scores.betarena.com/u/settings

Betarena / scores