freeCodeCamp 2018 JAMstack Hackathon at GitHub in San Francisco on November 3 - 4

freeCodeCamp 2018 JAMstack Hackathon at GitHub in San Francisco on November 3 - 4
0

#1

freeCodeCamp is hosting a free hackathon at GitHub in San Francisco (and an online hackathon, too)

On November 3, hundreds of people will converge on downtown San Francisco to compete in the 2018 freeCodeCamp JAMstack Hackathon.

You should come, too!

And don't worry if you can't make it to San Francisco - we'll have an online version of the hackathon with its own set of prizes.

freeCodeCamp is hosting the event in partnership with Netlify, as a part of JAMstack_conf 2018.

And yes - the hackathon is completely free. (If you want to attend the conference as well, you can use the promo code freecodecamp100 for $100 off conference tickets.)

What is a hackathon?

A hackathon is an event where people join teams and code together, then show off the projects they built. They usually only last one or two days, and often involve judging and prizes.

The JAMstack is a simple way of building web apps. JAM stands for JavaScript, APIs, and Markup (HTML and CSS).

If you've built some of the projects in the freeCodeCamp curriculum, you've already been using the JAMstack.

The main difference between the JAMstack and other web development stacks like LAMP and MEAN is this: instead of using a web server back end, you use APIs.

Is this event for me?

If you want to make friends, build a project, and get in two solid days of coding practice, then yes - it's for you.

A photo from a recent React-focused hackathon held at GitHub. Photo by Real World React.We welcome people of all skill levels - even people who just started coding a few months ago. If you haven't been to a hackathon before, this would make a great first hackathon for you.

And there will be food. Lots of food.

How can a big event like this in downtown San Francisco be completely free?

Most hackathons have API sponsors who want to raise awareness of their APIs among developers. Many of these API sponsors will also have their own prizes for teams who make the best use of their APIs. They may also have developers at the event who can answer your questions about their API, and help you integrate it into your web app.

My company has a sweet API. Can we sponsor?

Of course! Send sponsorship inquiries to sponsors@jamstackconf.com

What about the Online hackathon?

Traveling to San Francisco can be expensive, and it can be a pain to get a US visa. So we're also hosting an online version of the 2018 freeCodeCamp JAMstack Hackathon. It will take place during the same days.

Online hackathon teams will compete for their own set of prizes. They can interact with the judges, mentors, and other hackathon teams through our chat room and our live stream of the event on the freeCodeCamp YouTube channel.

What about the San Francisco hackathon?

We'll start at 9 on Saturday morning on November 3 at GitHub's San Francisco headquarters (88 Colin P Kelly Jr Street). We'll code until 9 at night, then go home and get some sleep. Then we'll start again at 9 on Sunday morning, and finish up by 9 on Sunday night.

How to get a free ticket

We want everyone to be ready to code as soon as the event starts. So in order to get a ticket for either the in-person or online hackathons, you need to take a few minutes to make sure your laptop is all set up right.

The following tutorial will walk you through installing Git and Node.js, and deploying a "hello world" JAMstack app to the web.

This process is completely free and you don't need a credit card or anything. Over the next few minutes, you'll install a few tools on your laptop and create an account on GitHub and Netlify.

You can skip any steps that you've already done, but you will need to have a "hello world" app live on Netlify in order to apply for a free ticket.

Once you've finished this tutorial, you can submit your "hello world" app's URL to apply for a free ticket.

We have a limited number of tickets and we expect the event to be full, so I recommend applying as soon as you can.

How to get your first JAMstack web app live

This tutorial will work on Mac, Linux, and Windows.

If you are using Windows I recommend using Windows' new Linux Bash Shell.

Note: when configuring all of these things on your computer, you may encounter issues related to your operating system. If you get stuck, read through this forum thread and if you are still stuck, ask for help by replying to this thread.

Step #1: Install Git

Git is a powerful version control tool that most major open source projects, including freeCodeCamp, use for collaborating on software.

You can download and install Git here.

Step #2: Install npm, Node's package manager

You can download and install npm here.

Step #3: Install VS Code, Microsoft's open source code editor

You can download and install VS Code here. You can use any code editor you want, but this is a popular free one.

Step #4: Install Gatsby.js

Open your terminal (which may be called a shell in your operating system) and type the following command:

sudo npm install --global gatsby-cli

You'll need to enter your system password, which should be the same password you use to unlock your computer from sleep mode.

Step #5: Create your JAMstack "hello world" app using Gatsby

Run the following command:

gatsby new gatsby-site

Step #6: Change to your app's directory and run it locally on your computer

Run the following command:

cd gatsby-site && gatsby develop

Now open a new tab in your browser. Type localhost:8000 into your browser's address bar. You should see something like this:

Step #7: Customize your project's code

Open your project in VS Code or whatever code editor you prefer.

Navigate to the index.js page and customize its HTML.

Step #8: Commit your code to Git

Make sure you're in your project's directory in your terminal and type the following command to initialize a Git repository:

git init

Then stage all of the files that Gatsby created in Step #5 by running this command:

git add .

And finally, commit those files to Git with the commit message "first commit":

git commit --message "first commit"

Step #9: Create a GitHub account

You can create a free GitHub account in just a few minutes here. (Choose the "Unlimited public repositories" option).

Check your email inbox so you can verify your GitHub account.

