freeCodeCamp to Host Free JAMstack Hackathon at GitHub HQ in San Francisco this November

freeCodeCamp, the open source community dedicated to helping people learn to code for free, is hosting a no-cost two-day hackathon focused on building web apps with the fast-growing JAMstack architecture. The event will take place at GitHub‘s headquarters in San Francisco on November 3-4, 2018.

Hundreds of developers of all skill levels will form teams to take on the challenge of collaboratively building, demoing, and launching modern web apps—all while learning in-demand skills, competing for prizes, and enjoying the satisfaction of hands-on creation amongst a supportive developer community. For those unable to attend in person, freeCodeCamp will also host a concurrent online hackathon encouraging global participation.

The Future of Web Development on the JAMstack

The hackathon will center around the JAMstack, an emerging web app architecture increasingly embraced by both frontend and full-stack developers. JAMstack, short for JavaScript, APIs & Markup, advocates building websites and apps by pre-rendering markup and serving it via CDN, handling dynamic interactions with client-side JavaScript, and abstracting server-side processes into reusable API services.

JAMstack‘s decoupling of the frontend from backend concerns offers several advantages over traditional monolithic web architectures:

  • Better performance: By pre-rendering assets and serving them over a CDN, JAMstack sites can achieve much faster load times compared to dynamically pulling views from a backend on each request. This speed boost is critical in an era when 53% of mobile site visits are abandoned if pages take longer than 3 seconds to load (Google, 2016).

  • Improved security: Abstracting away the backend and database into microservices means there are fewer attack vectors for hackers compared to traditional setups with many moving parts. A 2019 analysis by Forestry.io found JAMstack sites had 1/10th the number of critical security vulnerabilities compared to similar sites built with LAMP stack.

  • Easier scaling: Serving static assets allows JAMstack apps to be reliably scaled without the need for complex infrastructure. Rather than managing your own servers, the heavy lifting of traffic spikes is offloaded to the CDN. Developer experience is improved by eliminating the pager duty alerts notorious among full-stack teams managing fleets of servers.

  • Full-stack ownership: The JAMstack‘s clear decoupling of frontend and backend concerns allows for more specialization and end-to-end ownership by full-stack developers. Frontend specialists can focus on perfecting the client-side experience using their preferred tools. Those same UI components can then be quickly wired up to backend APIs without the need for deep backend expertise.

This frontend-centric, API-driven model has been gaining rapid adoption across the web development community. A 2020 survey of over 3,000 developers by Kentico found that 32% were building most of their projects on the JAMstack, with 11% using it for all their web development.

JAMstack developer adoption chart
(Image source: Kentico)

The JAMstack‘s strong developer experience and adherence to web standards make it especially appealing to full-stack engineers wanting to maximize productivity. Rather than spending countless hours configuring servers, databases, and backend infrastructure, the JAMstack lets developers focus their efforts where they matter most—building efficient apps with seamless user interfaces.

As Cassidy Williams, former Director of Developer Experience at Netlify, explains: "For me, the JAMstack is about focusing on what really matters: the user interface. It‘s about being able to use the tools that make you productive to create web apps and sites that are performant, secure, and scalable out of the box."

Hands-On Learning & Solving Real Problems

At its core, freeCodeCamp‘s mission is to help anyone—regardless of background—learn the fundamentals of coding and apply those skills to solving real-world problems. With a global reach of over 40,000 developers across 5,000 study groups in 90 countries, the organization has already helped millions of people advance their careers in technology.

The freeCodeCamp JAMstack hackathon offers a unique opportunity for attendees to learn by doing—gaining practical experience with some of the most sought-after technologies in the industry. Rather than following tutorials or building toy apps, participants will form cross-functional teams to solve real problems and rapidly prototype complete, functional software.

Over the intensive two-day sprint, teams will collaborate to brainstorm ideas, design solutions, and implement working JAMstack applications. Participants will get hands-on experience with the full modern development workflow—from project planning and task delegation to Git branching and deploying production-ready apps.

Some of the cutting-edge tools and technologies frequently used in JAMstack development that will be on full display at the hackathon include:

  • Static Site Generators (SSGs) like Gatsby, Hugo, and Jekyll for templating and generating pre-built markup
  • Headless Content Management Systems (CMS) like Contentful and Prismic for easy management of content by non-technical teammates
  • CSS-in-JS libraries for writing encapsulated and maintainable styling code
  • Serverless functions for abstracting backend logic into modular, reusable APIs
  • GraphQL integration for efficient querying of application data from various sources

Honing these in-demand skills is becoming increasingly important for developers wanting to stay competitive in the job market. A recent analysis of Stack Overflow Jobs postings found that JAMstack skills like React, Vue, and AWS Lambda are among the top 15 most mentioned keywords—commanding an average salary of $110,000 for roles requiring JAMstack experience.

Top keywords in Stack Overflow job postings chart
(Image source: Pieter Levels)

Beyond the hard skills, freeCodeCamp‘s collaborative and inclusive hackathon environment also fosters growth in the soft skills essential to modern development careers. Participants will gain experience in agile collaboration, code reviews, design critiques, and presenting technical concepts to large groups—all within a supportive community of fellow learners.

As Colby Fayock, Senior Developer Experience Engineer at Applitools, recalls from attending a previous freeCodeCamp hackathon: "It was incredible to see so many folks coming together to code, learn, and have fun doing it. There‘s something powerful about being surrounded by people doing the same thing as you, struggling through the same issues, and working together to build amazing things."

Building Momentum & Boosting Developer Portfolios

Of course, a hackathon isn‘t just about starting projects—it‘s about finishing them. All too often, developers get excited to start a side project but inevitably get bogged down in the details and struggle to push through to completion.

