In November 2023, I was invited to work for Hack Club Bank as a Junior Engineer.

My first thoughts

Ever since I joined HCB in general, I was kind of amazed. Back in February, my friend and I started a hackathon after we had a blast at another hackathon. HCB were introduced to us by our computer science teacher who found the organization during a Repl.it event. HCB seemed like everything we needed to get the hackathon off the ground, so I applied to HCB fully anticipating the call to be an interview of some sort, however, the call itself was just onboarding. The platform was great and it helped us throughout the processes, so, personally, I had an amazing time on the platform.

When I saw that the Bank team was looking for new contributors, I immediately hopped on board. I know many people would’ve loved to contribute to Bank officially, so I was honored to be a part of the team.

Learning Ruby

I was a bit intimidated when I first got the offer. I’ve been coding with JavaScript ever since 2019, so learning a new language and a new tech stack. To be honest, I fully expected Bank to be written using Next.js, so Ruby on Rails was a fresh start. Particularly, Ruby on Rails is a Model View Controller framework, which was a subject that was completely unknown to me then.

Over the course of the 3 month period, I discovered new ways to program and critically think. I spent the first few days of this experience learning how the language worked and differed from JavaScript. Notably, I encountered Ruby’s do/end blocks which are similar to functions or callbacks in my experience. Another cool feature I discovered was Ruby’s readable nature, catering toward code readability. For example, in Ruby, parentheses are often unneeded for calling functions and Ruby automatically returns the last value in a function. Additionally, in Rails, we used :symbol s to label elements and as constants.

CSS with BEM (Block-Element-Modifier) Notation

One of my largest flaws entering into this program was my disregard for clean and maintainable code. I simply looked for the fastest path to a working prototype and faced the consequences later down the road when I needed to fix bugs. One of my first real pull requests (PR, basically a request to add code) included styling a button to match HCB themes. I started off by naming the modifying classes fileupload_field and fileupload_label which provided absolutely no information about how to use these classes. Good code should be pretty close to self-documenting. I learned that HCB uses Block-Element-Modifier syntax for CSS, so I included three classes, field--fileupload, field--fileupload__label, and field--fileupload__field. This would be implemented by using the field--fileupload on the wrapping div and specifically a div with the field class already, field--fileupload__label on the label inside the div, and field--fileupload__field on the actual file upload input.

Learning PRs and CI/CD

Before I joined the Bank team, my use of GitHub was restricted to “contributing” to my own repositories and Hacktoberfest. Thankfully, I learned how to open a PR when I did Hacktoberfest in 2020. A PR is short for a pull request, which is a request a user sends to project admins to merge two versions/branches of code, the main branch and whatever branch the user edited on (usually a fork/remix or a separate branch on the original repository). Through this program, I learned to use branches to open PRs, fix bugs discovered by code checks, and iterate through my code with feedback from my amazing mentors. Personally, I think the most valuable skill in this section was creating descriptive PRs. Many of the first PRs included bare-bones descriptions of the issue that was being addressed like “Solves #3127” or I simply did not include a description at all, assuming the title was descriptive enough or the code could be decrypted to find my intention. Through this program, I learned how to address specific additions, include screenshots, mention potential flaws and vulnerabilities, and provide advice on reviewing my code. This information is especially important for any of the non-technical Bank team members.

In order to continuously update the HCB platform, the Bank team uses CI/CD (Continuous Integration/Continuous Development) to run tests and run a staging environment. These tests and staging helped ensure that I didn’t straight up break the platform. I used these features to check the quality of my code, however, my mentor Caleb made sure some of my breaking changes did not fly under the radar.

Learning PostgreSQL

My programming experience from before almost solely revolved around Firebase Cloud Storage. Although I’ve used SQLite and Enmap for Discord bots, none of my usages was as complex as HCB’s PostgreSQL setup. The Rails console made it easy for me to add and update columns in PostgreSQL. I also used VSCode’s search function (introduced by Ian) to refactor code that used the columns I changed.

Becoming Independent

During the first few weeks of the program, my mentor held my hand and guided me through it. Although the program wasn’t very structured, I had certain benchmarks to meet, making my first PR, adding flavor text, and messing around on my local copy of HCB. I spent my time exploring the intimidating codebase and now, I believe I have a pretty good understanding of the codebase.

In the later months of the program, my contributions were asynchronous and consisted of independent problem-solving. I believe this time included most of my growth as a programmer as I developed the skills needed to advance projects on my own, yet the onboarding processes provided a valuable foundation for my development.

For Next Time

Personally, I would regard this experience as a success, however, there are definitely things I could improve for next time. I think I would’ve gotten more out of this experience if I worked on a part of the tech stack that I was not familiar with rather than being intimidated by back-end programming. In the beginning, I focused mostly on UI/UX ships, but as I developed familiarity with the codebase, I started messing around with the back-end and functionality.

One main setback I experienced was time management. The hand-holding in the beginning allowed for a set amount of time focused on HCB, but as I became more independent, it was my responsibility to claim issues and learn more.

Final Thoughts

Overall, I had an amazing time working for HCB and would definitely work with the team in the future. The Bank team and my mentor were very supportive and helped me along the way. This experience forced me to grow outside of my comfort zone and allowed me to work on a project that affected hundreds of people and millions of dollars. I would like to thank Hack Club for this opportunity.

Features I shipped

• Restructured User Settings
  • Splits up user setting page to multiple tabs using Turbo

• Styled File Upload Buttons
  • Matches file upload buttons to HCB’s theme

• Require Explicit Intent to View Card Details
  • Hides card number and CVC unless requested and logs when revealed

I also shipped some minor bug fixes.