Meet App Case Study

A comprehensive serverless Progressive Web Application showcasing Test-Driven Development, Google Calendar API integration, AWS Lambda functions, and advanced data visualization capabilities.

                                Role
                                Full-Stack Developer & Technical Lead
                            

                                Focus
                                PWA with Serverless Architecture
                            

                                Technologies
                                React, AWS Lambda, TDD, PWA Features
                            

≥90%

Test Coverage

PWA

Lighthouse Certified

TDD

Development Methodology

AWS

Serverless Infrastructure

Executive Summary

The Challenge: How can developers create scalable, maintainable web applications that work seamlessly offline while providing real-time data visualization and maintaining the highest code quality standards?

As part of Achievement 4 in the CareerFoundry Web Development program, I developed a comprehensive Progressive Web Application using Test-Driven Development methodology. This project demonstrates expertise in modern web development practices including serverless architecture, PWA implementation, Google Calendar API integration, and advanced data visualization techniques.

Key Success Metrics

Delivered a fully functional PWA with ≥90% test coverage, complete offline functionality, serverless backend infrastructure, and comprehensive data visualization. The project showcases industry-standard development practices including TDD methodology and CI/CD implementation.

Problem Statement & Technical Goals

Scalable Architecture Challenge

Modern web applications require serverless infrastructure that scales automatically without backend maintenance while providing consistent performance and availability.

Code Quality Assurance

Development teams need comprehensive testing strategies that ensure high-quality code through Test-Driven Development practices and automated testing coverage.

Progressive Web App Requirements

Users expect modern web applications to provide native app experiences including offline functionality, installability, and cross-platform compatibility.

Technical Requirements & Implementation

React Frontend Framework

Test-Driven Development (TDD)

Google Calendar API & OAuth2

AWS Lambda Serverless Functions

Progressive Web App Features

Service Worker Implementation

Data Visualization (Charts)

Performance Monitoring

Test-Driven Development Methodology

The entire application was built using Test-Driven Development practices, ensuring high code quality and comprehensive test coverage from the beginning of the development process.

Red: Write Failing Tests

Create comprehensive test scenarios based on user stories and feature requirements before implementing any functionality.

Green: Implement Features

Write minimal code necessary to make tests pass, focusing on functionality over optimization in initial implementation.

Refactor: Optimize Code

Improve code structure, performance, and maintainability while ensuring all tests continue to pass throughout refactoring.

TDD Implementation Benefits

Following TDD methodology resulted in ≥90% test coverage, reduced debugging time during development, and provided confidence in code reliability during refactoring phases. This approach demonstrates professional development practices essential for collaborative team environments.

Core Feature Implementation

The Meet App implements six core features, each developed using comprehensive test scenarios and professional development practices.

Feature 1: Filter Events by City

Implementation: Dynamic city search with autocomplete suggestions, default display of all events, and smooth filtering transitions.

Test Scenarios: Default state behavior, suggestion list functionality, and city selection handling.

Feature 2: Show/Hide Event Details

Implementation: Collapsible event cards with smooth animations, detailed event information, and accessibility-compliant expand/collapse functionality.

Test Scenarios: Default collapsed state, expansion behavior, and detail hiding functionality.

Feature 3: Specify Number of Events

Implementation: Configurable event display count with default of 32 events, user input validation, and dynamic list updates.

Test Scenarios: Default count behavior and user-specified number handling.

Feature 4: Offline Functionality

Implementation: Service worker integration, cached data display, and graceful error handling for offline search attempts.

Test Scenarios: Cached data access and offline search error handling.

Feature 5: Home Screen Installation

Implementation: PWA manifest configuration, installation prompts, and cross-platform home screen integration.

Test Scenarios: App installation capability and home screen shortcut functionality.

Feature 6: Data Visualization

Implementation: Interactive scatter plot showing events per city and pie chart displaying event genre popularity with responsive design.

Test Scenarios: Chart rendering accuracy and data visualization correctness.

Serverless Architecture & Implementation

AWS Lambda Functions

// 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,
    }),
  };
};
                        

