Hackathon of 2024 — Grid Matrix Interactive Website [Hack 2]
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
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 versionv0.0.9-0
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.
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 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