Bublr - Development Goals

[solomonshalom]

Hey There 👏,

This is some of the development goals that we set for Bublr! We're actively developing the site and any help, even if it's a small feedback or PR, can be so helpful!

Here are the Goals:

• Create a expore feed of sorts, check out this fork for a quick start!
• Make it more vibrant, a little bit of a aesthetical magic (just like this) (** Really Important**)
• Change the text editor to the one used in Novel #68
• Create a API (Not so much, will be nice doe)
• Have upovte system that allows users to downvote or upvote posts (similar to the system reddit uses!) (Important)
• Have a comment system integrated with KWEK :D
• Make the menus look like (maybe use a command-bar) (Important)

---

Completed so far:

• Create a search bar to allow users to search for posts (Important)
• Have a universal PFP for Anonymous users (Use Dicebear) (Important)

---

Here are the Issues:

• Fix the problem w/ some anonymous users not having a randomized PFP. Check this issue
  

We also realize that the time developers take a lot of their time to work on OS projects without any gain of their own, so we have decided to reward developers who contribute meaningful and influential PR's. Though, since we're only a team of three that are bootstrapped into Bublr, we won't be able to do it immediately but when we reach that height, we will!

*Some of the images or posts you see will refer to the platform as "The Abyss" with an old brain logo which was later changed to "Bublr" with the new coffee logo to reflect more on our identity :D

[solomonshalom]

I do think having a randomly generated PFP would be cool :D

[jennifershinshin]

I will work on the search bar to allow users to search for posts :)

[solomonshalom]

I will work on the search bar to allow users to search for posts :)

Omg, Thank You! @jennifershinshin :D

[rajanarahul93]

"Please assign the development goals related to The Abyss, including the search bar and universal PFP, to me for contributions and progress."

[solomonshalom]

"Please assign the development goals related to The Abyss, including the search bar and universal PFP, to me for contributions and progress."

Shalom! @rajanarahul93

OH, it's already contributed by @jennifershinshin (I also worked on the PFP system a couple days ago) 😅 and I also believe that she is actively working on it too 🤔

[jennifershinshin]

Hi, just wanted to let you know that I'm still here working on the explore page lol since I haven't given you an update in a while.
I've just been busy but I've been slowly working at it. I have the explore page UI setup, I'm just working on pagination and the search function. The search function is actually a little more complicated than I thought so it's taking me longer XD but I think I can do it.

[solomonshalom]

Hi, just wanted to let you know that I'm still here working on the explore page lol since I haven't given you an update in a while. I've just been busy but I've been slowly working at it. I have the explore page UI setup, I'm just working on pagination and the search function. The search function is actually a little more complicated than I thought so it's taking me longer XD but I think I can do it.

Shalom! @jennifershinshin,

OH, I knew you were quite busy so didn't want to annoy // disturb you 😓 but Yay! I am really glad to see how it's progressing, super excited to see it! Thanks for the Update! <3

P.S. Take your time! There's no need to hurry :D!

[jennifershinshin]

Hi @solomonshalom
So after trying to filter posts by a search keyword, I realized it's not possible with google firestore unless we use a 3rd party search service like ElasticSearch, which is not free. https://firebase.google.com/docs/firestore/solutions/search

The best we could do is searching posts with titles that begin with the search term. And it's also case sensitive. So if you search "Abyss", it will only bring up posts that begin with "Abyss" like
"Abyss: a post", and "Abyssmal",
but not posts like
"The Abyss" or "The abyss post".

Which kind of sucks lol. So I guess I reached a dead end for the Explore page because I can't finish it without these 3rd party services 😭 Sorry!
I can pick up another issue perhaps.

[solomonshalom]

Hi @solomonshalom So after trying to filter posts by a search keyword, I realized it's not possible with google firestore unless we use a 3rd party search service like ElasticSearch, which is not free. https://firebase.google.com/docs/firestore/solutions/search

The best we could do is searching posts with titles that begin with the search term. And it's also case sensitive. So if you search "Abyss", it will only bring up posts that begin with "Abyss" like "Abyss: a post", and "Abyssmal", but not posts like "The Abyss" or "The abyss post".

