Over the month of September, I volunteered to help build out a website for a seasonal event called Code With Friends. It's hosted by Mayuko, who is known for her online presence in networks such as YouTube and Twitch. Code With Friends is a month-long coding event where folks from all over the world work on their personal coding projects together in a non-competitive setting!

In this article, I am going to review some of the decisions I made while building the site. You can view the site at codewithfriends.io and the repo is open source:

Site Requirements

There were a few requirements I imposed on myself when building the website:

• Since this is a volunteer project for a non-profit, expenses should be at a minimum.
• I made the site open source so others could contribute in case I become no longer available, so I needed to make all the content and data easily editable
• The site had to be built in about 3 weeks, so I wanted to lean on a component framework to do all the heavy lifting of the development for me.

The Solutions

Each of these requirements led me to the main decisions of how I would build the site:

• I would host the site on Netlify as a static site for easy CI/CD and free hosting
• All of the content would be managed in markdown files to mitigate the need for a database and make contributions easier. I decided to use Netlify CMS since I already use Netlify for Hosting
• Since Vue is my expertise, I opted to use Nuxt as a static site generator and leverage Vuetify as the component framework.

Site Features

The website is being used for all of the signups and submissions of projects during the event, and to make it easier I wanted users to sign in with Github to submit their projects and information. Since I am using a static site, I went with Firebase to setup a serverless database with Firestore and run some functions that would enter signups in a spreadsheet for the staff to review the entries. The signup form also makes use of Algolia Search connected to Firestore to query users to add to a check-in group:

There is also a calendar of important dates for each event as well as a calendar for lab hours, which users can leverage to meet with guides who can help them with questions relating to their project. This was really easy to do with the Vuetify Calendar Component, and it's just pulling data from the markdown files.

Costs

So far, the only cost that has been accrued was $15 for adding a collaborator to a Netlify Team to transfer the site over, but it's just a one time payment since we won't be needing multiple collaborators after transfer completed. Netlify also has a build limit for 300 minutes per month which is pretty easy to stay under as long as we are mindful of our builds.

Firebase also has a very generous free tier that includes a good quota for many of their tools, and they include $300 of free credit for the first 3 months! The only quota I have hit so far was the reads, which is limited to 50k in the free tier. This is my first time using Firebase and I thought that was plenty. But on the day the site launched, we hit over 2.2 million!

This was due to me not optimizing reads well enough, and so I've been working the past few days to get this down by creating indexes and documents with grouped data, as well as switching to Algolia for user searching. Firebase doesn't support text queries, so it was incredibly wasteful to collect all users when doing a search. Since I've been optimizing, I've dropped the reads dramatically. Even if I can't get it down to 50k per day, an additional 100k reads per day is just 6¢. In total, I'm thinking Firebase will cost about $1.50 a month on a busy month and maybe even be free on an off season. I'll have to monitor it over the next few months to get a better idea.

Algolia is also free for the first 10,000 searches, and since I'm just using it on the signup form which can't be consistently accessed, I doubt we will hit that for a while.

Final Thoughts

While I have built many static sites in the past (including my own personal site), this has definitely been a huge learning experience for me with optimizing Firebase and getting every piece of the site to work together harmoniously.

Signups are open now and anyone is welcome to join! Thanks for reading and I would appreciate feedback!