A new page

I launched a new page here to log my 2021 Surf Sessions! It's been a while since I've built something "purely" for fun and this was a pretty quick little project that scratched that itch. It will be interesting to see what the data looks like at the end of the year.

The idea is simple when I go to the beach I usually get out of the car to check the waves at which point I'll take a quick picture. Once out of the water I just log some details about the session and upload the picture on Airtable. With more data I plan on adding some data visualizations. It will be cool to reflect on a year in the water. At the time of writing this I've already been in the water for 18 days!

A bit of backstory here

You may not think of New York as a big surf town, but there are actually quite a few surfers here. Growing up my mom was a teacher so we spent lots of weekends at my grandparents shore house in Allenhurst, NJ. Naturally I spent tons of time boogie boarding and surfing. As I got older I spent less and less time at the beach. I kind of forgot how much I enjoy the ocean.

Until 2020 I had not been surfing for years. I always wanted to go on a surf trip though. Luckily for me In Jan 2020 (right before the pandemic) my fiancé Molly and I finally took a dream surf trip to a surf camp in Costa Rica. It turned out that Costa Rica was an amazing place to learn to surf and we had great instructors at our surf camp Shaka.

Over the course of the week I went from riding white water to being able to get up and ride some green waves. I became totally hooked on surfing and wanted to do it back in NYC. After a few trips to Rockaway Beach, I finally bought myself a 7’6” Lib Tech surfboard which luckily fit in my car. I've been having a lot of fun ever since!

How it works

After running many monolithic Node/React websites. I am especially interested in more lightweight "serverless" sites that render instantly don't have traditional databases and can be updated instantly! It's just HTML/JS basically. This site is an example of that and it works quite well.

For the backend:

All of the data for the log is stored in Airtable and I use a read only API Key to fetch it. I built a small proxy service which caches the data on S3 using a serverless cloud function hosted on Vercel. Airtable has a limited number of api requests you can make so I believe some kind of cache would be needed before writing this blog.

I love the simplicity of Vercel / Next.js. The function deploys almost instantly with very little overhead. Not to mention it's free!

export default async (req, res) => {
  const {
    query: { key, table },
  } = req

  if (!key || !table) {
    res.statusCode = 500
    return res.json({ msg: "bad-request" })
  }

  const fileKey = buildFileKey(key, table)
  const isCached = await s3Client.get(fileKey)

  if (isCached) {
    res.statusCode = 200
    return res.json(cachedFile)
  }

  const data = await airtableClient.fetch(table, key)

  await s3Client.put(fileKey, data)
  res.statusCode = 200
  return res.json(data)
}

For the frontend:

This site is built using Gatsby.js and deployed on Github Pages. Traditionally I use Next.js for everything but I wanted to try out something else. While most of the site is written in markdown it's easy to create a page that is pure React. I just added a folder surf-sessions and an index.tsx page and it's up.

I am using the newly launched github actions which deploys the page in a matter of minutes.

Overall this is a really lightweight setup that I am really liking.