Step #10: Add your SSH keys to GitHub.

SSH keys are a way you can securely access your GitHub account from your terminal without the need for authenticating using a username and password.

Run this command in your terminal to generate SSH keys:

ssh-keygen

The terminal will prompt you to choose a file location. Just press enter to accept the default file location. If the terminal tells you that you have already generated an SSH key in the past, press "n" so you don't overwrite your existing key.

Run this command in your terminal to copy your computer's public SSH key to your clipboard:

pbcopy < ~/.ssh/id_rsa.pub

Then click here to go to the SSH key settings page in GitHub and paste it in.

Step #11: Create a repository on GitHub

Follow this link to create a GitHub repository. You can name it whatever you want, and the description doesn't matter for our purposes. As long as you make this public, it's completely free.

Step #12: Set your GitHub repository as your local Git project's origin and push your code to GitHub

Once you've completed Step #10, GitHub should send you to a page that looks like this, which has an option to push an existing repository from the command line.

You can click the clipboard button to copy the commands to your clipboard. Then go back to your terminal and make sure you're still in your project's directory. Then paste those commands into your terminal.

Step #13: Create a Netlify account

Follow this link to go to Netlify's signup page. Then sign in using the GitHub account you just created.

Step #14: Create a Netlify app from your GitHub repository

Now go here and choose GitHub as your Git provider.

You should now see the GitHub repository you created a few minutes ago, and be able select it.

Netlify's default configuration should be fine. So you can just scroll down and click the "deploy site" button.

Step #15: Wait for your web app to build, then visit it on the internet and make a note of its public URL.

You can click the automatically-generated Netlify URL to view your project live on the web.

Congratulations! Your first JAMstack web app is now live on the internet!

You now have all the components you need to start expanding and developing your JAMstack web app. You can open up your codebase in VS Code, make edits, commit those edits to Git, then push them to GitHub. Netlify can automatically build and deploy your app to the web.

But for now, you are all set to apply for your free 2018 freeCodeCamp JAMstack Hackathon ticket!

Make sure you have the URL for the GitHub repository you just, and the URL for your live JAMstack web app you just created (the Netlify project URL). Then fill out this quick form to apply for a free ticket.

Be sure to follow freeCodeCamp on Twitter - we'll post updates there as well. Look forward to seeing you at the 2018 freeCodeCamp JAMstack Hackathon!


#2

This is great, it’s good to see there are hackathons that non-college students can participate… and via online too!


#3

@QuincyLarson Thank you for doing this! :fireworks: :clap: :fireworks:

Are GitHub, React/Gatsby, and Netlify mandatory?

I ask because of this:

The following suggests that it’s preferred to use the sponsors APIs and services, but I can’t tell for sure if other APIs and services will be rejected for the application and/or projects:

Thanks for helping me to understand this process better. :sunny:


#4

this is really amazing to know about hackathon for professionals as well.

@QuincyLarson I’m using windows 7 64 bit. is there any way t install linux bash shell here. if so kindly guide me


#5

Really excited about this. Thanks a lot!
I submitted mine.
How long should we expect to get a confirmation and the ticket?


#6

Hi, I have submitted mine. Are there any goods like tshirt for participants, especially for those who join Hackathon online?


#7

Hi! Theres is an error when I try to cpy my SSH Key to the clipboard. Help, please!! Thank you in advance.
JP


#8

There you go! You have to run first:

ssh-keygen

And for Windows, the command for copy to the clip board is:

clip < ~/.ssh/id_rsa.pub

Hope it works for anybody else!


#9

@QuincyLarson Greetings to you. Thanks for the such programme. I want to find out if it’s a must to use the Windows new Linux Bash Shell? I actually prefer using Git Bash and wouldn’t want installing bash app.


#10

I just used Git Bash and it works well. :smiley:


#11

@AnnabelleSP Oh! That’s better. Thanks, let me do same now.


#12

This is AWESOME!! I have been waiting for a Hackathon like this for months. Good one Free Code Camp, I love this step. I wont be there is person due to lack of Visa but this is a must attend event. I am joining online, hoping to participate.
NERDS CONVERVE ON THE EVENT!!! HOT!!


#13

i am unable install Gatsby.js … can anyone help me plzz?


#14

For registration for the hackathon, using both GitHub and Netlify is mandatory. This is because we don’t want to have to spend the entire weekend helping people with basic configuration issues - we want people to spend that time coding. And making sure people are able to publish JAMstack apps to the web is a good way to ensure that.

We use Gatsby for almost everything on freeCodeCamp.org (soon we’ll be using it for everything). It’s relevant and powerful, and worth the time to configure and start using.

For the hackathon itself you’ll be able to use whatever APIs you want, but you’ll probably also want to use sponsor APIs since those sponsors will be on hand to help you, and will be awarding prizes to the teams who make best use of their APIs in their projects.


#15

Once you figure out how to set this up on Windows 7, let me know the commands and we can add instructions to the guide.


#16

Be sure to install npm first.


#17

Thanks! I just added this to the tutorial.


#18

Waiting for the online hackathon or winning the lottery to travel to SF, whatever comes first.


#19

Good luck :slight_smile:

I have submitted mine too. This will be my very first Hackathon if I got ticket.

:crossed_fingers:

Keep us posted if possible :slight_smile:


#20

Have got your ticket ?
It would be great if we could get the goodies :wink: