baffingly built brainstorms #1: secret santa

originally posted on 2024-12-05

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

yikes, i guess i did leave this portfolio hanging a bit...havent touched it in a while. however, i have something cool to show you!

secret santa website

link to the project: here

that's right, i made a web app!
however, things were not just sunshine and rainbows. that's why i wanted to write this!

baffling built brainstorms will be a series of posts where i talk about every single project i have made. no matter how flawed it is, i will post it here.

now, let's get into the website.

synopsis

i came up with the idea of making this website on the 2nd of december, 2024. my friends wanted to run a secret santa, and i wanted to put something on my portfolio. this seemed to make logical sense.

this also meant that i had to make a website that was actually usable in approximately 3 days...

the og architecture plan

i used nextjs.
originally, i wanted to make a website that was reasonably secure.

in retrospect, this could have worked perfectly fine. i dont actually remember why i didnt go with this plan. it was probably something about being paranoid that someone could just take the code and spam signups. because of this, i implemented a weird authentication system.

the authentication system

i wanted to make sure that only people with the code could sign up. this part was not too hard. i made a code checking component and a signup component.

this way, the code form and the signup form can be on the same page.
the signup form was relatively easy to make.

but of course, i had to make things harder.

the actual authentication system

the issue was not with the code checking. the issue was with actually creating/logging into accounts. i tried using nextauth, but it was not working for me.
i ended up making my own authentication system, and it was not the way i thought it would be.

i made a user database with each user's email, password (hashed) and username in a json file. i didnt want to go through the effort of setting up a sqlite database or an external server (because this database is intuitively small).

upon signup, the user would be added to the database. upon login, the user would be checked against the database. this part was okay.

the problem was maintaining the session. i had to make sure that the user could stay logged in, and i was not able to get res.setCookie() to work for some reason. because of this, i ended up passing the cookie through the api response upon a successful post request. this cookie was just the encrypted username and time of signin.

it would then be the client's job to store this cookie and send it back to the server upon every request. this was not the best way to do it, but it worked at the moment.

now, i had to check if the cookie was valid whenever a request was made. this was done through a middleware function that decrypted the cookie and checked the username. as far as i know at the moment, this way of doing it was pretty secure. obviously, im not gonna tell you what encryption/decryption algorithm i used (teehee).

the problem was that i had to do this for every single api route. because of this, i usually got spammed with 401 errors whenever i visited a page. since the client repeatedly tried to get other static resources that nextjs generates, i got a lot of network traffic.

ya boy was spamming the routes

since i was running out of time (and i was too lazy to fix this), i just left it as is. however, i could just check if the resource being requested was static. this was (and still is) one of the bigger flaws of this website.

since the authentication cookie was in the client's hands, i had to grab it and send it with every request. this was done by having my page.js files being server side and fetching the cookie from the headers and passing it to a client component. all in all, this was a very messy way of doing things. if i were to do it again, maybe i would just use nextauth (tvt)

the secret santa part

this did not take that long. i just made a page that displayed everyone's names and emails. additionally, i made a button for myself that would send out all the emails. i did it this way so that i couldnt see who everyone's secret santa was - it would be shuffled in the program and sent out to everyone's emails without me being able to view how it was shuffled.

in order to do this, i used the nodemailer package. i made an account on my domain that would send out the emails.

however, i found out that it had issues with sending out emails to gmail accounts. i still have no idea why, and i just told my friends to use a different domain.

the rest of my time after this project was spent on getting it self hosted. a blog will be written soon about that part, but long story short - it took a while.

i ended up finishing the project on the 5th of december, 2024. i was pretty happy with it (although there are many things to be improved).

funny vulnerabilities and stupid things

i will list some of the funny things that i (or other people) find on this project. this will (hopefully) be updated over time.

conclusion

this project was fun. a lot of the stuff i learned wasn't from the project itself, but the process of deploying it. however, i did learn how to use nodemailer and how smtp servers work on a high level.

anyways, i hope you enjoyed this post. i will be making more scuffed projects in the future, so stay tuned :)

peace out.

(edit 2024-12-16: the self hosting blog is now out. check it out here.)