Photo by Cookie the Pom on Unsplash

Serverless applications are a popular choice for developers because they allow you to build and deploy your applications without the need to manage infrastructure. In this article, we will discuss how to design serverless applications using next.js, Vercel, and Google Sheets.

Next.js is a popular framework for building server-rendered React applications. We choose next.js as It provides server-side rendering and incremental static site regeneration.

Vercel is a cloud platform and It integrates seamlessly with next.js, so we can easily build and deploy your next.js applications.

Google Sheets is a cloud-based spreadsheet tool that allows you to create, edit, and collaborate on spreadsheets in real time. It also provides APIs to programmatically access and modify the data. In this tutorial, we will be using Google sheets as our backend data store effectively making our application serverless as well as database less 😁

⭐ Requirements ⭐

Each year google cloud hosts a program, where for a period of 30 days they provide students from universities access to a lab environment called cloudskillboost and encourage students to complete the labs. In this tutorial, we will build kind of a SaaS application where different colleges can signup and create progress report dashboards for their institutions.

High-Level Requirements

1. Allow a new college to signup

2. Allow each institution to access the dashboard at unique URLs.

In this program, A facilitator is assigned to each institution who receives the daily progress report for that specific institution in a CSV file attachment, and attached data contains some PIIs like email addresses and others so they aren’t supposed to share the data directly to the program participants.

🏠 Backend Architecture Details

Each spreadsheet created on google sheets has a unique sheet identifier associated with it. For example, the spreadsheet ID in the URL https://docs.google.com/spreadsheets/d/abc1234567/edit#gid=0 is “abc1234567”. Our application uses this spreadsheet ID to read and write data from the google sheets API.

The Master sheet is owned by the application and it writes details about all the registered universities/colleges like sheet Id, Institution Name, and unique URL path.

The Institution sheets are owned by facilitators and it's their responsibility to daily update the spreadsheet data. The next.js server reads data from institution sheets and statically generates the dashboard.

For authentication and authorization with google APIs, we create a service account in the google cloud platform and request facilitators to grant viewer permissions on the institution sheets to that specific service account email id.

🚀 Frontend Architecture Details

The whole application is comprised of three main pages.

1. Homepage

This page is very simple, It just contains a link to the registration page and little info about the site.

2. Registration page

This page allows a facilitator to signup and creates a unique dashboard for their college.

3. Dashboard

This page shows a unique dashboard generated for each institution. Facilitators are required to daily update the latest data in the institution sheet. While generating this page, We internally call google sheet APIs and get the data from the sheet for the specified institution identified by the sheet Id. So it's very important for facilitators to update the data. We are planning to automate this step as well

🚤 Other consideration

The main goal while architecting the application was to load blazingly fast and make it low/no cost to host. We weighed the technologies and finally choose next.js as it provides serverside rendering and allows us to pre-render react components and ship the generated HTML instead of generating it on the client side. We also use a static site regeneration feature to invalidate the dashboard every two hours. At the end of every two hours when a new user visits our site a fresh page is generated and served to the client. We used Vercel as it nicely integrates with next.js and fully automates the deployment pipeline.

⚓ Thanks for reading, the full code is available here, PR and issues are always welcome.

⚓ Sample dashboard available here

Special Thanks to ChatGPT for the push.