The source code for happyhacking.space
Happy Hacking Space's new website. This codebase is what runs on happyhacking.space. For new developers getting started, run the following in your terminal:
Download the code to your computer:
$ git clone https://github.com/happyhackingspace/site && cd site
Install dependencies:
$ yarn
Start running the website on your computer:
$ yarn dev
And then open up your web browser and go to localhost:3000.
Please note: There are a number of redirects and rewrites essential to the website's functionality, which you can see in next.config.mjs.
Powered by Next.js with MDX, Theme UI, & Hack Club Theme.
Code under MIT License, assets may not be re-used or re-distributed.
Building happyhacking.space
Join us in building Happy Hacking Space's homepage and show new hackers what Happy Hacking Space could be for them 💖.
See something that could be better? Make a PR! Have an easter egg idea? Make a PR! Is the site missing something? Make a PR! (Do you see a trend? :))
If you need to add content to the site, here's how you can:
Create a new card
Most things on the homepage are cards, modular components that can easily be added and removed according to relevancy to Happy Hackers. There are 3 main sections: connection, open-source, and IRL community. Most new cards will likely fall within the first two sections!
First, you can create a new file under components/index/cards with the name of your new event/project. Next add import CardModel from './card-model' and add whatever you want :) Finally, use a component (import Buttons from './button') to highlight call-to-action buttons. If it's the main button, use the primary prop to add a background color!
Your challenge: try and make the card as unique as possible, like a mini poster! Not sure where to start? Look at other cards on the page :)
Add to the carousel
If there's a Happy Hacking Space or Happy Hacking Space community-led project (past or present) that Happy Hackers can get involved in, please add it to lib/carousel.json and add your card to the end of the json file. An example looks like this:
{
"background": "dark",
"titleColor": "white",
"descriptionColor": "white",
"title": "Hackers Wanted",
"description": "Our open love letter to hackers",
"img": "https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f4bb@2x.png",
"link": "/hackers-wanted"
}Every week, thousands of people visit happyhacking.space. What story to you want to tell?
Have questions? Join us @ https://join.happyhacking.space and to learn more about the style guide at Happy Hacking Space check this out
Hack Club, 2025. MIT License.