My Cockroach Labs Interview App
- Next.js
- React
- three.js
- react-three-fiber
- React Query
- Tailwind
- NextAuth
- pg-promise
- CockroachDB
- PostgreSQL
Hello there! In November 2022 I started a new role at Cockroach Labs, and worked as a Technical Evangelist, and hereās a little more about the role and the app i made for my interview.
If youād like to skip ahead and see the app, thereās a preview link below. Oh and the repo is Open-source.
- š Live Preview
- āļø Repo
A Bit Of Background
Rewinding the clock slightly to 2005 when I was a Flash Developer and worked in Advertising, and back then we didnāt have teams to build websites, you just kind of did everything yourself. And this has stuck with me throughout my career. Jobs that have made me unhappy were the jobs that required me to only write code.
I Like Writing Code
And I do, but I also like doing other things. I like Design, I like Illustration, Branding, Animation, Motion Graphics, Art Direction and Copy Writing, and Content Creation (which normally requires I use all of the above).
In more recent years however Iāve been eager to dust off my Advertising skills. I did a little bit of this when I was at Gatsby, but working to a release cycle of every two weeks (because thatās how often the minor framework updates were published), I rarely had more than a few weeks to put something together. That wasnāt the reason I left though. I left because Iām looking to make a permanent move to the USA, and Gatsby as a fully remote company probably wouldnāt have been able to offer this. That said, they have just been acquired by Netlify so yāno š¤·āāļø. Although, Iād imagine providing US visa sponsorship to existing employees wouldnāt have been at the top of anyoneās to do list and could have delayed my plans to move. And who knowās if Iād have even made the cut and kept my job through the acquisition!
Anyway, best of luck to the team, youāre all the best! š
The Role at Cockroach Labs
When I first discussed the role at Cockroach Labs it became clear the timelines for launches were much, much longer. This, in part is due to the date based release schedule of CockroachDB, about 4 times a year, not ~24 times a year like Gatsby!
This sounded like the breathing space Iād been looking for. Not that I want to slow my pace down but because I want to ramp my production value up! I donāt wanna make shitty looking demo apps that look like theyāve been made by an Engineer, or create low-fi Tik-Tok style video content with the crazy-face YouTube thumbnails (š¤®). I canāt do it, I have a background in Advertising, delivery is everything!
What is Technical Evangelism?
Itās a hybrid role, and probably a temporary title until I prove my worth š°. Iām part of the Product Marketing Management (PMM) Team and am tasked with developing new āgo to marketā deliverables. To do this Iāll need to call on my whole skill set, this could be content creation, it could be demo apps, it might be motion graphics ā who knows! The first two projects Iām working on donāt even use the CockroachDB database, but promote the business benefits of CockroachDBās distributed capabilitiesā¦ how do you write code to demo that?
In and around the launches Iāll be creating what I hope will be creative and imaginative thought provoking projects. Iāll no longer be focussed on the āhowā a developer could do something, but āwhyā a business should do something.
No doubt Iāll still make demo applications, and āhow to do xā¦ā blog posts, I donāt want to stray too far from what I enjoying doing and more often than not, when Iām working through a project, lots of little āspin offā content ideas come to mind. I do enjoy the little things but what Iām really keen to explore is bigger projects that move the needle.
My Interview Demo Application
Part of the interview process required I create a demo app, and the instructions were to spend no more than 3 hours on it. I ignored this because you canāt produce a polished looking demo in 3 hours š.
I spent around 2 days (the weekend) designing and building this demo app which I called Edge. To be fair, I had most of the 3D Globe already, Iāve used it on my /dashboard, and a few other projects.
The tech stack for this app is as follows.
and of course,
or more specifically Cockroach Cloud because Iām using CockroachDB Serverless and the app is deployed using Vercel.
Thereās a few more dependencies which you can see in the package.json.
Lab Data
This is actually a problem that plagued me throughout my time at Gatsby. Whenever I needed to create a CMS Demo Iād have to spend time populating the CMS with dummy posts and images and spend time finding content so I could demonstrate how to query it and turn it into a page. This is still somewhat of a problem for creating demos using a Database, E.g. I need some data in order to query it.
So for Edge Iāve made something that technically falls under the category of āuser generated contentā. But instead of me or you creating ācontentā, all you have to do is click the āsubmitā button and the code does the rest. I presented the app at each stage of my interview process and asked my interviewers to submit their location while we were talking. ā I got the job, so Iām assuming they all liked what they saw.
How Edge Works
Clicking the āSubmitā button calls a Serverless Function, which grabs
the ip
address from the req
object. It then uses the ip
address to find the geographical location, looks this up
to get the latitude and longitude, and then POSTs the details to a CockroachDB database ready to be consumed by the app.
The locations arenāt overly accurate and probably wonāt be you exact location. I wasnāt sure where they were coming from so asked Vercel. Hereās their reply to my question.
My understanding of this is that we use MaxMind as a database to cross-reference the IP information and get a latitude/longitude for the request and then we output that. Maybe the best way to describe this is just an estimate of a userās location based off of IP information using geolocation services accessed via Vercel ā Vercel Sales Engineer
To give you some idea about how close the edge really is, when I submit, the function returns a location that is 28 miles up the road from me in a different town. So if you wanna anonymously submit your āedgeā I can start to get a picture of where in the world these edges are.
Why Edge?
Edges have been been a hot topic in the last few years and if youāve not heard the term before, hereās loosely what it means.
An edge is a geographical location of a server within a Content Delivery Network (CDN). A CDN is a network of computers, usually owned by someone like Google, Amazon, or a popular one in the world of Jamstack web development, Fastly. Hosting solutions like Vercel, Netlify, Gatsby Cloud (and many, more) use these CDNās to deploy a websiteās static assets, E.g images, HTML, and CSS, and the closer these assets are to you, the smaller the distance they have to travel down the phone line, and the faster a website will load.
Whilst this is great for static assets thereās a problem with JavaScript. Or more specifically, Serverless Functions. Serverless Functions in Jamstack web development are like special mini servers but because they are executable they canāt be deployed in the same way across the CDN. They can however be configured to run in different regions.
Serverless Functions differ to the traditional way āserversā work because Serverless Functions arenāt running all the time which can help significantly reduce operational costs. They can however, in some cases, cause problems with slower response times owning to cold starts and / or distances between the user and the region the function is deployed.
Serverless Functions can be used to make server-side requests to other services, services like a database to retrieve data to populate a website or application. For example, your Twitter timeline is made up of data that is stored in a database, not static assets distributed globally on a CDN.
Databases, typically canāt distribute data to hundreds or thousands of geographical locations because databases act like a single source of truth and duplicating or replicating this data across multiple geographical locations to be nearer to you is a very difficult thing to do.
Regions
However, CockroachDB is one of only a few databases that is making steps in the right direction and has developed smart technology that can manage replication of data and move it around different regions of the world, and thus closing the gap between you and the data.
The Edge app is as attempt to map where in the world these CDN edge locations are and, and at a later date I plan to surface more information for the locations of where Vercelās Edge functions can run. However, and Iāll quote Vercel verbatim:
Most Node.js APIs are not available ā Edge Functions Limitations
These limitation currently mean that you canāt use Vercel Edge Functions with most Databases, including CockroachDB.
There is one saving grace though.
Unlike other database solutions CockroachDB is ācloud nativeā which means it can be deployed to multiple cloud providers running in multiple regions. For example, with CockroachDB you could run your database on both Amazon Web Services (AWS) and Google Cloud Platform (GCP) and take advantage of each of their regions respectively. This can result in the faster transfer of data to users. You can see on the following links where the AWS and GCP regions are, and with CockroachDB, architects can configure their services to meet their customers where they are. If you were to deploy a server or Serverless Function to the same geographical locations (which would cost a lot) the end result would likely match, or be close to speeds commonly associated with Edge Functions.
All of this is an attempt to solve the difficult problem of: distance from data to you.
The shorter the distance, the faster the data is available and the better it will be for both users and businesses alike. This benefit scales up for giant companies like Twitter and NetFlix who are both CockroachDB customers!
Of course, speed isnāt the only concern. Data consistency is also a big issue, replicating data around multiple regions comes with a risk. For high paced changes like transferring money from one bank account to another can mean, for a short while the amount in one bank account might be different to the amount shown in another. CockroachDBās smart technology is solving this problem too! However, speed vs consistency are somewhat at odds with one another ā but thatās an explanation Iāll save for another time.
So, the next time youāre watching a junk reality TV show on NetFlix, or doom scrolling on Twitter, spare a thought for all those little Cockroaches transferring the data to you in the most efficient way possible!
Evidence
As you can see, explaining this using only the written word is quite difficult, and its my hope that by using a āshow, donāt tellā approach to storytelling weāll be better able to explain the complexities and business benefits to the technical, and the not-so technical in a more engaging, informative or imaginative way.
So cāmon, give that āsubmitā button a click and let me see your Edge.