Need help / How to create a website that allows users to have their own profile?

I would like to know how to create a website that allows its users to have their own profiles like on social media accounts, if there is already a thread explaining this could someone provide the link please?

1 Like

Hi @GBBS

Not natively in Webflow yet: User login and membership functionality | Webflow Wishlist

However just last week @jasondark worked some magic with Firebase and even took the trouble to create Youtube tutorials too:

@GBBS

If your idea does not require different levels of user access (eg admins and regular users or premium users and free users) you can probably get this working just from following my Youtube tutorials. Even if you don’t end up using this solution, you might get a lot of value from watching the tutorial and following on with your own test site. At the very least this will get you thinking about what could be achieved with Webflow.

I plan to release more videos soon with the aim of providing a more complete solution to the Webflow community.

Thanks for the reply, I will watch this video this week.

I want to make a website where people can have their own profiles, which other users can connect to similar to facebook style. I do not want to go in to detail as I think I have came up with a decent business idea that may not exist the way I want mine to. Maybe not though.

I think this would certainly be possible with Webflow + Firebase. However if you are planning something fairly complex then I would say just skip Webflow and build this using a proper front end frame work (like Vuejs, Angular, etc).

I see Webflow + Firebase as a great solution for MVPs or apps with basic requirements. In fact if your app only had fairly basic requirements I think that Webflow + Firebase would be a great solution.

I don’t think that number of users would be much of an issue with Webflow + Firebase either. What would make me use something else would be if my app had complex features that required lengthy coding, proper version management, etc. Trying to build a very feature rich app with Webflow would be a bit clunky imho.

2 Likes

Yes my idea does require admins and the different types of uses you listed above. is there any advice on how to set this up please?

1 Like

In my tutorials I show how to set up Firebase authentication and sign up using FirebaseUI. This is a widget that handles everything for you. It creates tokens and passes them to your users.

If you want to have different user roles using Firebase then you will need to build a custom authentication system. This will allow you to modify the tokens you are passing to your users and give them “claims”. These custom claims can be things like “admin”, “premiumUser”, etc.

This is far more complex than simply dropping FirebaseUI into your app. I am in the process of doing this myself with a Webflow site as a test. If this all works smoothly I plan to create a new series of videos called something like “Build a web app with Webflow + Firebase”.

In this new video series I plan to cover setting user roles. If you want to look at something else I would suggest reading over the Auth0 JavaScript documentation and implementing their universal sign in widget. Auth0 supports user roles much more easily, however personally I’m sticking with Firebase because it’s easier to manage user permissions on their database when using their auth methods.

Thanks Jason I have just got Firebase, can you send me the links to the others you just mentioned, preferably the best for making complex websites and apps please.

I am registered as an Apple App developer isnt Xcode the best to make Apps?

If you want to build an iOS app then you are barking up the wrong tree trying to use Webflow :grin:

If you want to build a responsive web app that can still run on a device’s browser, then Webflow + Firebase or Webflow + Auth0 could work for you.

I suggest you read this fully to understand how Firebase Auth works.

Then read this to understand how Auth0 auth works.

Then you can decide for yourself what is best.

Cheers,
Jason

2 Likes

I want to create a website that people can have their own profile on but also an App that works on all mobile devices and you can download on App store for example.

Your request is quite broad, and may not be easily answerable/solvable via the forums. Would you like to move your post to the Freelance category instead?

Alternatively, you can also contact specialists in our Experts directory to custom code a solution for you.

1 Like

Thanks for the email what ever you think is best would be great. I am not a website developer but I am starting my own website based business and want an App to go with it to.

@jasondark Jason! Your tutorial on webflow + firebase is fantastic.

I am using Auth0 + webflow. Within my app I have a progess bar that shows a customer how close he is to hitting his monthly limit. Here is an image:

progress%20bar

Pulling in the right data from my back end is no problem. But, do you have any ideas on how I can change the UI of the progress bar based on the data? I.e. make the progress be green and look only slightly completed versus red and fully completed.

Hey is this usage bar being embedded from your back end?

Well, I could definitely embed the usage bar from my back-end. And that would probably be a fast simple solution.

However, I enjoy styling with webflow and my stupid brain likes to do things the hard way.

So, I would like to create the usage bar with webflow. I would then like to change the state/UI of the usage bar based on a number I pull in from the back-end(auth0).

So if the number pulled is 5 then the usage bar would only look slightly completed and green and the text beneath it would read: 5 Customers / 150.

I thought maybe the number 5 could trigger a particular state in a webflow animation or something.

As I am writing this out, I realize how crazy this sounds. I am guessing the answer is probably no this is not possible. But if you have any ideas I am happy to hear them.

Hey so I’m pretty sure this will be completely possible. The hard part isn’t manipulating the data with custom code in Webflow and changing colours etc.

What I don’t know is how you’re getting that data from your back end into Webflow. If you provide me some more details I can probably help you out.

Feel free to private message me if there is confidential stuff, but otherwise just post here for the benefit of all readers.

Cheers,
Jason

I built this site with Webflow http://www.premierrrg.com/ and used Backendless, a service somewhat similar to Firebase, to manage the users. It also has libraries for iOS and Android apps. It is designed to be a back end for sites and apps.

5 Likes

Hi Rod! If you could PLEASE let me know how you designed that site with Webflow but integrated it with Backendless somehow?! That’s amazing! Seriously I’d appreciate it so much!

1 Like

I’ve been working on a designer profile template that I’m releasing in the next week. This has an API to our Firebase React app, so users can manage their information and branding on Mightysmart for a page in their Webflow design site. The goal of this profile template is to provide a CTA (Call to Action) for visitors that will provide lasting benefit to the designer.

This feature is called #skilltagging. A site owner creates tags based on their expertise and visitors can use the authentication to endorse the designer for that #skilltag. Our future plan is to provide search on our react app based on these #skilltags.

I’ll post an update once we have released the template, but here is a preview of what we are releasing. I would love any early feedback and I’m happy to answer any questions about our build process.