Hack Club's Site (v3)

The source code for hackclub.com

Hack Club's new website. This codebase is what runs on hackclub.com. For new developers getting started, run the following in your terminal:

Download the code to your computer:

$ git clone https://github.com/hackclub/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 hackclub.com

Join us in building Hack Club's homepage and show new hackers what Hack Club 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 Hack Clubbers. 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 Hack Club or Hack Club community-led project (past or present) that Hack Clubbers 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 hackclub.com. What story to you want to tell?

Have questions? Join us in #hackclub-site-dev and to learn more about the style guide at Hack Club check this out

---

Hack Club, 2024. MIT License.