Which kind of sucks lol. So I guess I reached a dead end for the Explore page because I can't finish it without these 3rd party services 😭 Sorry! I can pick up another issue perhaps.

Shalom! @jennifershinshin,

Ah! Wait - why don't you use J-firebase? It could help w/ it but am not really sure either 🤔

P.S. It's alright if it does not work as intended, let's launch it under Beta and see how it goes :D ALSO, please don't be sorry! I know that you have worked really hard for it and am really grateful for it! 😄

[solomonshalom]

Shalom! @jennifershinshin,

I checked your fork, specifically explore.js and I with a tad bit of a help did some editing to make a basic full-text search work (If J-firebase does not work)-

import { useEffect, useState } from 'react';
// Other imports...

export default function Explore() {
  // ...

  const [searchInput, setSearchInput] = useState('');
  const [filteredExplorePosts, setFilteredExplorePosts] = useState([]);

  // ...

  // Handle search input change
  const handleSearchInputChange = (event) => {
    setSearchInput(event.target.value);
  };

  // Perform search when searchInput changes
  useEffect(() => {
    if (searchInput.trim() === '') {
      // If search input is empty, show all posts
      setFilteredExplorePosts(explorePosts);
    } else {
      // Otherwise, filter posts based on the search input
      const filteredPosts = explorePosts.filter((post) => {
        const searchableText = `${post.title} ${post.author.displayName} ${post.content}`;
        return searchableText.toLowerCase().includes(searchInput.toLowerCase());
      });
      setFilteredExplorePosts(filteredPosts);
    }
  }, [searchInput, explorePosts]);

  return (
    <>
      {/* ... Existing JSX ... */}
      <Search
        posts={explorePosts}
        isGlobalSearch={true}
        getSearchInput={handleSearchInputChange}
        css={css`
          margin-left: 0em;
        `}
      ></Search>
      <ul
        css={css`
          list-style: none;
          li {
            max-width: 25rem;
            margin: 2.5rem 0;
          }
        `}
      >
        {filteredExplorePosts.map((post) => (
          <li key={post.id}>
            {/* ... Render post details ... */}
          </li>
        ))}
      </ul>
      {/* ... Existing JSX ... */}
    </>
  );
}

[jennifershinshin]

Oh wow J-firebase might work! Thanks for sharing that, I'll try it out

[solomonshalom]

Oh wow J-firebase might work! Thanks for sharing that, I'll try it out

OH! Yay :D

[jennifershinshin]

Hi! So, I checked out j-firebase and... well I just don't think it's a reliable solution. I see no documentation for it and I don't see anyone using it. It seems to have very little support.
I think the only way to implement searching posts by keyword is to have a 3rd party indexing service like (e.g. ElasticSearch).
So I'm going to have to put this issue on pause unless someone else wants to take on the issue and can do it without a 3rd party indexing service! Here's my branch for it if anyone wants a starting point.

If you do want to use an indexing service, I'll happily take on the issue again.

But at the moment, I don't think it's possible without one. Sorry!

[solomonshalom]

Hi! So, I checked out j-firebase and... well I just don't think it's a reliable solution. I see no documentation for it and I don't see anyone using it. It seems to have very little support. I think the only way to implement searching posts by keyword is to have a 3rd party indexing service like (e.g. ElasticSearch). So I'm going to have to put this issue on pause unless someone else wants to take on the issue and can do it without a 3rd party indexing service! Here's my branch for it if anyone wants a starting point.

If you do want to use an indexing service, I'll happily take on the issue again.

But at the moment, I don't think it's possible without one. Sorry!

Shalom! @jennifershinshin,

Ah! that's alright, not a problem! though I am pretty happy w/ the progress of it and hopefully, we will see it in action :D

P.S. I know it's in-complete, but I do want to check it out so if it's possible, could you make a PR on it?

[jennifershinshin]

Sure! I just created a PR for it here

[solomonshalom]

Sure! I just created a PR for it here

Perfect! Thanks @jennifershinshin - Lemme check it out :D!

[solomonshalom]

Shalom! @jennifershinshin,

Just checked it out but it doesn't seem to work for some weird reason, I typed out my entire post's title, including the capitalization but it still didn't work. Is this a bug on my side?

BTW, Do you think it's possible if we can add the PFP system to the users so it does not look that weird -

P.S. Don't Have a Good Day, Have a Great Day

[jennifershinshin]

Ya I hadn't worked on displaying the search results yet, but you can see the search results in the console log!

I just pushed a small temporary fix for that so you should be able to see it now, but it is a little buggy because the profile pics seem to go away and also it orders the posts wrong.
I can take a closer look tomorrow to try and fix that.

Also, just remember, you will get 0 results back if you type in "Craft" it will only return posts that BEGIN with Craft

[jennifershinshin]

Also yes we can add the PFP system. But I'm not sure what the PFP system is. Is that like a component you wrote?

[solomonshalom]

Ya I hadn't worked on displaying the search results yet, but you can see the search results in the console log!

I just pushed a small temporary fix for that so you should be able to see it now, but it is a little buggy because the profile pics seem to go away and also it orders the posts wrong. I can take a closer look tomorrow to try and fix that.

Also, just remember, you will get 0 results back if you type in "Craft" it will only return posts that BEGIN with Craft

Shalom! @jennifershinshin,

OoO, I didn't know that but super excited to check it out tmrw 😁!

P.S. OH, I actually didn't complete the entire search result, I actually was going to write The Craft of Linear Equations // Inequalities and not Craft 😓

Edit: Do I have to do anything in the Firebase Console? I am building an Index in the Console but not sure if that's the way to go about it, do let me know on what to do! 🤔

[solomonshalom]

Also yes we can add the PFP system. But I'm not sure what the PFP system is. Is that like a component you wrote?

Yep! you can check it out here (Added a comment just above where the PFP API is being used 😁) BUT I do want to mention that it was initially written so that when new users, specifically new anonymous users were to create an account, they can get a randomized PFP from the Dicebar API but I am pretty sure it didn't apply to the existing anonymous users, which I assumed it would but it didn't and so I wonder as to how we could implement it 🤔

[jennifershinshin]

Hi!
I just pushed a few commits cleaning up the code a bit. The things I changed are:

• Displays the posts in alphabetical order every time
• Filtered out 'Untitled' posts
• Fixed a bug where it wouldn't display the author profile pics after doing a search

And yes, you do have to create an index, I forgot to mention that lol. Mine looks like this.

Also, the PFP system should be working for Anonymous users, because I didn't really change anything for the way it displays the posts. It should have the same behavior as the Reading List UI.
It might be a bug. I tried to make an anonymous user, but it didn't allow me because it says only admins can do it?

One last thing, can you check if the Anonymous users PFP is generated in the Reading List? Because they should have the same behavior 🤔

[solomonshalom]

Hi! I just pushed a few commits cleaning up the code a bit. The things I changed are:

• Displays the posts in alphabetical order every time
• Filtered out 'Untitled' posts
• Fixed a bug where it wouldn't display the author profile pics after doing a search

And yes, you do have to create an index, I forgot to mention that lol. Mine looks like this.

Also, the PFP system should be working for Anonymous users, because I didn't really change anything for the way it displays the posts. It should have the same behavior as the Reading List UI. It might be a bug. I tried to make an anonymous user, but it didn't allow me because it says only admins can do it?

One last thing, can you check if the Anonymous users PFP is generated in the Reading List? Because they should have the same behavior 🤔

Shalom! @jennifershinshin,

OoO! It looks great! ✨

The Index Quest
Ah, alright! I wasn't so sure at first and wanted to make sure if making the index was the right move (I also tested it out in Production, which, well 😅) but pheww!

The PFP System
Regarding the PFP system, it's not really showing up for existing users but only for users who registered after it's implementation, that being new anonymous users. I wasn't exactly sure as to how we could do it for existing users because it looks pretty weird when it says "Image not Found" instead of an actual PFP, but do you think it's possible to do it?

