Raquel M Smith

ZoneStamp

Screenshot of the Zonestamp homepage
  • css
  • javascript
  • reactjs

ZoneStamp is a simple web app that creates shareable links for online events in any timezone. I made it as a weekend project after identifying a problem at work – it was difficult for our international audience know what time our online events were happening in their timezone.

We looked for a simple solution to the problem – some sort of timezone converter that detected the user’s timezone and calculated the proper time based on a GMC timestamp – but found nothing. Each solution we found made you select certain time zones to display, was confusing, or simply didn’t work.

So, I set out to make the simple web app, and it’s been great! Every online event we have we use the app and get 100-200 visits per event. This may seem like a small number, but it’s rather incredible considering each online event is available only to site members (eg. the events aren’t public) and our audience is mostly US-based. In fact, the majority of the traffic actually comes from domestic viewers, which goes to show that even people with time difference of a few hours really appreciate the ease of clicking a link to see their local time.

See it live on zonestamp.com or browse the code on Github.

Fun features

Completely serverless

The site was created with create-react-app, which made it easy to bootstrap the project. It’s a single page application that renders data with Javascript (in the browser) based on the URL after the page loads, so it doesn’t require any work from the server for each page load.

React Router for the routing

Because it’s a single page application (SPA), something needs to tell the app what to render for each URL. For this, I used React Router. I did run into one snag when hosting the site, though. I decided to use Github Pages for the hosting, but GitHub Pages looks for files based on URL paths. However, since it’s a SPA, those files don’t actually exist – they’re generated based on what React Router tells it to render. I found a solution for this problem and wrote about it in my blog post How to deploy create-react-app to Github Pages.