My First Hackathon

Hackathon # 1

This weekend I participated in my first Hackathon!! Big thanks to my friend, Julie, who pushed me into participating in this event. I was nervous leading up to the weekend, but it turned out to be a blast. I definitely recommend that new programmers participate in an event like this if they can.

The event was Pearl Hacks normally hosted at UNC. Due to the pandemic, it was hosted virtually this year for the first time. Pearl Hacks is a hackathon for female and non-binary students that caters towards first-time hackers.

Here is a link to the final project.

Team Creation and Idea Generation

At this point in my programming journey, most of my experience is in the back-end with Python and some Flask. Leading up to the event, I was struggling to come up with project ideas that could be demonstrated to judges with my toolkit. In the week leading up to the event, I decided to start learning JavaScript and get some more practice with HTML/CSS so that I could contribute more to creating a product that could be easily demonstrated.

I found a couple teammates through the discord channel the day before the event. We were all very new to programming and hackathons. They mostly had front-end experience with HTML and CSS with some minimal JavaScript skills. I was glad I decided to start learning some front-end skills since I would struggle to pair my abilities with theirs in the amount of time we had.

We decided it would be best to create a front-end only application since we only have a day. We went to the drawing board to come up with ideas and decided to build a personal finance checklist and knowledge guide based on this flowchart from Reddit. The idea is this would be a long term checklist you could use to track your financial health. The flowchart drives each stage and has some addition resources to provide more context. You can add comments to track specifics that relate to you or add other resources you find helpful.

“Pearl”-sonal Finance Hacker

Due to our limited timeline, we decided to build our web app with just HTML, CSS, and JavaScript. I used Bootstrap to help out with the CSS.

We started with creating some basic HTML templates and integrated in Bootstrap to make them look nice.

We had to get the text out of the flowchart image and decided the fastest way to do this was just to type it up. Because we decided not to have a database given our timeline, we created a card on the webpage for each step in the flowchart. It doesn’t look the best, but that was the best we could do at the time. Ideally we would have only shown the task relevant to you at the time with a better look and feel.

website

We also wanted to implement a quiz when a user creates an account to select the portions of the flowchart that are relevant to them. Since we didn’t have time for this, we just added all the tasks and implemented a ‘skip’ option instead. I wish we were able to add an animation to the skip action so it doesn’t look like it just disappears. 😅

Once we had our HTML templates created with all the tasks on the main page, we implemented the features to complete a task, skip a task, and add comments.

Completed Task completed
Comments comment

Once our application took shape, we needed some more custom CSS on top of the bootstrap to enhance the appearance. We kept iterating through small improvements throughout the day.

We created links to ‘more info’ buttons on each of the tasks and also made an ‘FAQ’ and ‘Resources’ page with additional information.

resources

After getting the core features implemented, I took a stab at saving the state in local storage. This was my first time doing this and struggled a bit. Eventually I figured it out and the application remembers the tasks that were completed and skipped. Figuring out how to save the comments was a bit more difficult and we weren’t able to implement that.

Here is what the project looked like when we finalized and submitted it. I’m pretty proud of what we were able to accomplish given our level of experience. Unfortunately, I think a lot of the objective of the project was lost because all the tasks show on the page at one time.

What I learned

It actually felt kinda good to have to build something with a tight deadline. This forced me to commit to my ideas quickly. Since I’ve just been teaching myself to program without any deadlines to date, I can tend to dilly dally or spend too much time deciding what to do instead of just doing it. I was forced to work on core functionality without getting distracted by fun features. I was surprised at the amount of code I was able to write in a day. As I’ve been learning to program, I focus on making sure I’m teaching myself to program the “right” way. I put effort into good design and refactoring bad code. It was fun to let loose and code with reckless abandon. There’s no time for DRY principles or documentation when you need a viable product in a day - eek!

Communicating with my teammates was much less of a challenge than I was expecting! This was my first time collaborating on a project at this level. We would get on a call, discuss the features we’d want to implement, divvy them out, then go on our separate ways working to implement them. It was actually a ton of fun doing this. We’d each start on our work and ask questions if we got stuck and help each other, or discuss and implement new ideas along the way.

This was also my first time collaborating at this level. Each of us were coding in our own environment and constantly pushing updates to github. I dreaded a potential merge conflict but we actually managed this much better than I was expecting. It was really fun to be pushing changes so frequently and pulling down the other changes from my teammates. I committed way more often than I normally would and will continue this pattern going forward.

git commits

I’m finally more efficient using Vim than I was before I started using it! Wooohoooo! It felt really good to do some neat tricks editing my code in efficient ways. Considering our code had a lot of duplication and we were constantly iterating on tiny changes, Vim made it really efficient to edit and apply similar changes within the files. I also learned how to use macros! Still, I got lazy and there was a lot of this sequence: /<search> a <text> esc n . n . n ..

I gained confidence in my programming abilities. I guess I actually know a little something if I can get a small application running in a day!

I think there are only a few lessons to be learned from hackathons. Ultimately you are sacrificing a lot of best practices and not programming to the best of your potential. They’re also exhausting. I expect the value of these lessons quickly diminishes. I will likely participate in a couple more hackathons in the future but call it quits after that.