Service Worker Implementation

// Service Worker for offline functionality
const CACHE_NAME = 'meet-app-v1';
const urlsToCache = [
  '/',
  '/static/js/bundle.js',
  '/static/css/main.css',
  '/manifest.json'
];

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        return response || fetch(event.request);
      })
  );
});
                        

Meet App main interface showing event filtering and detailed event views

Home landing page displaying all events with filtering capabilities

Meet App city search functionality and interactive data visualization charts

City search functionality with autocomplete suggestions

Application Features & User Experience

🔍

Smart City Search

Intelligent autocomplete search with Google Calendar API integration, providing real-time city suggestions and seamless event filtering.

📋

Dynamic Event Display

Configurable event listing with expandable details, responsive design, and smooth animations for optimal user experience.

📊

Data Visualization

Interactive scatter plots and pie charts providing insights into event distribution and genre popularity with responsive design.

🌐

Offline Capability

Complete offline functionality with service worker implementation, cached data access, and graceful error handling.

📱

PWA Features

Full Progressive Web App capabilities including home screen installation, push notifications, and native app experience.

☁️

Serverless Backend

AWS Lambda functions providing scalable, cost-effective backend services with automatic scaling and high availability.

Comprehensive Testing Strategy

Unit Testing

Implementation: Jest-based component testing with mock data, covering all React components and utility functions.

Coverage: Individual component behavior, prop handling, and state management validation.

Integration Testing

Implementation: API integration testing with real Google Calendar data and serverless function validation.

Coverage: Component interaction, data flow, and API communication testing.

End-to-End Testing

Implementation: Automated user acceptance testing covering complete user workflows and feature scenarios.

Coverage: Full application functionality and user experience validation.

Testing Achievement

Achieved ≥90% test coverage through comprehensive testing strategy, demonstrating professional development practices essential for maintaining code quality in production environments. The testing approach ensures reliability and facilitates confident refactoring and feature additions.

Professional Development & Technical Mastery

This project provided comprehensive exposure to modern web development practices, demonstrating proficiency in cutting-edge technologies and methodologies valued in professional development environments.

Key Technical Skills Demonstrated

Test-Driven Development: Complete TDD cycle implementation with comprehensive test scenarios and high coverage standards
Serverless Architecture: AWS Lambda function development, deployment, and management for scalable backend services
Progressive Web Apps: Service worker implementation, offline functionality, and PWA certification standards
API Integration: Google Calendar API with OAuth2 authentication and secure data handling
Data Visualization: Interactive chart implementation with responsive design and user interaction
Performance Monitoring: APM tool integration for continuous application performance tracking

Most Valuable Learning Experience

Implementing TDD methodology throughout the entire development process revealed the importance of comprehensive planning and requirement analysis before code implementation. This approach significantly reduced debugging time and provided confidence in code reliability, directly translating to professional development practices valued in collaborative team environments.

Test-Driven Development implementation showing test coverage reports and testing framework setup

TDD Implementation with Jest testing framework and comprehensive test coverage

Progressive Web App Lighthouse audit results showing PWA certification scores

PWA Lighthouse audit results demonstrating certification standards

AWS Lambda function deployment dashboard showing serverless infrastructure setup

AWS Lambda function deployment dashboard for serverless backend services

Technical Achievements & Success Metrics

≥90%

Test Coverage Achieved

PWA

Lighthouse Certified

TDD

Methodology Mastered

Serverless

Architecture Implemented

The Meet App demonstrates comprehensive modern web development expertise, from Test-Driven Development methodology through serverless architecture implementation, while maintaining industry-standard code quality and performance benchmarks essential for production applications.

Experience the Progressive Web Application

Explore comprehensive TDD implementation, serverless architecture, and advanced data visualization

Live PWA Demo GitHub Repository Back to Case Studies

Technical Specifications Summary

Frontend: React with PWA Features

Backend: AWS Lambda Serverless Functions

API: Google Calendar with OAuth2 Authentication

Testing: TDD with ≥90% Coverage (Jest, Enzyme)

Visualization: Recharts for Data Analytics