Eda
Eda's blog

Eda's blog

My First Web3 Hackathon

My First Web3 Hackathon

Eda's photo
Eda
ยทJul 6, 2022ยท

9 min read

Table of contents

  • TL;DR: Takeaways
  • ETH NYC
  • Our Hackathon Project: Staking Course Design App
  • Follow Up Resources

I attended ETH NYC as a hacker! We submitted our very first web3 hackathon project with my partner from BuidlGuidl on a project we started to build over the weekend! Crazy what you can build in such a short time when you have the pressure of time & +1000 people hacking around you.

Before attending and even applying, I had so many questions: Did I need to apply with a team, have an idea beforehand, what can you build in 36 hours, and how's the application process? Hence the reason for the post.

In this post, I want to cover my main takeaways, ETH Global Hackathon experience and what we built. So let's get to it ๐Ÿ‘ฉโ€๐Ÿ’ป

First things first, huge shoutout to ETH Global & everyone that made the event possible! Special thank you to Carlos & Austin for making it such a memorable weekend! ๐Ÿ™Œ

Screen Shot 2022-07-04 at 09.43.52.png


TL;DR: Takeaways

I'd typically add this to the end of a blog post, but I find myself searching for a TL;DR in most articles today. So, here are my main takeaways from attending a Hackathon:

  1. You can form a team there. However, it's a good idea to form a team beforehand. I'd highly suggest joining web3 communities; you'll meet many people in the space, learn a ton and might attend a hackathon together.

  2. You don't need to know what to build before applying or even going to the event. This is one that I was most worried about. At the venue, we got many ideas from speaking to others, mostly sponsors.

  3. Hackathons are not just for software engineers. There are many different parts, from coming up with an idea to designing and giving a presentation. So you'll need different skillsets. It's like building a mini startup over the weekend.

  4. Make sure to have a demo video & some good slides. This is very important. You'll be presenting to the judges and need to explain your idea with the story behind it. Don't just explain the code.

  5. You're racing against time! We were able to hit the ground running with Scaffold-eth. We deployed and tested our first smart contracts soon after starting the project.

  6. In-real-life events are not a must, but meeting people IRL makes a huge difference. You get to know lots more over a weekend than multiple zoom calls!

Screen Shot 2022-07-04 at 17.31.03.png


ETH NYC

I'd been thinking about going to a web3 event, specifically hacking at a hackathon. I heard about ETH NYC, organized by ETH Global, on June 24-26. However, I didn't know what to expect at a hackathon, so I didn't apply directly.

I applied after talking with a friend from BuidlGuidl to form a team and hack together at the hackathon. We had known each other for some time and were working on projects together. Seemed like a great match. So, we applied!

Screen Shot 2022-07-06 at 17.04.33.png

To be clear, I don't think going to an IRL event is a must-do. It takes a lot of time and can be costly (worth checking organizations that sponsor builders for hackathons). However, if you have the opportunity, I'd highly suggest going for it. I loved the experience, learned a lot and met amazing people.

Also worth mentioning that you don't need to form a team before applying; you'll get some opportunities to form a team after being accepted. However, if you're part of web3 communities, I'd highly suggest joining with people you know from there.

Here are some web3 communities that you can check out:

And many more! Head over to DAO Central to learn more.

The Application Process

The first step is to fill out the application form if you're applying as a hacker. The form asks for information such as your motivation to attend, your CV, extra links etc.

A few days after applying, we got our acceptance emails.

Once accepted, you've got to stake some ETH to confirm your attendance. After you've staked funds, you're in!

Team

If you're applying as an individual, the next question that comes up is how to form a team. There are many ways, and here are some:

  1. From people you know in communities and through different social channels (post on socials, see who you can team up with).
  2. There's a team formation channel on the Hackathon Discord server, which you'll get access to once you've been accepted to the event.
  3. IRL Team Formation session at the hackathon.

Idea

Once you have a team or decide to hack individually, it's time to come up with an idea. What to build??

This was my biggest concern after applying. We had no idea. Many people posted ideas on the Discord Server, which seemed pretty cool. I read some of the recent papers that could potentially give us an idea, listened to podcasts and tried to find ideas on Twitter.

The resources helped a lot, but in the end, we got our idea(s) from the first few days of being in NYC and meeting lots of people. You can go around and ask sponsors. These people generally have suggestions on what hackers can build; in fact, most of these ideas are also listed on the sponsor's websites or shared on various platforms.

So, not having an idea is definitely not a showstopper. I think that this is even a better way to go there and be open to suggestions.

Building w/Scaffold-Eth

