Building a Photo Story Web App with React, Next.js, and Supabase

Create a mapping web application with React, Clerk, Vercel and Supabase

Amsterdam is a city that has existed for over 750 years. Throughout its history, people have made a significant number of paintings, photos and sketches. Many of them have been digitized and stored in the Beeldbank Amsterdam.

One of the things I like to do every now and then is to find a beautiful photo from 120 years ago and locate the spot where the photographer stood using Google StreetView, to see if there are any recognizable features remaining. The location is an approximation of course, but it is interesting to see the similarities.

For example, on the left is a photo from Stadsarchief by Jacob Olie, taken in 1892 of a building on the Prinsengracht. On the right, almost the same location in 2019 on Google Streetview:

Side by side comparison of a Prinsengracht location

One of the skinnier buildings was demolished to make room for the building on the corner to expand.

I used to save these discoveries in various text files. To improve this process and gain experience with React, I decided to create a small web app with a more user-friendly interface than plain text files:

Screenshot of the app showing photo markers

Both the pages and the API are written using NextJs and hosted on Vercel. There is no server-side rendering. The architecture follows a standard front-end to API pattern:

  • Front end makes requests to the backend to GET, PUT, POST or DELETE photos
  • Uploaded photos are resized to an optimal size (to stay within the free tier of Vercel)
  • A thumbnail is created for each new photo
  • Photos are stored in Supabase’s storage
  • Metadata (such as location information, title, description, etc.) are stored in Supabase’s database

It is still a work in progress, but the latest development deployment can be found here

Logo

Let's Connect!

Curious what I can do for your business? Reach out and let's discuss how I can help you achieve your goals.

Send me an email or find me on LinkedIn.