All aboard!

Hack Clubbers focus on one thing: shipping.

After building a project, like an app or website, “shipping” is publishing & sharing it online.

Your first ship your first day.

Students in many traditional computer science classes are lucky to make a single project. At Hack Clubs, every member makes & ships their first website their very first meeting.

Keeping your eyes on the prize.

Instead of learning programming concepts in isolation, learning by shipping means you focus on what you need to build real projects. It’s more fun & leads to better learning.

Recently shipped…

Khushraj
@Khushraj

Big ship coming up! 🚢 :shipitparrot: Over the past month I’ve been porting all of Node Slack SDK’s :nodejs: :slack: packages to Deno :deno:, and today I’ve finally completed a major step — I finished porting Bolt ⚡ (and all of its dependants)! Presenting, Slack Bolt for Deno, a TypeScript :typescript: framework to build Slack apps using Deno rapidly with the latest platform features ⚡️ • GitHub :github://github.com/KhushrajRathod/slack-bolt> • /x/ :deno:: deno.land/x/slack_bolt This completes a major part of the Deno Slack SDK :slack-deno: 🎉 cc @safin.singh @Jeffrey @sampoder @rishi @caleb @mugaboverite (pinging whoever I thought would be interested / is involved in some way 🙂)

screenshot_2021-02-22_at_4.40.11_pm.png
example.png
sampoder
@sampoder

Hosted an interactive sound festival this morning at school. Powering it was a massive system of NodeMCUs, a web app, python scripts, an API and groovy Sonic Pi code. more: github.com/sampoder/sound-festival, videos in thread & thanks to zach and hq for helping with voiceovers

image_from_ios.jpg
image_from_ios.jpg
image_from_ios.jpg
image_from_ios.png
image_from_ios.png
image_from_ios.jpg
Khushraj
@Khushraj

BOLT FOR DENO IS HERE!!! I finished writing bolt.js for Deno today. You can now write complete slack apps in Deno! Will ship later today 🙂 ⚡ :deno: :slack: GitHub: github.com/KhushrajRathod/slack-bolt /x/: deno.land/x/slack_bolt@1.0.0

screenshot_2021-02-21_at_5.16.40_pm.png
Khushraj
@Khushraj

I made ANOTHER readme + a project for it (that’s how I’m going to ship stuff now too — Make READMEs, and then projects to accompany them :eggsdee:). Blueprint is… a blueprint for deno modules :expanding_brain_4:github.com/KhushrajRathod/Blueprint

screenshot_2021-02-18_at_12.15.00_am.png
googol
@googol

might ship something today :blurryeyes:

image.png
uanirudhx
@uanirudhx

:partyparrot: lsf - hyper minimal ls replacement, doesn't even show size of files lmao hackclub.slack.com/archives/C01E46F6BNH/p1612568036290900 <- click the link to download and use! here's a screenshot edit: i shipped this in 5 seconds this is a half joke

image.png
safin.singh
@safin.singh

I've been struggling to put together large-ish completed projects lately so I decided to just go all out and see how much I can get done in a day-ish. I just finished up ankylos (github.com/safinsingh/ankylos) a modular bootstrapper thing for node projects. Here's what it does: 1. Grab a preset to clone from. This will be copied to whatever destination you specify via a tarball from NPM 2. run ankylos bootstrap to read from the ankylos.config.js in the preset. this tells ankylos what plugins to install and configure. for example, the next preset automatically installs and configures the 'editorconfig', 'eslint', 'github', 'husky', 'markdownlint', 'pnpm', 'prettier', 'renovate', and 'vscode' plugins. it'll also send instructions for build scripts to set, dependencies, etc. ankylos will take care of the explicit dependencies in the preset first. then, it'll install your plugins (ive made like 10 of them for convenience) and install your plugin's dependencies (these are stages 1 & 2 of the bootstrap phase) 3. ankylos prompt you for project metadata and will insert your custom build scripts along with this metadata into a fully-filled out and templated package.json file. finally, ankylos will walk through each of your plugins and apply/copy the files specifies in ankylos.config.js 4. from there, pnpm install will bump you in to your new, modular, automatically-bootstrapped, linted, formatted, <insert a bunch more buzzwords> project! i only had enough time to create a next and node preset so be sure to check those out. anyway, i'm glad i was able to follow through with this and i hope y'all like it! p.s: you can check out all 16, yes, 16 projects from the ankylos monorepo on its dedicated npm org: www.npmjs.com/org/ankylos. anyway, i'll try my best to maintain this (it's in my best interest too so thats good) if anyone else decides to use it

image.png
sarthak
@sarthak

🚢 new website incoming 🚢 I've been working on this for a few hours and I think it's good. It's supposed to be a website for right now saying I'm not available to work but still consider me. You can see the source code on my github. srtk.me.

image_from_ios.png
cwi
@cwi

Hello! Today I am happy to announce that I am releasing Sailboat (github.com/cole-wilson/sailboat) for the first time! ⛵ Sailboat is a Python developer’s best friend. It’s a Python build tool that can do anything you need it to! It supports a countless number of plugins — you can even make your own. Sailboat is made for anyone, whether you are a beginner on your very first project, or a senior software engineer with years of experience. Let’s say that that you have created a basic game, Guess My Number, and you want to send it to all of your friends. There are a lot of different ways you can do this, but using Sailboat is the easiest. All you have to do is type three commands: sail quickstartsail build, and sail release, and you can have a Homebrew file, a pip installable package, and a PyInstaller desktop app in less than 5 minutes. So easy! :python: You can check it out at github.com/cole-wilson/sailboat and sailboat.colewilson.xyz Please let me know what what you think, and if you find any bugs let me know, or submit an issue!

sailboat.png
sampoder
@sampoder

shipped this!

screenshot_2021-01-17_at_11.31.06_pm.png
fayd
@fayd

I hope its ship-worthy, but this is what I was working hard on in 2020! My workshops! :)

