Overview

GeoFoodTruck is a GIS (Geographic Information System) application that performs proximity searches of Food Truck vendors using LeafletJS and the City of San Francisco, public dataset of Mobile Food Facility Permits.

GeoFoodTruck is visually interactive with a Custom Search Component providing an engaging user experience for map interactions and dynamic radius searches, to deliver relevant spatial information within a specified distance, view the GeoFoodTruck Screencast.

You can talk-the-talk, but can you walk-the-walk?

As a Cloud and Software Engineering applying my craft over several years, I've been fortunate to contribute and deliver technology solutions in multiple markets.

All the details of my career journey are documented on my resume (talk-the-talk), I created this project to Showcase Some of my skills in action (walk-the-walk).

NOTE

Attribution

• I am the Owner of the GeoFoodTruck repository.

• I am the Sole Contributor on the GeoFoodTruck repository.

• My Creative Efforts produced all code artifacts in the GeoFoodTruck repository.

  Excluding boilerplate React web application elements

  All 3rd-party Datasets, Frameworks and Libraries, are owned by their respective creators

Implementation

The goal of my implementation is to present a foundational Cloud Product Delivery Architecture and Process, using Agile Methodologies, Full-Stack development and CI / CD and E2E pipelines.

And of course showcase my applied expertise in Architecture and Engineering, to create and integrate the technologies to make it work.

The key techonlogies are:

Common

Tech	Purpose
React	GeoFoodTruck web application
Playwright	UI Automation, UAT and Reporting
Terraform	Infrastructure as Code
Checkov	IaC Security Compliance Scan
Git Workflow	CI / CD for Deploy and Test
Docker	Container for running UATs from Test Git Workflow

AWS

Tech	Purpose
KMS	Managed Encryption
Cloudfront	Content Delivery, Caching and TLS Encryption in Transit
OAC	Token Authorization for Cloudfront to S3
S3	KMS Encrypted at Rest of Application Files
WAFv2	Cloudfont Traffic Telemetry, DoS Protection, Bot Filter, Malicious Agents Filter

Azure

Tech	Purpose
Key Vault	Managed Encryption
FrontDoor	Content Delivery, Caching and TLS Encryption in Transit
Private Link	Private Endpoint for FrontDoor to Storage Account
Storage Container	Managed Encryption at Rest of Application Files
WAF	FrontDoor Traffic Telemetry, DoS Protection, Bot Filter, Malicious Agents Filter

NOTE

Disclaimer

Though my implementation uses a specific techonlogy stack, the general Cloud Product Delivery Architecture pattern is applicable with most CSP, IaC or CI / CD.

I do not promote or endorse any of the technologies used in my implementation. My technology selection criteria basically boiled down to the following:

1. Least effort to business value objective, my use case objective is to have a complete integration with least overhead.
2. Learning/Updating technical expertise is worth the extra effort, ie: Git Workflow Playwright with Docker, Terraform WAFv2 updates.
3. Some things are just cool and fun (maybe a lil painful), ie: Leaflet and Leaflet React.

Approach

My approach combines hands-on technical leadership and software engineering with strategic oversight, ensuring that scalable, efficient and secure cloud solutions align with business objectives.

1. Web Application Design and Development

   Though my expertise spans beyond solely creating web applications, most organizations produce and maintain such systems.

   GeoFoodTruck is a React web application, view GeoFoodTruck Details for more information.

2. Agile Business Value from Inception to Realization

   As architect I collaborate regularly with Stakeholders, Product Owners and Delivery Managers, my primary focus is to understand the business objectives and the desired outcome. I document and define Feature Workstreams, create and refine the Stories for each workstream. Each Story will usually contain one or more User Need, documented as Acceptance Criteria (AC).

   • ACs document a specific User Need described in Layman Terms and written in GIVEN-WHEN-THEN syntax.

     Sample AC

     GIVEN I see my location marker
     WHEN I click on my location marker
     THEN I should see a popup with the text "You are here"
     

   • The Behavior described by the AC is then codified to a User Accptance Test (UAT). This development technique is known as Behavior Driven Developmet (BDD). From the previous AC, this would be the corresponding UAT, using Playwright UI Automation and integrated with Page Object Model (POM) pattern, resulting in clean tests that closely follow the AC definition.

     Sample UAT

     test('My Location Marker', async () => {
        // POM instance
        const mapPage = new MapPage(page);
     
        // GIVEN I see my location marker
        await mapPage.hasButton('Marker');
     
        // WHEN I click on my location marker
        await mapPage.clickButton('Marker');
     
        // THEN I should see a popup
        await mapPage.isPopupOpen();
     
        // with the text "You are here"
        await mapPage.hasPopupText('You are here');
     });
     

   • Transparent, Frequent and Detailed feedback is paramount to supporting Agile Software Development teams. The UATs paired with the CI / CD pipeline enable near-real-time reporting of the application quality. The Tests Result Report is published and available to all project collaborators.

     Screenshots

     Happy Path

     Less-Happy Path

