DEV Community

loading...

How freeCodeCamp.org uses the JAMstack + a single API server to help millions of people learn to code every month

Quincy Larson
Teacher at freeCodeCamp.org
Originally published at test.com Updated on ・3 min read

freeCodeCamp's JAMstack architecture

Hey dev.to peeps - long-time lurker, first-time poster.

freeCodeCamp.org is now helping millions of people learn to code every month, and we're doing this using a single API server.

The rest of the platform is handled by CDNs and other glorious services.

This is a new architecture called the JAMstack, which stands for JavaScript, APIs, Markup.

Here's a screenshot from our NGINX as I write this:

Despite the 1,368 people concurrently using freeCodeCamp.org, our Node.js / Loopback server is barely even breaking a sweat.

freeCodeCamp.org is a tiny nonprofit with an even tinier budget, so we want to maximize the price-performance of our infrastructure.

We're mainly serving static pages. Even our coding challenges - for all their interactivity - run completely client-side and don't require server calls. So the JAMstack makes great sense for us.

It may make sense for your organization, too.

So allow me to walk you through how our stack works, step-by-step.

freeCodeCamp.org's JAMstack Architecture

freeCodeCamp's JAMstack architecture

Step #1: An open source contributor opens a pull request, changing one of freeCodeCamp.org's 6,000+ interactive coding challenges and reference articles - all of which are stored as easy-to-edit markdown files.

Step #2: Our continuous integration tool confirms that the build passes and Git confirms there aren't any merge conflicts.

Step #3: An open source maintainer QA's and merges the pull request on GitHub.

Step #4: Gatsby - a static site builder - turns these 6,000+ markdown files into a single-page React app.

Step #5: Netlify pushes the newly-built app to their CDN endpoints in data centers around the world.

Step #6: A person who wants to practice their coding visits https://www.freecodecamp.org.

Step #7: Their browser pulls down the files from the nearest Netlify CDN endpoint and renders the Gatsby app.

Step #8: Auth0 checks to see whether they are logged into freeCodeCamp.org. If they are, it gives them read-write access to our public API - a Node.js / Loopback server.

Step #9: The API server then reads and writes data from our MongoDB cluster hosted on mLab.

Step #10: The browser can now fetch the user's complete freeCodeCamp profile and progress. When they complete a coding challenge, their browser can write data back to their profile.

So why the JAMstack?

The JAMstack has several benefits that lured us away from the more traditional webserver-centric architectures.

Benefit #1: The JAMstack is super cheap.

We're a tiny nonprofit. We want to put as much of our scarce funds as possible toward helping people learn to code - not toward paying for unnecessary servers and bandwidth.

Our infrastructure costs have fallen dramatically since we started moving services to the JAMstack.

Benefit #2: It's simpler.

There's something to be said for the sanity you get when your stack is simple and has so few moving parts. That's fewer things that can break in the middle of the night.

Benefit #3: It's more secure and more reliable.

We're now rely on a basket of specialized APIs that do their one thing right. That means there are fewer things that we ourselves can screw up.

The Auth0 team spends a lot of time thinking about how to make authentication more secure. Algolia spends a lot of time thinking about how to protect against malicious queries.

We can focus on securing our single API instead of miring ourselves in all the additional security considerations that affect webserver-centric apps.

But why the JAMstack?

You serious? I just told you that a moment ago.

Sorry - that was a Zoolander reference. I couldn't resist.

I gave a talk about the JAMstack a few weeks ago. In the talk I cover the various stacks we used leading up to embracing the JAMstack. I also share our ambitions for how to achieve even more scale and price-performance in 2019.

The more you know

The more you know meme

freeCodeCamp.org is a tiny non-profit that's helping millions of people around the world learn to code for free. So far 10,000's of people from our community have gotten their first developer job.

Happy coding.

Discussion (44)

Collapse
annarankin profile image
Anna Rankin

This is great! I've been hearing "JAMstack" for a while now, but never really dove into what a real-world app would be comprised of. Thank you for your walkthrough of how your application works - I love that it gives you the freedom to focus on what your application does, rather than on common solved problems. 💯

