CASE STUDY: MEET APP

Link to the website

See project on GitHub

Overview

MeetApp is a serverless, progressive web application (PWA) with React built using a test-driven development (TDD) technique. The application uses the Google Calendar API to fetch upcoming events with the following key features: The user is able to filter events by city, show/hide event details, specify number of events, use the app when offline, add an app shortcut to the home screen.

Purpose&Context

MeetApp is a personal project developed during my web development course at CareerFoundry, showcasing my expertise in writing User Stories and Scenarios, app development with React and TDD methodology as well as my ability to design and implement a functional PWA from concept to deployment.

Objective

The objective of the Meet app is to provide users with an efficient and seamless platform for managing and visualizing events, integrating advanced features such as serverless architecture, offline functionality, and real-time performance monitoring using TDD methodology and OOP features. Image for Meet App

Duration:

I started the Backend part of the project in July’24 with my first commit and the official work on the project ended in August’24.

Tools, Skills, Methodologies

Backend Techstack:

  • Node.js as Backend framework
  • Google Calendar API integrates external services for scheduling and calendar-related functionality;
  • Serverless is used for backend logic related to AWS;
  • AWS Lambda is used for backend hosting.

    • Frontend Project Techstack:
  • React for building the UI;
  • Atatus-spa is used as a good monitoring tool for frontend performance;
  • Jest: A testing framework suitable for unit tests;
  • Puppeteer: For end-to-end testing of the UI;
  • Jest-Cucumber: A combination of Jest and Gherkins for BDD;
  • Gherkins (for BDD) for writing Behavior-Driven Development (BDD) scenarios, often paired with tools like Cucumber;
  • PWA: Progressive Web App for an outcome as design approach.

    • Other Tools
  • Terminal: A development environment essential;
  • Git: For version control;
  • Chrome Web Tools for debugging frontend issues;
  • TDD Tools: unit testing, integrated testing, end-to-end testing.

    • Development process

    1. Planning and Preparation

    To begin the development process, I started by writing user stories based on the app’s key features. These user stories served as the foundation for understanding the application's core functionality and user requirements. Each user story was then translated into multiple test scenarios, ensuring a robust testing framework would be in place from the outset. I created the project repository, deployed the initial structure of the project, and pushed the first commit to GitHub. At this early stage, I evaluated the merit and usefulness of serverless deployment for the app and created an AWS account, which required 24 hours to become fully functional.

    Image of meet-event App

    2. Backend Integration and Setup

    Following this, I connected the React app with a protected API and prepared an OAuth client to handle authorization and authentication securely. Once the AWS account was active, I obtained the necessary AWS credentials and integrated my access key into the app via the terminal, ensuring a seamless setup for future development.

    example of Meet App events

    3. Implementation of Serverless Technology

    Leveraging serverless technology, I implemented a Lambda function and tested its functionality by creating a serverless deployment package. This streamlined approach enhanced scalability and reduced infrastructure management overhead.

    4. Testing and Development Methodology

    Adopting both Test-Driven Development (TDD) and Behavior-Driven Development (BDD) methodologies, I wrote unit tests, integration tests, user acceptance tests, and end-to-end tests. These tests were meticulously based on the project’s features and scenarios, ensuring the app's functionality and performance met the set up standards.

    Test-Driven-Development MeetApp image

    5. Monitoring and Performance Optimization

    To monitor the app’s performance, I set up a project in Atatus. This enabled me to track metrics and performance data effectively. Additionally, I configured alerts for the Meet app using Object-Oriented Programming (OOP), allowing real-time notifications for critical issues.

    Meet App example of App Performance Monitoring

    6. Progressive Functionality and Offline Features

    To enhance user experience, I implemented progressive web app functionality. This included enabling the app to function offline and allowing users to add it to their home screens. These features ensured a seamless experience across different environments and devices.

    Meet-event-PWA Image

    7. Data Visualization

    For the web app’s user interface, I incorporated data visualization features using Recharts. This provided users with intuitive and interactive visual representations of data, enhancing the overall usability and appeal of the app.

    Conclusion

    The development process was incorporating best practices in planning, backend integration, serverless architecture, testing, performance monitoring, and progressive functionality. Each step was executed with attention to detail, ensuring the Meet app delivers a high-quality and user-centric experience.