image.png
sampoder
@sampoder

continuing the theme of making things for innovation week: we’re making a QR code garden in the school staircase! it’s going to be full of qr codes to hopefully make people intrigued when you scan the qr code, you’ll either get a quiz (where you can win house points!), a link to an instagram filter, an emoji guessing game, a meme, a riddle or a riddle (forked from lachlan’s SoM ideas page)! here are some samples: quiz: qr.innovweek.co/recZjRgVX47M5YwVk meme: qr.innovweek.co/recztiUqFypN6kZAP idea: qr.innovweek.co/recnTiaNAdwD9Pjc7 i’m especially proud of the quiz one. it was my first time using cookies (which ngl are super cool) and basically it creates a cookie so you can only redeem the house points once! uses next.js + airtable (but you probs already guessed that!) also geopattern is really cool, each page has a unique bg! oh and one more thing: if you are super super lucky you win a free :github: t-shirt :flying_money_with_wings:

screenshot_2021-01-05_at_8.55.43_pm.png
screenshot_2021-01-05_at_8.56.21_pm.png
sampoder
@sampoder

This Christmas I got a Jedi Challenges AR Headset from Santa (thanks Santa!). I really like the game, but I wanted to be able to put custom applications on to it! So I made Holocron :jediparrot: which is a React component that makes doing so super duper easy. It helps you size the window correctly and position the screen etc. It was my first time making a React component and I found the publishing quite difficult but I worked it out well: www.npmjs.com/package/@sampoder/holocron I then built a demo app that shows the status of your Vercel deployments on your headset. It uses SWR and react-reveal to make it feel buttery smooth! I also built one that implements the Slack events component on the Hack Club Website (here) on to it (sadly I ran out of time to put this in the demo vid but there are pics attached! Here's the GitHub project for the package: github.com/sampoder/holocron. And here's the demo video which I submitted to MLH's weekly hackathon...... and guess what?? Somehow, I won Best Overall Hardware Hack so I now get a free kit from ironically DigiKey (you still owe me money, no escaping) but my react component won best hardware hack lol!

screenshot_2020-12-28_at_2.02.57_am.png
screenshot_2020-12-28_at_2.03.10_am.png
rishi
@rishi

Helloooo Hack Clubbers! It’s ya boi rice back at it again with another HN ship :hn: :parrot:! Before I lay out the new changes, I just wanted to thank the wonderful @caleb for testing out the bot authentication system yesterday (the UNO bot looks great), and @khushraj.rathod for volunteering to build out the exchange system—forex is coming to Hack Club, everyone :parrot_love:! Anyways, let’s get back to day 4 of my personal lil shipathon: changes to @undefined and the HN API! The Teller now has one awesome new command for validating payments (/pay was there before, but I’ve added some new messages and interactivity with it), and a super great new dashboard—feel free to head over to Home on @undefined’s profile page to take a look. The HN GraphQL API now supports advanced pagination and sorting! You can now query for as many transactions as you want, iterate through them, skip through tests, and even order by different fields! For instance, to grab the 5 people with the most HN and two of their largest payments, you can do something like:

query Users {
  users(options:{
    sort:{
      field:"balance",
      order:"DESC"
    },
    take:5
  }) {
    id
    balance
  	outgoingTransactions(options:{
      sort:{
        order:"DESC",
        field:"balance"
      },
      take:2
    }) {
      id
      balance
      from {
        id
      }
      to {
        id
      }
    }
  }
}
I’m soooooo excited for what all of yall are going to be doing with this—as always, if you’re interested in making a bot, feel free to DM me with the bot’s username to get your very own token! You can find the source for HN over at: :githubparrot: 🌟 z.rishi.cx/g/hn, and the Teller over at z.rishi.cx/g/teller :D P.S. The next ship will be V1 of HN—the production-ready, stable version of the API with documentation!

screen_shot_2020-12-25_at_3.14.50_pm.png
rishi
@rishi

Yellow hellow everyone! It’s the first day of winter break, and now that all my school stuff’s finished (having handed in what might, in hindsight, have been one of the worst essays of my life), I’ve found myself quite pretty bored! I’m going to be challenging myself to build one cool thing every day (and maybe ship it either here or in #rishi if it’s smaller), so here’s the first one! I’ve found myself working with asynchronous hooks in React a lot; whether that be to fetch data or just do timed stuff client-side, the normal integrations just don’t really cut it for me. That’s why I built my own library for those kinds of hooks! @rishiosaur/async is built in Typescript, and has some awesome documentation as a result (Typedoc really comin thru), and has two hooks that I use a lot in my daily React life: usePromiseEffect and useAsyncEffect, both of which are modelled to look like idiomatic React (I’ve attached an example of their usage down below). :githubparrot: You can find the Github repo over at z.rishi.cx/g/async (feel free to star!), :npm: The NPM package over at www.npmjs.com/package/@rishiosaur/async, 🏗️ And the documentation over at async.rishi.cx!

screen_shot_2020-12-22_at_10.27.16_am.png
safin.singh
@safin.singh

Rewrote my GPT parser thingy implementation! I got rid of a bunch of useless dependencies that I could manually implement and it now contains zero unsafe code! The table-generating code has been rewritten to be way simpler and requires less allocations and stuff. I've also included comments in a bunch of places in case y'all are curious what certain lines do. Code is on GitHub and you can install it (assuming you have cargo) with cargo install gptinfo!

image.png
uanirudhx
@uanirudhx

learning next.js in prep for a ship 👀

image.png
sampoder
@sampoder

i made a thing a few weeks ago with my :hardware: that i never shared… it’s a sound reactive necklace for school! i made it in one night after my product completely fell apart so i was very fortunate to have saved it :))) code is @ gist.github.com/sampoder/374fc57a01a08514f3946c02c1cec5fc as a demo you can check out my video review of the product functionality i submitted:

