User profile editing flow

Hi everyone, I am building an “edit profile” view for a mock social media platform in which a logged in user can switch profile pictures, edit bio, name, etc. Is the correct way to implement this to:

  1. create a static profile view that pulls from the user’s profile database in Supabase and pulls it every time the page reloads.
  2. create an “edit profile” button that redirects to a form profile view in which the user can input profile edits which are then written to the Supabase profile database?

Or is there a more elegant way of doing this? Thank you!

Hi @marketplacebuilder :wave:

What do you mean by “a static profile view”?

I think it would be more elegant to have only one profile page that fetches and displays the current user’s information.

In terms of UX, you could choose between the Facebook/Twitter approach where the user clicks on “Edit information” to display a popup where users’ can update their info:

CleanShot 2023-11-14 at 12.47.48

Or having inputs that users can update directly on the profile page like we have in the community:

Hi Joyce! Thank you for the suggestion. I guess I was looking to do the 1st option. Is there a tutorial handy for such pop ups?

We don’t have a video tutorial specific to designing a modal with a form inside, but you can refer to the user docs for the modal element to learn how to design those.

And for the update side of things, you would to the same as on a page: have a form with inputs that update your user record in the database when they click on save.

Since you’re using Supabase, these two videos might be helpful:

Does that help?

The modal video tutorial is on our to-do list but we haven’t prioritized it yet. Let me know if you need us to.