Collapse
itsjzt profile image
Saurabh Sharma

Same with me 😁

Collapse
aspittel profile image
Ali Spittel

Love this -- I always recommend JAMstack for blogs -- so much more expensive and more work to host a WordPress site!

Collapse
ben profile image
Ben Halpern

Not to mention performance and complexity issues.

There are still plenty of valid use cases for Wordpress, but I don't think I've personally ever recommended it for anything. 😄

dev.to isn't literally JAMstack, but we use a lot of the same principles.

Collapse
mrahmadawais profile image
Ahmad Awais ⚡️

I love both #JAMstack and #WordPress :)

Collapse
tvanantwerp profile image
Tom VanAntwerp

6,000+ pages sounds like it would be a pain to rebuild with each change. I've considered something like Gatsby for a large site I manage with mostly static content, but we've got 9,000+ posts and I'm concerned about the build times whenever someone realizes they made a small typo.

Is Gatsby smart enough to only build what changed, or does it build everything every time? And how long does that take?

Collapse
ossia profile image
Quincy Larson Author

Gatsby is pretty smart. Building has been slow in the past, but it's steadily getting faster.

Collapse
dustinmatlock profile image
Dustin Matlock

Smashing Magazine switched from WordPress to a JAMstack: netlify.com/case-studies/smashing/

Collapse
tonyalaribe profile image
Anthony Alaribe

Try Hugo. Your 9000 page site will take a second to build. Most likely less.

Collapse
mrahmadawais profile image
Ahmad Awais ⚡️

You can both cache the build inside of Gatsby and on Netlify. :)

Collapse
ben profile image
Ben Halpern

I have no idea, but it really should be smart enough to build what’s changed. Seems like fairly straightforward diffing.

Collapse
jel111 profile image
dumdumdev

This is more of a question than a statement. I thought that was what a React app was good at. Only building what had changed.

Collapse
meloncatty profile image
Krista Handel

Congrats on your first post! This was a great read.
FCC is where I learned that I had a passion for coding and JavaScript even through my struggles. While I did end up going to a coding school FCC helped boost me in the right direction!

Collapse
angelarae63 profile image
Angela Whisnant

I love it,too. It's been so helpful to be able to practice and reinforce everything I've learned in the classroom.

Collapse
dbelyaeff profile image
Dmitriy Belyaev

Thanks, Quincy!

The information is very valuable.

Collapse
aaronholla profile image
Aaron Holland

This is awesome, I love freeCodeCamp.org! Thank you for sharing how you use the JAMstack.

Just curious what is it you use for monitoring?Those metric charts are beautiful.

Collapse
ossia profile image
Quincy Larson Author

The first chart is from NGINX's Amplify platform and the second one is from Azure, where our API server is hosted.

Collapse
jmkimani profile image
Kimani Maina

I was about to ask where your "public API - a Node.js / Loopback server" is hosted. Then I read this reply.

Collapse
aaronholla profile image
Aaron Holland

Thank you!

Collapse
andy profile image
Andy Zhao (he/him)

Love that you put the cost as the first benefit of JAMstack. I'm sure it applies for smaller apps/side projects, too.

Did you find infrastructure costs prohibitive when you first started freeCodeCamp?

Collapse
ossia profile image
Quincy Larson Author

Considering freeCodeCamp.org initially had no budget, yes - hosting a MongoDB cluster and a bunch of web servers was prohibitive. I spent $100,000 of my savings the first few years keeping freeCodeCamp.org going. We are break even now. We probably could have gotten there a bit earlier if we'd embraced the JAMstack sooner.

Collapse
hashimwarren profile image
Hashim Warren

thank you for how much personal investment you've put into helping people all around the world

Thread Thread
angelarae63 profile image
Angela Whisnant

Ditto!

Collapse
subatuba21 profile image
subatuba21

That's really impressive!

Collapse
mrahmadawais profile image
Ahmad Awais ⚡️

JAMStack is amazing. Quincy, I have almost the same setup for my course VSCode.pro it's Gatsby on top of #JAMstack and WordPress — with an API Kubernetes Cluster thanks to Go-lang.

