portfolio dev ep3: accounts and comments

originally created on 2025-07-09

tags: [coding, portfolio-dev]
- - -

not gonna lie, i had this one in the works for quite a bit of time. this blog was originally created on january 23, 2025.

i thought it would be really funny to have friends and possible spectators see what other people think of my blogs, so...i made a public forum for comments. all in all, this took about 2 partial days (i would say about 8-10 good hours) to complete.

if you want to make an account, you can do so here.

design

first off, let's make a schema.

...good enough.

next, i had to find a database. after (not) a lot of thinking, i decided to use mongodb. it is a database that i am familiar with, and it isnt too difficult to set up. using my knowledge from my web programming class, i started creating stuff.

it should be noted that this is a general implementation of a mongodb connection. because of its template-like structure, it can be used in just about any node project that uses mongodb. there is also a difference between the production and development database. i dont want to mix up my stuff! the development database is spun up locally on my computer, while the production database uses a mongo atlas cluster. i dont want to pay for a server, and thankfully, i dont have to. thanks mongo!!

now, we make our collections. there were three collections that i had in mind (as shown in the schema above).

the cool thing (that is not used in this project) is that mongodb does not require strictly defined schemas. this can be useful - especially when you want to add new fields to a collection without having to worry about migrations.

now, we have to make data functions. these functions will be used in the server side to interact with the database. im not going to show the code for all of them, as that is quite annoying to read. you can always check my github for the code. all in all, i made two files: accounts.js for account and session functions, and comments.js for comment functions.

after i made these functions, i had to start actually throwing it all together in the client side.

session management

in order to manage sessions, i used cookies. these cookies - for security purposes - would have to be validated on the server side. in order to do this, i made a hook that would check if the user is logged in. it also had login and logout functions. this hook is used in every necessary client componnt.

some examples of where this would be used would be...

so...yeah, now we have an accurate way to tell on the client side if a user is logged in or not. awesome!

the comments

since the blog itself is a server side rendered page, it was easy to stick on a blog comment component in the client side. of course, in order to have the client interact with the server, i had to make a few api routes.

alright, so now we have a way to comment and stuff. to recap...

user logs in -> session is created, user is logged in
user comments -> makes post request -> api calls create comment function -> comment is added to database

cool.

now, i hate frontend work (as you can tell by the style of this website). thus, i vibe-coded everything and just hoped it worked. because of this, you may see some "accidentally" capitalized words. whoops.

it was also quite a bit of code, so again im not gonna paste it all here. you can check it out on my github. in particular, making the edit button was a bit of a pain. holy moly. it also has a small span that shows the relative time of the comment and the most recent edit.

meh, looks aesthetic enough

the profile page

oh yeah, i also made a profile page so that everyone can see their comment history. it looks like this!

look at the cool lines!!

once i figured out how to get this stuff working in the comment component, it was really easy to just paste it into the profile page. looks pretty cool.

also, when you click on a comment, it will take you to blog page that the comment is on. it will also scroll to the comments section! how did i do this?

simple. add a hash.

the important part is the #comments-section at the end of the link. this will scroll to the comments section of the blog page. this works because i stuck some useeffect code in the blog comments page. hehehe >:3

conclusion

so now we have comments. that's cool.

i could have definitely spent this time doing something else (like...job applications...or something), but i thought this would be fun. it wouldn't take too much time, and i think the investment might be worth it (for fun, of course). thanks for reading, and i look forward to hearing back from you guys.

for now, i will probably keep working on rag (see my other blog). please feel free to let me know if there is anything super buggy in the frontend...i havent fully tested it yet ahahaaaaa

oh also i have admin perms obviously, so i can delete comments from the db itself lol

one more thing: i really want to start posting music. maybe a blog will be made on that soon.