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 authorizationconst { 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 }),
};
};
A service worker caches the app's core files so it keeps working without a connection.