First Bootcamp Project

Turning CatchUp into a WebApp

Posted by mh on Nov 1, 2017

Bit of catching up to do: as part of working at Credit Karma, we are offered a generous employee training stipend to pursue additional trainings and attend conferences, etc. outside of our typical work structure. Given that I've always had a bit of a passion for coding, I decided to invest mine on a 6-month, full-stack (MERN) developer boot camp.

I chose to enroll in the Berkeley Coding Boot Camp, offered at the San Francisco Extension campus of UC Berkeley, given that it was one of the few part-time programs that worked with my schedule. Classes were Mondays and Wednesdays from 6:30 - 9:30 PM, and Saturdays from 10 AM - 2 PM.

Given the relatively onerous time demands (~30 hours per week on top of my regular job), I'm writing this well after the fact, so some details may have been forgotten. As part of Coding Boot Camp, students have to submit three projects, each using the tech stack that we've gotten to at the time, so I have a brief write up on each.


My first project was effectively a revisit of the CatchUp excel-sheet-turned-app, rebuilding from the ground up with a Firebase backend, Bootstrap-first frontend (with some custom CSS), and finally incorporating user authentication (Google OAuth2 via Firebase) in order to let multiple people use the same app.

My teammates were a ton of fun to work with, but this project introduced us to the joys of forced git merges, when (not) to use branches, and passive-aggressive stylistic revisions, and provided some insight into how to better draw lines between various parts of the app, so each person knew what to expect.

On s'Attrape

Courtesy of a French-speaking teammate who enjoyed my absolute inability to pronounce anything in French, we ended up naming this revision On s'Attrape. Most of the functionality remains the same as CatchUp, though we added a few new features (location-based matching, birthdays, importing from Google Contacts), and structured the programming much better (the selection logic returns matches and reasons, so the front end can apply a visual treatment). This presentation did a quick job of explaining our tech stack, etc.

Because this is entirely built in front-end javascript, it's (far) less snappy than it could be, and has to pull down the entire list of contacts before parsing client-side. I'm sure future iterations will clean up at least part of that.

Without much further ado, here is On s'Attrape, presented as it was for our first project:

Parting Thoughts

  • Redo in React + Redux
  • Perform selection logic on backend to make client more lightweight
  • Create "missed day" logic (skip or iterate)
  • Build outbound links for growth

On s'Attrape