For not being able to log-in as a anonymous user, fixing it via Firebase
OH, I will guide you! here are the steps -

1. Head to authentication in your Firebase console
2. From there, go to sign-in methods and add a new provider
3. You should see an option called anonymous, go ahead and turn it on
4. Yay! it should work now <3

Checking out the PFP System in Reading List
Checked it out and it does show it for users who just registered, maybe right after the implementation but it does not appear for existing users, I wonder why 🤔

Edit: I just realized it might be a bit confusing reading along the text, so I added chapters to them 😄

[solomonshalom]

Hey there, @jennifershinshin,

I was just cruising through The Abyss today and noticed something funky in light mode. The Write A Post icon seems to vanish because it's white. Is it possible if you can tweak it so that when somebody is in light mode, it icon goes black, and when they're in dark mode, it goes white?

ALSO, when I checked it out on a big screen, the menus looked all wonky, like they were not fitting right. I think this might be bugging other folks too (on an aesthetic note). Can we roll with that cool design you showed me earlier? It looked pretty awesome! 😄

P.S. Will be working on it too! So, dww :D

[jennifershinshin]

I can work on the Write a post icon bug!
And I'll try my best to do the new dropdown UI but I'm not the best at CSS and UI design😅. So if I need help, I'll ask.
I believe this is the design you wanted to go with, correct?
As a warning, I might be slow on progress until the end of October, but I should have a lot more time in November.

Also I synced my fork with the latest in master, but I don't see any dark mode feature. How do I turn on dark mode? Or has it not made it to production yet?

Another question, how do I add something to my Reading List?

[solomonshalom]

I can work on the Write a post icon bug! And I'll try my best to do the new dropdown UI but I'm not the best at CSS and UI design😅. So if I need help, I'll ask. I believe this is the design you wanted to go with, correct? As a warning, I might be slow on progress until the end of October, but I should have a lot more time in November.

Also I synced my fork with the latest in master, but I don't see any dark mode feature. How do I turn on dark mode? Or has it not made it to production yet?

Another question, how do I add something to my Reading List?

Shalom! @jennifershinshin,

Thank you for the help! I will also be working on it (Although I haven't done something similar, am ready to learn so 😁) and Yes! that's the design and it looks pretty cool!

OH, that's alright! please do take your time :D

AH! Well, you can't really turn on light // dark mode but it turns on by itself depending on what your system // browser preference is set to, for example - if your browser is in light mode, The Abyss will also be in light mode. If you want to know more about it, search for [data-theme='dark'] !

P.S. How's hacktoberfest going? 😄

[jennifershinshin]

Ok ya I'm having trouble implementing the new dropdown UI, so maybe a UI expert can take that task on haha

Hacktoberfest is going alright! Unfortunately I got really busy in October so I couldn't spend a lot of time making contributions. But I'm not too worried about getting the 4/4 contributions so I'm cool with it haha.

[solomonshalom]

Ok ya I'm having trouble implementing the new dropdown UI, so maybe a UI expert can take that task on haha

Hacktoberfest is going alright! Unfortunately I got really busy in October so I couldn't spend a lot of time making contributions. But I'm not too worried about getting the 4/4 contributions so I'm cool with it haha.

Shalom! @jennifershinshin,

Ah, that's not a problem, dww about it! Though, you could try Kmenu or CMD+K. ONLY if you got the time, if not, I understand - TBH, you have done a lot and I really do appreciate every bit of it!

OoO, I see! that's good to hear :D

P.S. Did you read #47?

[jennifershinshin]

I'll check it out 🤔
Yes I did read it! Luckily I'm probably going to do some open source contributions for a while, so the whole hacktoberfest thing is no big deal.
Good luck studying!

[solomonshalom]

I'll check it out 🤔 Yes I did read it! Luckily I'm probably going to do some open source contributions for a while, so the whole hacktoberfest thing is no big deal. Good luck studying!

Thanks! @jennifershinshin and really do appreciate it <3!