Hackathon of 2024 — Grid Matrix Interactive Website [Hack 2]

Tyler Hackbart
Juice Box Monkey Designs
3 min readSep 10, 2024
Hack #2 of 2024

During sprint 15 of 2024, we wrapped up our hackathon that we had split into two parts. Unfortunately, we couldn’t reach our stretch goal of Stacked support, but we’re excited to tackle it later in Q4 as a fun project.

For a backstory on Grid Matrix and the Interactive site, check it out:

Wednesday

We started a bit late due to wrapping up some other tasks to clear our plate and focus fully on this project. In total, we worked for 6 hours until a break for supper, followed by another 4 hour session lasting until 1:30 AM the next morning.

Outcome:

  • Completed Phase 2 of example panels
  • Finished Phase 3 of complex examples
  • Encountered a tricky responsive bug where the footer displayed both mobile and desktop versions simultaneously. We traced it to some TailwindCSS classes not activating at the correct breakpoints during page resizing
Selector inside Example page
Complex Examples

Thursday

This was a partial day with only 5.5 hours worked; however, we completed all of phase 4 during this time.

Outcome:

  • Deployed the site
  • Set up contact banner
  • Added “coming soon” page
  • Created a 404 error page
  • Implemented code block copy functionality for basic examples
  • Resolved code block copy issues in production. The react-code-blocks package had rendering conflicts. After an hour of debugging, we fixed it by upgrading to version v0.0.9-0
Code Block Example

Friday [Stretch]

We hadn’t planned on tackling this and limiting it to 2 days. However, since we only worked a little on this the day before, we decided to tackle one more day. We worked for most of the afternoon, clocking 4 hours to the hack.

Outcome:

  • Implemented responsive design [Stretch #1] for main and secondary sites. We didn’t make the example page fully responsive, as it’s optimized for desktop viewing.
  • Extended code block copy functionality to all sections. Previously, this feature was limited to one of the basic examples.
Responsive Support

Reflect on Hack 2

As mentioned before, we didn’t quite get everything done the first time around so we took a second time at it.

Here is the breakdown during Hack 2 that we accomplished:

Each phase with number of tickets

Each Phase with each number of tickets

Totals

13 tickets finished

1,402 lines of code

~19 hours over 3 days

Check out the site for yourself

or if you want to use the npm package yourself

👨🏻‍💻 Happy Coding

--

--