Search is broken for non-logged in users

[khallow7]

*Issues
Problem 1: When searching for projects project suggestion menu does not show up
Problem 2: Searching for creators leads to blank page
Check the embedded video for more clarity

To Reproduce
Steps to reproduce the behavior:

1. Go to https://zubhub.unstructured.studio when you are not logged in.
2. Select "Projects" option from the dropdown, type a keyword in the search bar and try searching for a project. See error.
3. Select "Creators" option from the dropdown, type a keyword in the search bar and try searching for a creator. See error.
4. Select "Tags" option from the dropdown, type a keyword in the search bar and try searching for a tag. See error.

Expected behavior
Solution 1. Each of the three options should direct users to the corresponding project, creator, or tag search results.
Solution 2. Disable the search bar completely and not have non logged in users have access to key features.
Solution 3. Restrict search to first 4-5 results. Then below the page, show "Log in to view more" button.

Need input from project maintainers & designers which option might be better.

Screenshots

Recording.2023-10-05.224655.mp4

[Mutombe]

I tried and it worked for me

[Mutombe]

Assign it to me

[Temabo]

@srish If a non-logged in user should not have access to projects, creators and tags, I think it would be a good idea to simply disable or remove the search bar entirely. Alternatively, we can leave the search bar and when a non-logged in user clicks on it they see a pop-up that says “Sign Up to view projects” and a “Sign UP” CTA. What do you think?

[yokwejuste]

I tried and it worked for me

it was clearly said above "For non-logged in users" and your screenshot is showing you're logged-in

[yokwejuste]

@srish If a non-logged in user should not have access to projects, creators and tags, I think it would be a good idea to simply disable or remove the search bar entirely. Alternatively, we can leave the search bar and when a non-logged in user clicks on it they see a pop-up that says “Sign Up to view projects” and a “Sign UP” CTA. What do you think?

I think we should disable the search for non logged in users, except if we are to make search through feature project only.

@srish, @tuxology I'm calling your attention to this issue

[rak16]

@yokwejuste @Temabo Your suggestions makes sense and I second that we remove the search for unauthenticated users. We already have a set of projects showing up on the hero page and there is a CTA reading - "Login to view more". So removing the search completely should be fine.

[GloriaKaduru]

@srish A better solution to this would be @khallow7 ‘s Solution 3.

The Search feature should be available to all types of users, just a little restricted for non-logged on users. Show users 4-5 search options that match search input, then ask them to Login/Signup for more search results.

[ladyami]

@srish I think the search bar should not be removed for none login user when they search and see the platform have the project they are looking for, when they click on view a modal will pop up asking them to sign in or sign up to view in that case this will encourage to take the actions

[coderatomy]

From a developer perspective, accessing projects on the site necessitates a request to the /creator/${username}/projects endpoint, which requires a valid username parameter. This implies that users must be logged in to access this functionality.

Additionally, the presence of the bar enhances the overall design aesthetics. It might be worth considering implementing a feature for "global projects" that can be viewed even when users are not logged in, thus enhancing the accessibility and visibility of projects to a broader audience. Something like sample projects

[khallow7]

From a developer perspective, accessing projects on the site necessitates a request to the /creator/${username}/projects endpoint, which requires a valid username parameter. This implies that users must be logged in to access this functionality.

Additionally, the presence of the bar enhances the overall design aesthetics. It might be worth considering implementing a feature for "global projects" that can be viewed even when users are not logged in, thus enhancing the accessibility and visibility of projects to a broader audience. Something like sample projects

Hmm, interesting.
The point is to motivate users to log in to the platform. I don't think having "global projects" will help in that. It will be the same as showing "all projects" before logging in.

[coderatomy]

Not really, @khallow7. I believe users should have insight into the app's functionality before committing to an account. Implementing a feature showcasing sample projects is crucial in this context. It can serve as a compelling incentive for users to engage with the platform. Regarding login, these sample projects should be visible, but users should be prompted to log in to access additional content.

[khallow7]

Not really, @khallow7. I believe users should have insight into the app's functionality before committing to an account. Implementing a feature showcasing sample projects is crucial in this context. It can serve as a compelling incentive for users to engage with the platform. Regarding login, these sample projects should be visible, but users should be prompted to log in to access additional content.

For insights into the app's functionality, there's a "featured projects section" just below the hero section to do that exact thing.

[coderatomy]

Roger that! Design wise, I think this feature shouldn't be removed. Maybe let's prompt the user to login first once tries doing this action, then redirect back to this page. How about that @khallow7?

[Marhiposa]

HI @khallow7 @coderatomy @srish i redesigned a landing page header concerning what you discussed . i personally think the long search bar is not needed, i decided to make it small i also replaced the profile logo for a CTA button (Sign in). then instead of the long search bar i think the nav bar would direct users to where they need to go on the landing page.
what do you think ?

[khallow7]