Collapse
hashimwarren profile image
Hashim Warren

do you have a post about that?

Collapse
mrahmadawais profile image
Ahmad Awais ⚡️

Sadly no. Will write about it. So much to do.

Collapse
mattstuddert profile image
Matt Studdert

Cheers for the write-up Quincy!

Also, watched your JAMstack Conf talk over lunch yesterday. It was really insightful, thanks! Love all of the consideration you're giving to working in low/no connectivity areas.

Collapse
maestromac profile image
Mac Siri

Hey Quincy! Was it difficult to transition to JAMstack? and was there a feature you had to give up or heavily modified?

Collapse
ossia profile image
Quincy Larson Author

It was a big endeavor and we're still in the process of transitioning some services.

The main challenge is rethinking different aspects of your application to use the JAMstack properly. There are some tradeoffs, though I think they're worth it.

Collapse
anishkny profile image
Anish Karandikar

Super awesome lean architecture! Have you considered going serverless (using say AWS Lambda, GCP Cloud Functions, Azure Functions etc) for your backend API instead of a constantly running Node.js server. It feels like the next logical evolution...

Collapse
nsebhastian profile image
Nathan Sebhastian • Edited

Wow even FCC use gatsby 👏👏 btw Quincy, do you use the offline plugin? Last time I have some trouble with gatsby offline plugin, in which the old data will be loaded first before the new one, requiring users to refresh the page at least once before receiving update.

Thanks for the post as well 🙂

Collapse
jel111 profile image
dumdumdev • Edited

I just want to personally thank you for FCC and all the work you have put in it for people like me. I have learned a ton. Thank You!
I have gone through the Front End Dev section and need to just build the Tech Doc page to finish. Looking forward to that.
(The site works very well for me it isn’t slow at all.)

Collapse
danielo515 profile image
Daniel Rodríguez Rivero

Thanks for sharing your experience. However, it's somewhat curious to see how something I have been using for years has now a name and it's presented as new and shyny.

Again, thanks for demonstrating that even a very interactive site can be built with this kind of stack, which could encourage some simpler sites go even more JAM

Collapse
stefandorresteijn profile image
Stefan Dorresteijn

Incredibly interesting article, thanks so much for writing it!

I've never really thought of JAMstack as something that would be useful but your piece does show how many real-life applications it truly has. Might just try it out for a couple of my smaller projects. Thanks again!

Collapse
alanmbarr profile image
Alan Barr

Thanks for sharing this Quincy and thanks for your dedication to education!

Collapse
ravavyr profile image
Ravavyr

Great write up and breakdown. Also freecodecamp is pretty awesome, I just started playing with it to refresh some of my knowhow. The static deployment is really smart, not sure about the one-server for the api though, isn't that a DDOS weakness or is it set to scale on Azure? [also figure azure probably has DDOS protection on it]

Collapse
zubairanwarkhan profile image
Zubair Khan

Thanks for the great insight. I have bookmarked this.

Collapse
cosminpopescu14 profile image
Cosmin Popescu

Nice article !
:)
Keep up !
😀

Collapse
marcelocg profile image
Marcelo Gonçalves

Have you looked into Netlify Functions feature? That could be a good fit for the API/backend in a serverless way. By the way, thanks for the post and for the great work on FCC!

Collapse
javierpomachagua profile image
Javier Pomachagua

Hi!
How about deployed a Nuxt as Jamstack with Strapi as CMS and MongoDB Atlas.
I dont know how cheap is to host in heroku strapi cms and mongodbatlas the database for a blog.

Collapse
yshaik91 profile image
Yusuf Shaikh

I love freecodecamp

Collapse
kpennell profile image
Kyle

Hey Quincy - I really enjoyed your presentation on using the JAMstack. You seem like a humble, friendly guy.

Collapse
maxikius profile image
Max Ikäheimo

An amazing post from a while back, great stuff.

We also wrote a beginners guide for Jamstack - in case you want to learn more about Jamstack in 2020: ikius.com/jamstack-ebook