After taking a break from the project for several months, I managed to get the main functionality down in a three-day sprint. Most notably, I finally finished the user registration and login system, the character submission system (including uploading image files!) and the various sortable-items pages.

Auth

After battling auth endlessly in the previous iterations of this project, I was able to create a very simple registration system using bcrypt and iron-session. Getting the email to send was also a challenging process as I wanted to use an HTML template, but this required some fiddling with fs and path. In the end, I was able to build a typical register-verify-login flow, complete with an email verification code. I ended up using Brevo as my SMTP provider, which has a very generous free tier and a much less rigid verification process.

Character Submission System

The character submission system I built has a reference image previewer, cost checker, and components that change based on the answers to previous parts. This project has showed that I've gotten much more comfortable with using useState hooks. I'm very pleased with how it turned out.

I originally struggled quite a bit with uploading the images to the S3 bucket, but I found the issue came from the wrong encoding when posting to the upload API. I ended up using the multiparty library to help with receiving file data on the API side. I also had to make sure to manually set the headers for the API afterwards as bodyParser had to be turned off.

Other than figuring out the auth system, the image upload system probably took the most time in my three-day grind.

I am also very proud of how the traits and abilities utilize API routes I built for the item pages.

Item Pages

I wanted the filtering to be very easy and lightweight, so I am very happy with the final results:

I have gotten much more comfortable with using API routes (in conjunction with useState) in order for the React components to flow nicely.

Closing Thoughts

Working fulltime has helped formulate a lot of good practices in terms of code. I think specifically using API routes opposed to refreshing the page constantly, having stored procedures/functions opposed to writing out the exact select statement each time, and having better git commit rules have made this project a lot more manageable than the first two times I attempted it. Additionally, my database knowledge has increased which has made designing the schemas easier (something I barely got to in the previous two iterations).