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

Hackathon 2024

Before jumping in, we would like to mention that this is Hack 1, the reason for this is that the scope of this hackathon got kind of out of hand (We will explain) but it led to splitting it into two.

Backstory

Grids are everywhere, yet grid creations while coding is annoying and very repetitive. DRY (Don’t repeat yourself) is a staple phrase while writing code. So why not box it up into a handy helper npm package?

Introducing Grid Matrix, a React npm package to handle grids easier.

Screenshot from Grid Matrix Website

yarn add @jbmd/grid-matrix
npm i @jbmd/grid-matrix

@jbmd/grid-matrix

Also, no big deal or anything, but +200 weekly downloads, just saying.

Now the problem is we can tell you all the features of Grid Matrix, and most of the big features are listed in both the README.md and the sample code if you fork the repo on GitHub and run it locally.

But with grids, you want demos and interactive examples to really see the power of Grid Matrix.

Hackathon

We took a different approach to this hackathon since it was a brand new website. Here is the breakdown:

Phases for this Hackathon

The main outcome we wanted was a site to showcase Grid Matrix with some interactive examples. It seemed pretty simple, or so we thought.

We got our inspiration from other npm packages we have used in the past like:

react-hot-toast - The Best React Notifications in Town - react-hot-toast

React-Date-Picker

We wanted a website as well.

Before the Hack

We made a rough plan with the phases and decided we wanted a basic website with three levels of examples.

We chose to host it on Vercel and determined there was no need for a database, user login, or anything similar.

For the examples to showcase, we wanted:

Basic examples, like standard grids with blocks beside each other, either vertically or horizontally.

Complex examples, which are harder to explain but visually demonstrate the power.

As a stretch goal, we aimed to create and showcase StackedGrids, a feature in grid-matrix that allows easy stacking of different grids without extensive CSS.

For the design, we made some hand-written sketches to ensure we stayed within our guidelines.

Sketches for Grid Matrix Website

(Full disclosure, these are all raw designs, Tyler Hackbart actually runs a series called Jot to Dot that doesn’t sugarcoat how little sketches, as bad as they are, can actually turn into nice things)

So we got our phases and we got our rough design.

Hack 1

So this was the proposed timeline of the Hackathon

Schedule for the hack

Wednesday

Designs — morning [~3 hours ]

We started by taking all those nicely sketched drawings and created a design we liked. It wasn’t too complicated to tackle, and we made sure to cover all the areas we were building.

Outcome:

Main Website

Cool slider thing to showcase why grids are bad

Interactive Example Routes

Code — Afternoon / evening [ ~13 hours ]

Spent the afternoon and evening (technically into Thursday, closing the computer at 2am) and got most of Phase 1 finished.

• Basic app built with Nextjs (with grid-matrix installed)
• Hooked up a shared component library that all new JBMD websites use (its just a centralized component library so we don’t have to repeat ourselves always)
• Build most of the main view (minus the interaction at the top of the page)

Some screenshots of the main page

Screenshots of the main views

Progress Report (End of day 1)

Progress report

This is where everything stood at the end of day 1, not great. But we thought, just maybe we could rally in the next day with the proper music and gigantic cups of coffee.

Thursday

Morning / Early Afternoon [~4 hours]

Worked on the new interactive example section, which is all built out, but we only had one example to include. We coded it to support multiple examples. However, by 1pm, we realized how many more we wanted to build. This became an even bigger task, especially when considering custom interactions for each type to really showcase GridMatrix.

Interaction in action

STOPPED AND REFLECTED

We liked what we made so far, but we knew we couldn’t finish everything. So, we decided to wrap up the main view with the interactive top and then split it into another hackathon.

(Plus, we added some tickets we forgot, because of course.)

Afternoon / Evening [~10 hours]

Switching back to the main view, we worked on the interactive top section which finally allowed us to check off phase 1.

Progress Report (End of day 2)

Day 2 end (with new tickets)

Once we added in the extra missing tickets (minus 4 of the Not Started tickets are Stretch goal tickets) we get to 50% of the tickets done in Hack 1)

Reflect on Hack 1

As mentioned before, we didn’t quite get everything done, honestly based on high level guesses, it was accomplishable. Sadly in reality, we have top split it. Partly to not cut corners on the interactions, the very point we are making this site and make sure we make it well.

Here is the breakdown during Hack 1 that we accomplished:

Each Phase with each number of tickets

Totals

11 tickets finished

1,610 lines of code

~30 hours over 2 days

Rocky Mentions

• We didn’t have our app on React 16 which grid-matrix requires to do some of the mobile breakdowns, spent a good 30 minutes on day 1 trying everything and anything to get it working and it ended up being such a tiny thing
• We went through 3 different code sample packages that would work before landing on react-code-blocks
• Typing inside grid-matrix was not properly set up (it is now in v0.0.10) but going back and forth to documentation was annoying

Stay tune for Hack 2 which will be More Examples + deploy it hackathon

If you liked this or want to know anything more about this, please reply and like this post. It means we are doing something right!

Happy Coding 👨🏻‍💻