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:
CWFriends
/
CodeWithFriends
Learn new things! Make cool stuff! Have fun! Do all that, with an online community of friends.
Code with Friends
Learn new things! Make cool stuff! Have fun! Do all that, with an online community of friends.
Table of Contents
About The Project
This website is used to support seasonal coding events hosted by Mayuko. Through the website, users can view and participate in the latest seasonal coding event, read news updates, submit projects, and learn more about Code with Friends and its previous events.
Built With
- NuxtJS for static site generation
- Vuetify for the frontend framework
- Netlify for static hosting
- Netlify CMS for Content Management
- Firebase for authentication, serverless functions, media storage and databases
- Algolia for searching users for check-in groups
Getting Started
To get a local copy up and running follow these steps.
Installation
- Clone the repo with
git clone https://github.com/luisaugusto/CodeWithFriends.git - Make sure you have the latest version of Node installed…
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!
Top comments (2)
Great write-up Luis! Thanks SO much for building the CWF website -- it's a major upgrade from what I had last year when I tried wrangling Jekyll to convert my markdown to a github page. I definitely couldn't have done this without you!
Thanks Mayuko, glad to help!