Technical case study: Serverless progressive web app

Meet App

An event-finding app built entirely with test-driven development, connected to the Google Calendar API and featuring interactive data visualization.

Built with

  • React
  • AWS Lambda
  • Google Calendar API
  • OAuth2
  • Jest
  • Recharts
  • Service workers

At a glance

Project snapshot

90%+

test coverage

6

core features

PWA

passed Lighthouse audit

Serverless

AWS Lambda backend

Role

Full-stack developer (solo project)

Framework

React progressive web app

Backend

AWS Lambda with Google Calendar API

Program

CareerFoundry Full-Stack Web Development

Overview

About the app

Meet App helps users find upcoming events by city using the Google Calendar API, with a serverless AWS Lambda backend in place of a traditional server. It works offline as an installable progressive web app, visualizes event data with interactive charts, and was built test-first with 90%+ coverage.

See it in action

The app, screen by screen

The home page and city search, plus the Lighthouse audit, test coverage, and serverless function behind the app.

Use the arrows to browse, or click a screenshot to enlarge it

Core features

What the app does

Filter events by city

City search with autocomplete suggestions, showing all events by default.

Show and hide details

Accessible, collapsible event cards with smooth expand and collapse.

Set number of events

Choose how many events to show, with a default of 32 and input validation.

Offline access

A service worker serves cached data and handles offline searches gracefully.

Home screen install

A PWA manifest makes the app installable on desktop and mobile.

Data visualization

A scatter plot of events per city and a pie chart of genre popularity, built with Recharts.

Test-driven development

Tested at every level

Every feature followed the red, green, refactor cycle: failing tests written from user stories, just enough code to pass them, then refactoring while every test stayed green.

Unit testing

Jest tests for every React component and utility, covering props and state.

Integration testing

Component interaction, data flow, and Google Calendar API communication.

End-to-end testing

Automated acceptance tests covering complete user workflows.

In the code

How the core features work

Two snippets from the app’s source code: the serverless sign-in and the offline cache.

Choose a feature below to see its code

An AWS Lambda function creates the Google sign-in link, so no traditional server is needed.

// AWS Lambda function for Google Calendar API authorization
const { google } = require('googleapis');

exports.handler = async (event) => {
  const oAuth2Client = new google.auth.OAuth2(
    process.env.CLIENT_ID,
    process.env.CLIENT_SECRET,
    process.env.REDIRECT_URI
  );
  const authUrl = oAuth2Client.generateAuthUrl({
    access_type: 'offline',
    scope: ['https://www.googleapis.com/auth/calendar.readonly'],
  });
  return {
    statusCode: 200,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Credentials': true,
    },
    body: JSON.stringify({ authUrl: authUrl }),
  };
};

The results

What it demonstrates

Working test-first showed how much careful planning and requirement analysis pay off. It reduced debugging time and made refactoring low-risk.

  • Test-driven development: red, green, refactor with 90%+ coverage
  • Serverless and PWA: AWS Lambda, service workers, offline support, and installability
  • APIs and data visualization: Google Calendar with OAuth2, plus interactive Recharts

Need a custom web or mobile app?

Book a free 30-minute discovery call to talk through your idea.