HackClub Butwal

The source code for HackClub Butwal's site

HackClub Butwal's website. This codebase runs on butwal.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-Butwal/butwalhacks && cd butwalhacks

Install dependencies:

$ yarn

Start running the website on your computer:

$ yarn dev

Routing

This Next.js application uses file-based routing. The main routes are:

• / - Home page
• /form - Registration form (embedded Tally form)

Legacy Redirects

The application handles legacy redirects for:

• /form/form.html → /form (automatically redirected)
• Any .html files → corresponding routes without extension

Deployment

This project is configured for static export and can be deployed to:

• GitHub Pages (recommended) - Automatic deployment via GitHub Actions
• Vercel - Zero-config deployment
• Netlify - Static site hosting

The project exports to static HTML files in the out/ directory for compatibility with static hosting providers.

---

Consistency and Best Practices

The project follows Next.js best practices for file extensions:

1. Consistent Extensions: All React components and pages use the .js extension consistently
2. Proper Organization: Files are organized in appropriate directories based on their purpose
3. Clear Documentation: File extension usage is now well-documented for future contributors

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.

---

Building butwal.hackclub.com

Join us in building HackClub Butwal's homepage and show new hackers what HackClub 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 carousel, 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 carousel will likely fall within the first two sections!

First, you can create a new file under components/index/carousel 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 carousel 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/[email protected]",
  "link": "/hackers-wanted"
}

Every week, hundreds of people visit hackclub.com. What story do you want to tell?

Have questions? Join us in Discord

---

HackClub Butwal, 2025. MIT License.

Code under MIT License, assets may not be re-used or re-distributed.