screenshot_2020-12-08_at_11.53.51_pm.png
sampoder
@sampoder

i made a newsletter for the new school magazine launching tomorrow! i used next.js, mdx and deployed on vercel! been a bit stressful putting it all together but proud of the end result: vantage-point.online :yay:

screenshot_2020-12-07_at_11.55.29_pm.png
sampoder
@sampoder

ultra random ship… but my student council pulled off one of the biggest events of the year super last minute! we wanted to raise money for movember :moustache-parrot:, but caught up with stuff, in the end we did a 🥧 pie the teacher event! we had 10 or so teachers + me and the vice president of stuco who were forced into this by some very ~evil~ creative stuco members loll, it was painful but i individually raised like 50 bucks so thats cool… overall, it actually went super well and mostly smooth and we raised like A LOT of money: $529.85 💸 i looked like the abonimal snowman at the end apparently

gwa00163.jpg
gwa00146.jpg
gwa00071.jpg
sarthak
@sarthak

🚢 CHALLENGE SHIP 🚢 Aight I’m shipping a link shortener which is faster than @rishi’s if I remove the Airtable integration. Like @rishi’s, it supports additional parameters at the end of a link. It’s written in Next.js and just as easy to clone. Check it out at srtk.me/gh/srtk.me-v2! (that link is using the shortener) coming soon: ip address tracking with location and other information

image_from_ios.png
linus
@linus

Installer package is complete, now I'm just waiting that special installer certificate, then I can ship! 🚢

screen_shot_2020-11-24_at_9.14.46_pm.png
sarthak
@sarthak

YEEHAWWWW 🤠 today i added a walkthrough page for my site cause my main page is super simple. My favorite parts are the custom card components I made and the timeline I made! Check it out at sarthakmohanty.me/walkthrough!

image_from_ios.png
image_from_ios.png
sampoder
@sampoder

i worked out how to gain access to the image feeds of major traffic cameras around the island and built a dashboard for snooping around looking at each one: sg-traffic.now.sh….. these images are cool to watch over time, I might make something tomorrow for generating time-lapses from them :D source @ github.com/sampoder/traffic-monitor …. I used next.js, who would have guessed?

screenshot_2020-11-22_at_11.28.47_pm.png

These are just a few posts…

Keep exploring →

Want to ship your own projects?

The #ship channel on the Hack Club Slack is where 10k+ teenagers from around the world share what they’re working on & help each other.
Join our Slack