3. Automate Everything

   Or try to Automate as much as resonably possible. The key concept is to strive for Idempotency, run once or 100 times, given the same input the outcome will always be the same. Eliminating manual intervention is another practice to boost Agile Development Teams productivity.

   For GeoFoodTruck, the CI / CD pipeline is configured to support a Continous Flow Agile Delivery workflow, where commits are fully assessed and the pipeline is not interrupted upon stage failure.

   I created three event triggered Workflows: Deploy, Test and IaC

   • Deploy is activated upon detection of source code changes in the repository. Triggering a new build for the web application and a new deployment of the AWS infrastructure using the Terraform IaC templates. Terraform dynamically identifies if any modifications require infrastructure updates.

   • Test is activated upon successful completion of the Deploy workflow, using a Docker container to run all UATs to avoid blocking other stages in the pipeline. The Test workflow publishes the Tests Result Report available to all project collaborators.

     Screenshot

     Deploy and Test in Action

     

   • IaC is activated uppon successful completion of the Deploy workflow, and performs a Security Compliance Infrastructre Scan of the Terraform IaC Templates. The IaC workflow publishes the Security Scan Report available to all project collaborators.

     Screenshot

     GitHub Security Scan

     

4. Cloud Product Delivery

   A Well Architected Cloud product requires a thorough assessment of the workload being provisioned, at a high-level this evaluation will consider Operations, Security, Performance, Resiliency, Sustainability and Costs.

   In GeoFoodTruck I implemented the baseline patterns that are common for web application cloud workloads.

   • Development Operations (DevOps)

     The GeoFoodTruck Deploy and Test CI / CD pipeline, although unsophisticated, it is effective in representing a Minimum Viable Product to support DevOps. It very easily can be leveraged as a template for green-field or POC projects.

     On more robust DevOps implementations the team would have multi-stage deployments to various environments (Dev, Stage, Pre-Prod, Prod), the Test pipeline may have a scheduled Canary environment for spot-checks. Automated Issue Ticket creation, Monitoring and Telemetry Notifications, the sky is the limit of what can be accomplished.

     However the basic workflow principles apply, Build changes, Deploy changes, Validate deployment.

   • Shift-Left Security (SecDevOps)

     GeoFoodTruck does not work with PII or PCI information nor does it use Authentication and Authorization, however I pupurposely applied a Shift-Left security posture, here was Terraform's moment in the spotlight.

     Using Terraform I defined, configured and provisioned the AWS services required to harden security for the GeoFoodTruck application. Applying Encryption at Rest, Encryption in Transit, Malicous Traffic Detection and Filtering, Access Abstraction between Web and Backend, Traffic Telemetry, to name a few. WAF provides a plethora of traffic telemetry, exportable to CloudWatch or to JSON.

     My objective was to highlight the importance of a Shift-Left / Security-First mindset our development teams need to be adopting and applying.

     Screenshot

     Couple WAF Dashboards

     

   • Performance and Cost (CloudOps)

     The security hardening applied to GeoFoodTruck uses an S3 bucket for Server-side Encryption at Rest of the application files. Though uploading data to S3 is free, getting data from S3 is NOT. Being aware of this drawback from security hardening, I configured Cloudfront with distribution behaviors to provide content caching, benefiting not only from Cost savings, but also Performance enhancements.

     Cloudfront is an AWS Global Content Deivery Network, and the Cloudfront cache is replicated by AWS, though the GeoFoodTruck application content is relatively small, not having to pay S3 object retrieval costs is a big plus. And as an added bonus the GeoFoodTruck application is available @Edge to users everywhere.

     Screenshot

     Cloudfront Cache Metrics

     

GeoFoodTruck Application

This is a screencast of GeoFoodTruck, Click Here to use the live app.