Roger that! Design wise, I think this feature shouldn't be removed. Maybe let's prompt the user to login first once tries doing this action, then redirect back to this page. How about that @khallow7?

It would be super useful if we could do some A/B testing to test which works the best with users.

[Marhiposa]

@khallow7 what do you think ?

[Marhiposa]

@coderatomy pls any suggestion

[coderatomy]

Nice work @Marhiposa. Am curious to know if the search bar won't show up once a user is logged. Am not privileged to decide. But this LGTM, thanks alot.

[coderatomy]

Ohh! I see. I think this is better looking and pretty straight forward. Though I agree with @khallow7, an A/B test can help in such a scenario

[Temabo]

@GloriaKaduru @ladyami

I see it from your POV as well, This way non-logged in users get an overview of a few of the projects they would have access to after they sign up.

[GloriaKaduru]

@srish @khallow7 I designed what I think the Search Feature should look like for non-logged in users.

Exploration 1: Showing a brief overview of what the search results are but restricting them from looking further by prompting them to log in or sign up.

Exploration 2: Having a pop up come up when they try to make a search. I made this variation because I figured that the first may not be as simple as this to code and may require the seach query to be pulled everytime. Also, the copy is more generic and can be used for any search category (Projects, Creators or Tags)

Please let me know your thoughts on which design fits better. Here's the link to the design file. https://www.figma.com/file/nyUduEpFmVZ05xA8rt28Mt/Search-Feature-For-Non-Logged-In-Users?type=design&node-id=0%3A1&mode=design&t=iJYzp3aXqBCLdeOf-1

[Temabo]

@GloriaKaduru very clean design! I am leaning towards the first exploration, I believe it works. Although, Zubhub buttons are rounded with a corner radius of 20px

[ladyami]

@GloriaKaduru @ladyami

I see it from your POV as well, This way non-logged in users get an overview of a few of the projects they would have access to after they sign up.

@Temabo You are right That is Ux standard I think

[ladyami]

@srish @khallow7 I designed what I think the Search Feature should look like for non-logged in users.

Exploration 1: Showing a brief overview of what the search results are but restricting them from looking further by prompting them to log in or sign up.

Exploration 2: Having a pop up come up when they try to make a search. I made this variation because I figured that the first may not be as simple as this to code and may require the seach query to be pulled everytime. Also, the copy is more generic and can be used for any search category (Projects, Creators or Tags)

Please let me know your thoughts on which design fits better.

wow Good job @GloriaKaduru look really Amazing but if you can decrease the font size on the first screen "log in or sign ........." text it will look more Amazing and the second screen log in to your zubhub account..........., you can remove zubhub in the sentence and also decrease the size

[Mutombe]

I tried and it worked for me

it was clearly said above "For non-logged in users" and your screenshot is showing you're logged-in

My mistake

[aqsaaqeel]

@GloriaKaduru I really like your design and the first exploration seems best because it prompts the user to sign in.

[yokwejuste]

Hello! @yokwejuste @coderatomy

The first exploration is what we’re going for here: #802 (comment)

I see that:)

[Temidayo32]

I will go with the first design. As a developer, I think the first design makes for better UX, and serves a better cue in getting a visitor to sign up for an account.

@GloriaKaduru Very nice design! I really liked your first exploration here #802 (comment). Could you modify the design of the login form as per suggestions from others and try to match the design of input fields and buttons in our existing login form here https://zubhub.unstructured.studio/login. Thanks!

Thank you, @srish!

Here's the modified version and the link to the design file: https://www.figma.com/file/nyUduEpFmVZ05xA8rt28Mt/ZubHub-Feature-Re-Designs?type=design&node-id=0%3A1&mode=design&t=lQ3hMKDoJEbcTdlT-1

[yokwejuste]

I will go with the first design. As a developer, I think the first design makes for better UX, and serves a better cue in getting a visitor to sign up for an account.

@GloriaKaduru Very nice design! I really liked your first exploration here #802 (comment). Could you modify the design of the login form as per suggestions from others and try to match the design of input fields and buttons in our existing login form here https://zubhub.unstructured.studio/login. Thanks!

Thank you, @srish!

Here's the modified version and the link to the design file: https://www.figma.com/file/nyUduEpFmVZ05xA8rt28Mt/ZubHub-Feature-Re-Designs?type=design&node-id=0%3A1&mode=design&t=lQ3hMKDoJEbcTdlT-1

Same here

[Temidayo32]

@coderatomy @khallow7 I think there is a mix up with this. There are two types of projects on Zubhub. There are the private projects which can only be accessed by authenticated users since it's private to them. It is labelled My Projects. Then, there is the global projects, that can be accessed by everyone. It is labelled All Projects. The endpoint provided by @coderatomy is only relevant to the private projects. The global projects is available to all and can still be made available to all users, authenticated or not. But of course, given the design already discussed, some restrictions to accessing projects would be implemented for un-authenticated users.