Time is of the essence at a hackathon. 36 hours at a hackathon goes by faster than a regular 36 hours. So you really need to be mindful of time. โฐ

We built our project with Scaffold-ETH; it's a template for building Decentralized Applications(dApps) that provides rapid prototyping on Ethereum.

We had our first smart contract and sample frontend up in a very short time. With Scaffold-ETH, you can change the smart contract, which will automatically appear on your frontend. This way, you can see and test your smart contract changes from the UI.

Screen Shot 2022-07-04 at 17.23.29.png

Presentation

One thing to consider is that you'll also need a slide show and, ideally, a demo video. We were racing against time, so we didn't have the best or either of these. In fact, this is one of my main takeaways: work on the presentation as you are working on the code.

Basically, your deliverables are:

  • Source Code
  • Details about the project (Pitch, Project Description, How it's made)
  • Screenshots
  • (optional but highly appreciated) Demo Video
  • (for the judge presentations) Slide show

After submitting the project, you sign up for a time slot to present it to the judges. Once each team has presented, the finalists are chosen. Finally, the top 10 finalist teams do a presentation on the main stage.

Alongside the judge presentations, that are for the ETH Global awards there are sponsor prizes that you can compete for. In order to compete for the sponsor prizes you'll need to go to the Sponsor booths and present your solution to the folks over there. There are many sponsors for the Hackathon and you could learn detail about what the sponsors are looking for on the Sponsors page. For example, you could be eligible for an Optimism prize thats 100USDC by simply deploying your smart contracts to Optimism!

There were amazing projects, and here's a great overview tweet thread on the projects that made the finale. Here's the recording of the closing ceremony with the finalist demos.

Congrats to all the winners!!


Our Hackathon Project: Staking Course Design App

We decided to build a Staking Course Design App. The goal is to create an incentive model for free online courses. The app will allow users to create courses with built-in crypto incentives.

Here's what a course created with our project looks like from a student's point of view:

  1. Students stake funds to get access to the course
  2. Students can get a share of their funds back as they complete steps of the course
  3. Students are issued NFTs that show they've completed a step of the course.

Our project allows course-builders to deploy the smart contracts with these functionalities. So it's not for the students, but instead for the course-builders. The platform will coordinate between students and teachers.

Simply put, we built an app where clients (course-creators) can create smart contracts for online courses that can require staking and distributing NFTs after completing steps.

Design

Here's a diagram of an example student journey:

Screen Shot 2022-07-04 at 09.15.49.png

Here's what a course creator journey looks like:

Screen Shot 2022-07-04 at 17.58.40.png

For people that don't complete the course, the funds will be distributed to the students that have. This adds an extra fun element to the design. ๐Ÿ˜€

Technical Details

I will not be going over the full code in detail but want to highlight some aspects of how it's built.

As mentioned, we forked Scaffold-ETH and built our project on top of it. Here's our project repo. This gave us a starter application.

Let's have a look at the smart contracts which you can find here.

When a client (course-creators) goes to our website, they can specify the course details and then automatically deploy two smart contracts that are linked to each other.

Screen Shot 2022-07-04 at 09.30.02.png

Screen Shot 2022-07-04 at 08.50.59.png

  1. StakingCourseFactory.sol: this is the smart contract that creates 2 new smart contracts for clients. The course creators are the clients of our apps. The "createNewCourse" function deploys the two new smart contracts.
  2. StakingCourse.sol: this is for the course details. The goal of the project is to create courses that have built-in crypto incentives. This is provided via the StakingCourse.sol contract. The stake amount and the stepsNumber is specified in the contract. The contract keeps track of the students and their details. The contract has admin access to the class and can update the step a student is at.
  3. CourseBadgesNFT.sol: This creates the SVG NFTs for students who complete the steps. The NFT is automatically issued by the client when the student(s) complete a step of the course. The NFTs are SVG NFTS.

For the frontend, we added new pages for the course UI. You can see the additions to the frontend folder code over here.

On the same UI, we have added both the student and instructor views for convenience. (The idea is that the students and instructors will have separate frontends. Our app is for the course creators who will get the smart contracts and then can create their pages for students.) We have a Sign-Up page, Course Details and NFT Badge Page.

This was all done in 36 hours and there's lots more to add on! But hope that it provides an overview for a Hackathon project! ๐Ÿ™Œ


Follow Up Resources

If you're interested in attending a hackathon, here are some resources to check out:


It was a great experience, and I'll look for more events. In addition, many online hackathons are also coming up, which are a great way to get started.

If you have any questions or comments, drop them below or reach out to me on Twitter. See you on the next one! ๐Ÿ‘‹

ย 
Share this