How I leveraged JAMstack to cut down costs for a nonprofit

Hi dev.to!

Last year I was hired to build out a website for a nonprofit feminist collective. I chose GatsbyJS+Netlify to drastically cut down costs.

Tell me what you want, what you really really want 🎤

When dealing with nonprofits, costs are always something to consider for obvious reasons, money is hard to come by and a stream of cash is not always guaranteed.

For this website the girls required to do some blogging, event publishing with image galleries and most importantly, build a support network (in this case a directory) for women entrepreneurs to sign up and have their business listed on the platform. So we're talking hosting, CMS integration, forms, image+data storage and confirmation emails.

As developers we tend to get overly excited about trying and learning new things, and our clients aren't any different, they're always buzzing with ideas and opinions and a tight budget, here's where we need to meet halfway.

So, let's balance things out, as a developer, it's important for me to cut down on the time I spend coding the site to avoid increasing my prices hence making it less possible for a nonprofit to afford my services.

I can be your hero baby! — The JAMstack 😘

After sorting out the requirements, I started to make a list of the tools/frameworks/platforms available that overlapped with our goals.

✔️ GatsbyJS - static rendering. Just upload the files to a CDN service and you're good to go. Good for me since I already knew React and I would get to learn Graphql (I was super overdue on this one).
✔️ Netlify - free hosting and SSL. Yep, hosting has gotten so cheap in recent years, they don't ever bother on charging it anything anymore, they even get you a SSL certificate for free to use with your own domain. This bad boy will make you forget about DevOps while giving you a continuous deployment pipeline (you can test features on different branches before publishing). Messed up the build? No problem, Netlify keeps a history of every build and won't serve if it's broken.
✔️ Github - for the independent headless blogging who needs no database 💅. We just need to point Netlify to our Github repo and it will take care of the rest. We don't need to spend our precious $ on saving information to a database is meant to be public anyway.
✔️ NetlifyCMS - free headless CMS. There are plenty of tutorials and a Gatsby starter to get the ball rolling. Is simple and intuitive, but powerful at the same time, is built with React so I was able to create custom widgets and fields and make it super tailored the girls needs.
✔️ Firebase functions - confirmation emails. When a user registers their business they get a conformation email and once it's reviewed and accepted will get another one, to sort this out I used NodeJS with Nodemailer to deploy a couple of functions to Google Firebase. Inside those functions just setup a couple of triggers on Firestore's collections and voilà.

GatsbyJS beyond the Blog

I've been following Gatsby's roadmap for some time now, I try to attend every webinar to learn more about current and future updates, is actually really exciting how they plan to go beyond just static rendering. PS. I think I'm fangirling now 😅

In the JAMstack world is not all rainbows and butterflies, depending on the project there could be some constraints and it might not be a great fit, but is worth giving it a go when there's a match.

There ain't no such thing as a free lunch 😒

I also did some other API integrations that are not entirely free, such as Firestore, Firebase functions and Cloudinary, but their free plans are very generous, they will suffice for small websites such as this one. When choosing a third party API, be cautious, since sometimes can be tricky to estimate costs correctly.

Most people ignore the hidden costs of using website builders like WordPress, yes it's true you can get up and running with minimal investment, but they fail to account for maintenance costs such as upgrades, backups and general cleanup of plugins, broken links, etc.

These costs can be reflected in different ways, either the time it takes you to learn how to properly maintain it, hiring a developer do to it for you or ignoring it until something fails and emergency mesures need to be taken (when 💩 hits the fan 💸).

Party time! 🙌

In this case study for Chicas al Frente (Girls in Front), we saved a significant amount of money in hosting and maintenance costs without sacrificing quality, in the contrary, they get to enjoy the benefits of static sites and GatsbyJS in particular (like PWA), such as better performance and security; plus Netlify's CDN delivery, hosting, security and CMS.

As a developer working with this stack for the first time, I have to say it was a very pleasant experience, you do have to get around some limitations but that is expected. Not having to worry about dealing with recurrent software upgrades and security patches, is also very nice 🎉