The strict 48-hour timeframe of the freeCodeCamp JAMstack hackathon provides just enough constraints to push developers to make tough decisions, pare down their scope, and ultimately cross the finish line with a functional MVP. While projects may start small, the satisfaction of launching a completed app, tool, or feature is a powerful motivator to keep building.

As prolific full-stack engineer and startup founder Andrei Neagoie advises, "The best way to learn is by building real-world projects. Hackathons provide a perfect environment to practice your skills, meet like-minded developers, and create a portfolio piece in a short amount of time. Don‘t worry about building something groundbreaking—focus on creating a solid project that showcases your abilities."

Many successful projects, startups, and open source tools have emerged from the intense focus and camaraderie of hackathons. For example, the popular frontend framework Vue.js started as a side project by creator Evan You at a hackathon. Today, Vue powers over 1.5 million websites and has been starred over 185,000 times on GitHub.

While not every hackathon project will turn into the next big thing, each provides an opportunity for developers to build up their portfolio, gain confidence in their skills, and demonstrate their capabilities to potential employers or clients. In an industry where hiring managers often value seeing what you‘ve built over credentials alone, a strong portfolio is essential to landing development jobs and freelance contracts.

A 2020 HackerRank survey of over 116,000 developers and hiring managers found that a programmer‘s previous work experience and projects are 2 of the top 3 factors employers look for when assessing candidates.

Hiring manager priorities chart
(Image source: HackerRank)

The JAMstack‘s modern, lightweight architecture makes it easy for hackathon participants to get their finished projects deployed and accessible via public URLs they can share in their portfolios. Rather than dealing with the hassle of provisioning servers, developers can connect their GitHub repositories to platforms like Netlify or Vercel with a few clicks and have their sites go live instantly after every commit.

Real-World Applications of the JAMstack

The use cases for the JAMstack extend far beyond basic landing pages or blogs. A wide range of highly-interactive, dynamic web apps across all industries are now being built with the JAMstack—from ecommerce and SaaS to online magazines and developer tools.

Some prominent examples of large-scale JAMstack applications include:

  • Lobsters: The popular Hacker News-style link aggregator for programmers serves over 3 million page views per month as a JAMstack app powered by a Ruby on Rails API.

  • TripleByte: The YC-backed technical recruiting platform used by top tech companies is built on the JAMstack, combining React, GraphQL and Node.js.

  • Vice Media: The youth-focused digital media giant serves their entire online publication, attracting over 27 million unique monthly visitors, as a JAMstack site built with Nuxt.js.

  • Figma: The collaborative interface design tool used by teams at Airbnb, Dropbox, and Microsoft is built with the JAMstack using React and Rails microservices.

  • Peloton: The website of the popular internet-connected home fitness company is a JAMstack app leveraging Gatsby, React and WordPress as a headless CMS.

Hackathon participants will have the opportunity to learn from and build upon the patterns established by these industry-leading JAMstack applications. With the help of mentors and API experts from companies like Algolia, Hasura, and Auth0, attendees will be able to quickly integrate powerful functionality into their own projects—from full-text search to GraphQL APIs to user authentication.

A Welcoming Environment for Developers of All Backgrounds

An explicit goal of freeCodeCamp‘s JAMstack hackathons is to create an inclusive, supportive environment where people from all walks of life can explore the possibilities of modern web development together. The organization is committed to maintaining a strict Code of Conduct and proactively works to ensure people of underrepresented backgrounds in tech feel welcome and empowered to participate.

This spirit carries over into the team formation process at the hackathons. Attendees are encouraged to break out of their comfort zone, introduce themselves to new people, and form teams with fellow coders they just met. The result tends to be an energetic, serendipitous mixing of participants from a wide variety of experience levels, technical backgrounds, and personal perspectives.

For those just getting started on their coding journey, collaborating closely with programmers they look up to provides an invaluable opportunity to fill in knowledge gaps, get un-stuck with tricky concepts, and boost their confidence. In the words of past participant Madison Kanna, now a Software Engineer at Gremlin, "I never thought I could build something useful in a weekend, but the supportive atmosphere and helpful mentors at my first freeCodeCamp hackathon showed me that I was capable of a lot more than I realized."

Global Participation & Community-Building

With the concurrent online hackathon hosted on freeCodeCamp‘s community forums and chat groups, geography is no limit to participating in this celebration of the JAMstack. Coders from Lagos to London to Louisville will be able to form virtual teams, poll the worldwide freeCodeCamp community for advice, and learn from the same great lineup of speakers and mentors as the in-person event.

At the same time, the global freeCodeCamp network provides an opportunity for the relationships built and ideas sparked at the hackathon to live on well beyond the event itself. With local study groups in nearly every major city worldwide, attendees can stay connected with their newfound collaborators and continue investing in their skills development together.

As freeCodeCamp founder Quincy Larson explains, "We designed our community to encourage collaboration and mutual support among developers as they advance in their learning journeys together. A hackathon is a great introduction to that collaborative process, but it‘s really just the beginning. Our ultimate goal is to help coders form lasting relationships with the people and technologies that will help them reach their potential—both in their careers and in working toward the social good."

Get Hacking on the JAMstack

Registration is now open for both the online and in-person freeCodeCamp JAMstack Hackathons. Interested developers can apply for their free tickets by submitting the GitHub repository and live URL of a basic JAMstack "Hello World" site built using the beginner-friendly guides provided by freeCodeCamp.

Don‘t sleep on your chance to accelerate your development skills and build something awesome alongside a vibrant, supportive community of fellow coders. See you on November 3-4 for an unforgettable weekend of learning, building, and celebrating the future of web development on the JAMstack!

Similar Posts