From a developer perspective, accessing projects on the site necessitates a request to the /creator/${username}/projects endpoint, which requires a valid username parameter. This implies that users must be logged in to access this functionality.

Additionally, the presence of the bar enhances the overall design aesthetics. It might be worth considering implementing a feature for "global projects" that can be viewed even when users are not logged in, thus enhancing the accessibility and visibility of projects to a broader audience. Something like sample projects

From a developer perspective, accessing projects on the site necessitates a request to the /creator/${username}/projects endpoint, which requires a valid username parameter. This implies that users must be logged in to access this functionality.

Additionally, the presence of the bar enhances the overall design aesthetics. It might be worth considering implementing a feature for "global projects" that can be viewed even when users are not logged in, thus enhancing the accessibility and visibility of projects to a broader audience. Something like sample projects

[tuxology]

Devs, when implementing this login/route protection UI element, please ensure that this is implemented as a reusable component that can be applied over specific pages as required. We will for now apply this over search page and other pages we want to redirect unauthenticated users from the home page.

[coderatomy]

Right @tuxology. A note everyone, I have a PR here #825. It just needs a few tweaks

[maureen-oz]

Hey @khallow7 I just read through all the comments and found out that the problem 1 that you stated has not been worked on. If the user is logged in, I believe it's a better experience to show these suggestions during typing as well.
I will take on this task and design the suggestions during search. Thank you.

[maureen-oz]

I'll like to know your thoughts on this @khallow7
The views on each suggestion would help capture users on what project to view after typing.

[benndip]

Nice work @maureen-oz , but there is already an agreed design for this, which is the design @srish confirmed here: https://github.com/unstructuredstudio/zubhub/issues/802#issuecomment-1758796239

And so she also said it is ready to be picked by a developer on the Zulip chat. Hence that's the design we are to go with.

[yokwejuste]

Nice work @maureen-oz , but there is already an agreed design for this, which is the design @srish confirmed here: https://github.com/unstructuredstudio/zubhub/issues/802#issuecomment-1758796239

And so she also said it is ready to be picked by a developer on the Zulip chat. Hence that's the design we are to go with.

Hey @benndip are you working on this?

[benndip]

Nice work @maureen-oz , but there is already an agreed design for this, which is the design @srish confirmed here: https://github.com/unstructuredstudio/zubhub/issues/802#issuecomment-1758796239
And so she also said it is ready to be picked by a developer on the Zulip chat. Hence that's the design we are to go with.

Hey @benndip are you working on this?

Yes @yokwejuste , I am will be opening a PR soon

[coderatomy]

Sorry @benndip and @yokwejuste. Perhaps you saw my comment above. Let's try to follow along with each other. Already pushed a fix for this

[benndip]

Oh yeah @coderatomy , I saw your comment already, I think like @srish said, it's okay to have multiple PR to an issue, so that we can converse and compare the best that fits and go with it. Great work @coderatomy

[coderatomy]

Alright. But I hope you implementing a different design of the two?

[benndip]

Well, it's the same accepted design, which @srish said, but with a different logic to what you have.
It's fine, I think it causes no issues.

[coderatomy]

Devs, when implementing this login/route protection UI element, please ensure that this is implemented as a reusable component that can be applied over specific pages as required. We will for now apply this over search page and other pages we want to redirect unauthenticated users from the home page.

Update the PR here #825 and made the ProtectedRoute component reusable @tuxology

[tuxology]

I have merged route protection via #825 @coderatomy We will need to add some more routes and exclude some - can be done later. Eg /projets/create etc. Looking at #918 now 👍

[tuxology]

@coderatomy I've reverted #918 Since the feature was not working as intended on production. Upon searching as non logged in user, we were not seeing first few results and just showing Oops error!

We need to reconsider what search means for logged in and non-logged in users since there are some more nuance:

When you interact with search bar as non logged in user, following things happen:

• If you start typing in tags, creators you get suggestions in dropdown
• If you start typing in projects, you don't see suggestions in dropdown - This is fine ✅
• If you finish typing in a project and click search, you don't see results
• If you finish typing in tags, creators, projects and hit search you get 404.

The overarching question is how should this UX work? @srish and I are discussing this and will paste the expected UX flow here. Since we have the required components now, it should be trivial to do this with some alterations to #918

[srish]

After discussing with @tuxology, this is the expected flow:

In a non-logged state:

• The search bar should never show any results for projects, tags, and creators in the dropdown.
• For projects, creators, & tags, when someone types a word, for example, “cardboard,” and hits enter, they should be able to see up to 4 results on the screen with the login modal.
• The creator profile and project page should be accessible with a direct link but should have the same UI as seen when in the logged-in state. Right now, there are no margins on the page.
• For projects, creators, & tags, when someone types a word, for example, "Arduino," and hits enter and there are no results available for the search keyboard, we should show some message that the search didn't find any results and show the login modal.

[coderatomy]

Alright. I have seen all the comments. Let me push an update