baffingly built brainstorms #2: nanohub

originally posted on 2025-06-04

tags: [bbb, coding, personal]
- - -

the nanohub: here

guys i swear i have like 5 blogs in the works rn

i swear guys

the intro

recently, i have had the privilege and honor of dating my girlfriend. personally, i think im very lucky to have her in my life. however, she currently lives far away (like...12-13 hour drive far).

i wanted to do something special for her birthday (which is coincidentally exactly one month after we started dating). but...what do i do? it's not like i can just go to her house and give her a present.

(well...i can...but i wouldnt deliver it myself, ig i would use amazon or something...)

the brainstorming

i had a few ideas in mind to begin with...

however, all of these ideas felt wrong for different reasons. i will dive deeper into why in a bit, but i am (unfortunately) very insecure about gifts in general - i want them to be perfect.

the trivia game would be too hard to make in the time that i had (especially with my small knowledge of game development). i tried to start it, but i just had a feeling that i wasnt experienced enough to make it in time.

after 2 days of godot development...

the photo montage sounded too simple, and so did the drawing. the location choosing game would not be hard, but it has been done before. i didnt want to do something that seemed "generic". i didnt try to make any of these (as you can probably tell, the game was my best idea imo).

after a lot of nothing, i decided to just make a little section on my website for her. its been a while since i made a new section, and it would motivate me to try to make something new (a bunch of new components)! it was a win-win situation.

the website

i started by making a new section on my website. this part was...pretty easy.

the beautiful start

i wanted to put pictures of her on the website, but i did not want everyone in the world to see them. thus, i ran into my first problem - authentication.

i wanted to make a comment section box for my blogs anyway, so making a login system was already on my to-do list. this just finally gave me the motivation to actually do it.

the authentication

i started by spinning up a local mongodb instance. this database (for now, before comments) would have two collections - one for users, and one for sessions. the user collection had a total of five fields. two of them were used to determine if the user was "nano-approved" (allowed to see any of the content), and if the user was "nano" (the user that the website is dedicated to). the other three fields were... pretty basic.

my basic mongodb seeding

i created some data functions for the database. here's an example of one of them:

a good amount of this initial code can be seen in this commit. apologies for the lack of detail in the commit message - i had to ask my dad to help me with the commit message because i had forgotten to push the code before i went to illinois for my summer research (blog coming soon?). \ \ after this, i created some basic api routes for the website. again, the commit above has all the code. these routes were pretty simple to make, although i did have some issues with stringifying and de-stringifying for a bit.

yep, looks good to me.

aight, now we have to design the login and register pages.

lets see how it looks.

aight, cool.

the next part is adjusting the navbar. it should say "login" if the user is not logged in, and "logout" if they are.

in order to do this, i added a session context to the website. this context is used to store the session data, and it uses react hooks. we can use this context to determine if the user is logged in or not.

now, we can use this context in our navbar component.

nice. note that this took a lot of time to get right. at first, i tried to make a middleware.js file to check if the user was logged in instead of a hook, but this ended up failing because it had to load the full mongodb driver. i also didn't know exactly how to make the session provider, so it took quite a bit of research. again, all the code can be seen in my commit history if you want to follow my fully raw train of thought.

cool! now we start the nanohub.

the nanohub

i wanted to make a little space for her. wouldnt that be cool :D

so! i started by making...a page. she likes flowers, so i had an idea: what if i made a garden of time for her? one flower for each year. i wanted to make something that was originally all mine, so...i had to draw. unfortunately, im not very good.

chat is this a peony????

i wanted this space to be a single page application, but this came to be quite a challenge. the first thing that i wanted to do was make a secret letter for her. here was what the component structure looked like at the time:

i made it complicated like this because i wanted to be able to animate the switch between components (nanohubhome and nano2025). i wanted to make it so that when you clicked on a button, it would animate a fade in/out.

i originally made the mistake of making the secret component client side, which...leaks the secret. the component may not be hydrated on the page, but a tech-savvy user could easily find the code in the source.

the pain of having to make it server side was quite annoying. i tried to come up with this architecture using interleaved server and client components:

this still doesn't work, because i want the 2025 component to also be animated. i wanted the message to appear after the animation, so i had to make it client side. how do i do this?????

after a bunch of vibe coding, i finally decided to think. i realized it was simpler than i thought.

this...works. basically, i import the 2025 secret in the page.js file. then, i make a dictionary.

this dictionary is set conditionally based on the user's session. from there, i return the nanohub component as follows: NanoHub secretMessages={secretMessages}.

whenever i need to render the nano2025 component from nanohub, i do this:

as a reminder, the dictionary secret messages is either the secret message (if logged in), or null (if not logged in). all i have to do now is render the secret message if it exists.

conclusion

and that's it! the rest was all styling and making the page look nice.

i don't want to share the source code, but you can see the final product at this link.
if you want to get nano-approved, reach out to me! it's not like there's much you can see now, but i will be adding more content in the future.

please let me know if there are any errors hehe

this is another unstructured blog post (because tbh im lazy), but i hope you enjoyed it! next blog will probably be on summer research or a comment section system. woohoo!!

to nano, i hope you have a great birthday. cheers to a month of dating, and many more to come.

thanks kc as per usual :sunglasses: