I recently found out about this great organization called Hack Club. Hack Club is a 6-year-old nonprofit organization that’s in 400+ schools around the world with 10,000+ students who participate. What makes Hack Club unique compared to other student-run organizations is that all the clubs are part of a shared network. There is a single Hack Club Slack community for all these thousands of students to hang out, socialize, and network.
The spirit of Hack Club, or the Hack Club Philosophy is around the principles of making, building community, and learning. They fill the gap where a traditional school falls short:
Learning at Hack Club is meant to happen through building real-world projects. There are no classroom-style lectures and no experience is required to start. All that is required is a willingness to get in the arena and learn as you go.
Lastly, and perhaps most powerfully, is the concept of community and support. If the hackers of the last generation felt like outcasts or like they didn’t fit in high school, the hackers of Hack Club are here to build a support group and worldwide support system by leveraging modern tools and technology.
Summer of Making
The Hack Club Summer of Making is a theme for the summer of 2020 to help hackers have their best summer ever. Hack Club students all around the world are building projects this summer and every day they post a message to a shared Slack channel with a progress update. The update can be a photo or video and everyone in the Hack Club Slack can see the update.
The thing I love about Summer of Making is that it encourages these students to make small progress every day. This reminds me of how I learned to be a developer and how I improved my skills. The best way to learn quickly is to pick a project that you care about and stick with it, making small progress every day.
Every student who posts updates to the Slack channel automatically gets a profile created in their Summer Scrapbook and every update to the Slack channel automatically updates their profile page. This is the homepage for Summer Scrapbook with the latest updates: https://scrapbook.hackclub.com/.
The individual scrapbook profiles are wonderfully reminiscient of MySpace. Students have their own page that they can customize with colors, custom CSS, audio tracks and links. These profiles are meant to be a permant log of all the work each student did over summer.
Mux is happy to be powering all the videos for Hack Club’s Summer of Making. When a video gets uploaded to the scrapbook Slack channel, Hack Club grabs it, makes an API request to Mux, and the user’s profile page gets updated.
The Summer Scrapbook project is an impressive feat of JAMstack engineering. All open source, and dare I say “hacked” together with various technologies. The first piece of the stack is Scrappy - the slack bot. This is a NextJS app, which receives webhooks for all the slack messages from the Slack channel, powers the slackbot commands, and also receives webhooks from Mux. If you want to see how to handle Mux webhooks on NextJS, take a peek at the source here for a great example.
One of the cooler “JAMstack hacks” that I have seen is Hack Club’s Airbridge. Airtable is the actual backend database powering this whole project and Airbridge is Hack Club’s API layer that provides a JSON interface for querying Airtable records. The first service, Scrappy, writes and updates records in Airtable.
And finally, the Scrapbook webapp. Another great NextJS app that queries data from Airbridge and pre-renders static pages that live at scrapbook.hackclub.com. It uses SWR for live updating on the site. Hack Clubbers can also point their custom domains to their profiles, which runs on a serverless function. For a more in-depth technical dive into how Scrapbook works, check out this blog post from Lachlan.
There’s a lot of simple JAMstack example projects out there, but in terms of complex projects that tie together multiple services, handle webhooks from multiple service providers, save data into a database, and have a fully built out NextJS frontend, this is a great example project.
With all the craziness going on in the world this year, it’s great to see these high school hackers turn 2020 into the Summer of Making by advancing their curiosity, learning new technologies, and building cool projects this summer. It gives me great hope for the technologists of tomorrow and Mux is thrilled to be the video provider for Hack Club ✌.