Gatsby FuncJam 21
- Theme UI
- Gatsby Serverless Functions
- Google Analytics
Groovy Analytics, It's gonna be something to do with Google Analytics
Here we go again 🕺
In 2019/2020 I blogged every day for 100 days totaling 27,341 words and you can read them all in this post: 100 Days Of Gatsby, but if you don't have a million hours to spare Gatsby asked me to write a round-up post which can be seen on the Gatsby blog: Challenge Accepted: One Developer, 10 Projects, 100 Days of Gatsby
...and joy of joys I won!
Here's the official announcement: Presenting the 2020 Silly Site Challenge Winners!
Gatsby again asked if i'd do a little write up, so here ya go: Bottoms Up: Gatsby File System Route API + Bums = BumHub
And as of about 8pm last night (my time) Gatsby announced #FuncJam
... which may or may not be a name I came up with 😏
... but either way. I'm doing it, and not for the super duper prizes but because I love it.
As before with Silly Site Challenge I plan to update this blog post as and when I make significant progress.
Last night and on my lunch break today I've whipped up a new Gatsby site and hosted in on Gatsby Cloud. For now all the site does is display a 3D Globe which I created using React Three Fibre, you can read about how I did that in this post published by Smashing Magazine: Gatsby Serverless Functions And The International Space Station
The idea I have at the moment will be to use both the static and the dynamic offerings from Gatsby.
The Google Analytics API is rate limited and whilst I could hit the endpoint and request all
pageViews for the Groovy
Analytics site and plot the lat/lng locations on the 3D Globe using Gatsby Serverless Functions, I fear that the rate
limits will soon cap out and the request would fail. Instead, I'll be using the power of Gatsby to hit the Google
Analytics API at build time... It's kinda weird to request data at build time and pump it into a 3D globe because part
of the reason static data is so cool is because it's baked right into the page, meaning your site is blazing fast, SEO
geographical locations on a three.js globe... but, Gatsby if nothing else is totally flexible so why not eh?!
There's a problem though.... This is FuncJam and sourcing data at build time using
gatsby-node isn't making use of
Gatsby Serverless Functions.
To take advantage of Gatsby Serverless Functions I plan to add a number of other features that won't succumb to rate limiting. These features may include the following:
- Posting reactions to a backend like Fauna
- Adding Authentication using Auth0 to authenticate users
- Allowing authenticated users to leave comments on the site
- Hitting my own abstracted API: paulieapi to display real time Twitter or GitHub information on the site (that API is also built using Gatsby Serverless Functions and hosted on Gatsby Cloud FYI)
- A Newsletter sign up form (gotta have a form in there somewhere right!)
... or maybe all of the above.
I'll see how much time I have after working my day job building complex / boring React Applications that no one cares about.
Stay tuned for more updates on this post or follow me on Twitter: @PaulieScanlon
Last night I added a GitHub action that will rebuild the site every hour: You can see the
This takes care of the static data becoming stale and should mean I never cap out the Google Analytics usage quota. The
GitHub actions is scheduled to run every hour and calls the Gatsby Cloud build webhook which in turn rebuilds and
deploys the site.
I then tackled the design. This is always my least favorite part of any side project. I've got something that i'm pretty happy with. It's kinda 70s themed and I spent quite a lot of time searching for era correct 70s phrases for the copy.
The design includes sections for statistics and I'll calculate these using the Google Analytics API, I'll be crunching
the numbers to surface which city, country, continent, browser, device and operating system have produced the most
There's also a comment form that requires Twitter sign in with Auth0, a reactions section for folks that don't want to "sign in" or don't have Twitter but would still like to interact with the site and a Newsletter sign up. The Newsletter sign up will be the same as my my and all submissions go to Queen Raae's Gatsby newsletter.
I asked last night for folks to visit the site and Gatsby gave me a retweet -- lovely stuff
This now means I have enough data to start developing the 3D globe and I think i'm going to add some kind of search functionality so it's easier to see where on the globe individual locations are, kinda like how you'd filter table data but in the context of the 3D globe.
Here's a little teaser of where i'm at with the design. I still need to work out what the 3D globe will look like but i'll trust the process and no doubt continue to tinker in between feature development.
Last night over some pints and then today after brunch I added Auth0 to the site. I'm using the Auth0 React package which is absolutely brills. It's here if you fancy giving it a try: @auth0/auth0-react
I'm using Auth0's Social Connections so that the only way to sign up/in is to connect via a users Twitter account. This way I don't need to worry about "confirmation email" or "forgot password" user flows.
If a user is authenticated i'm enabling a comment section, comments are tricky because you might not want anonymous users commenting but I figure if their name is attached to the comment they might think twice before posting profanities or generally being a tinker. -- but we shall see.
user details and a
date are posted to the first of many Gatsby Serverless Functions in this
site. You can see the
src for the
add-comment function here:
This function is extra secure too because I send an access token collected from Auth0 using the
hook on the client and verify it using express-jwt on the server before
posting to my Fauna database.
I've also prepared for Tonight's Nattermob stream where I'll talk Benedicte through how to fetch these comments and display them on a comments page. We'll also be discussing ways in which Gatsby Serverless Functions can be polled so updates to data can been seen without users needing to refresh the page.
Here's tonights stream... see you there!
This weekend I set about completing all features and it all went pretty smoothly.
After Friday nights stream i'd captured one or two comments which meant I could now work on the Function and UI that displays them on the site. Requesting the comments from Fauna doesn't require user authentication unlike posting a comment which does and was the more complicated part of this feature.
Rendering the comments was no problem, Theme UI comes with a
<Card /> so I styled it up and wallop job done.
Next up was Reactions. This was a two part feature. First I needed create the Function that posts a reaction object to
Fauna, the payload is a reaction
name and a
date. The date is created on the client so it's accurate to timezone of
where the user was at the time they posted it, i'm not sure i'll do anything with the timestamp now but it might have
made for an interesting data viz piece to show reactions over time.
Once I could post reactions I could then set about retrieving them. Same kind of approach as used to get all the
comments but with reactions i needed to use
Array.reduce on the server and sum up each reaction by name so I can
display the count in the UI. The Reactions component, self updates and by this I mean once a reaction has been sent
successfully i'm using a
useEffect that fires when the post response resolves. The
useEffect then calls a get all
reactions function which returns the summed up reactions from Fauna/the server
Strictly speaking this isn't a Gatsby Function feature but, i've added a few more Google Analytics queries to the build
step and i pass them into Gatsby Data layer so I can display stats about which city, country and continent along with
some details about which technology is used by visitors to the site. These are shown in the UI using another Theme UI
<Card /> component and a clear heading.
Lastly I updated the README with documentation about how each function works and linked to all the #GatsbySummerFunctions streams where we'd previously built each of the features in Groovy Analytics site.
I'm now pretty happy with it and in total spent 26 hours designing and developing. I had originally set out to do this in 24 hours but ran a little over.
That's it, all done!
How am I doing?
Hey! Lemme know if you found this helpful by leaving a reaction.