Meet App
A serverless PWA using React and Google Calendar API with TDD.
Overview
Meet Up is a serverless, progressive web application (PWA) built with React that integrates with the Google Calendar API to fetch and display upcoming events. The application follows Test-Driven Development (TDD) practices and can be used offline, making it accessible anywhere, anytime.\ This project showcases advanced React development, serverless architecture using AWS Lambda, OAuth2 authentication flow, and PWA features including offline functionality and responsive design. The application demonstrates modern web development practices and cloud-based solutions.
Technologies
- AWS Lambda
- Calendar API
- Javascript
- React
Purpose & Objectives
This application was developed as part of the Full Stack Web Development course at CareerFoundry. Under the expert guidance of a Senior Developer Mentor for overall strategy and a dedicated Tutor for in-depth technical advice, the project was designed to encapsulate best practices and advanced methodologies in modern web development.
Key Features
- - OAuth-based Google Authentication for secure sign-in
- - Real-time tech event discovery and search by city
- - Advanced filtering by city and Technology
- - Live data fetching from the Google Calendar API
- - Interactive Recharts visualizations
- - Fully responsive design with performance optimizations
Architecture & Structure
- - React SPA: Component-based UI with hooks.
- - OAuth 2.0: Google auth flow and token handling.
- - Service layer: Google Calendar API wrapper with caching.
- - Charts: Recharts components for interactive visualizations.
- - Performance: Debounced inputs and minimized re-renders.
Technical Challenges
- - OAuth integration: Securely managing auth tokens and session state.
- - Rate limits: Caching and batching to respect API constraints.
- - Chart performance: Optimizing renders for large datasets.
- - Accessibility: Focus management and ARIA for interactive charts.
Accomplishments
Delivered a polished, production-ready React single-page application that leverages Recharts for rich data visualizations and the Google Calendar API with OAuth-based Google Authentication for secure user sign-in. It empowers tech enthusiasts explore upcoming events in any city-filtering by city and category. By fetching real-time calendar entries, the app renders interactive charts that surface event counts. With responsive design and performance tuning, Meet delivers a seamless, engaging experience on desktop and mobile alike.
Lessons Learned
I gained a comprehensive understanding of the multifaceted elements that form a complete applicationÔÇöfrom the foundational planning and design phases to the technical nuances of assembling each component. This project has significantly bolstered my confidence and competence as a Full Stack Developer.