Components Diagram

Components Diagram

4 minutes
c4 container

PDF Version

Components Diagram

Introduction

![Components Diagram][embedView]

Backend for Frontend (BFF) architecture that facilitates secure access to Google Drive and integrates with GitHub for file management. The BFF handles user authentication via Google Identity to interact with Google Drive APIs for listing, updating, and downloading files. A File Process Microservice asynchronously processes Markdown files using a Pub/Sub mechanism and pushes the processed files to GitHub for version control. The architecture ensures separation of concerns, secure access, and scalability for file processing and artifact storage.

Backend (Application Component)

Properties

Stereotype Github
Container https://github.com/mickael-royer/unicorn-express-server

Relationships

From Relationship To Name/Label Description
Backend Aggregation Relationship List Files (Application Interface)
Backend Aggregation Relationship Update File Extension (Application Interface)
Backend Aggregation Relationship Download File (Application Interface)
Backend Composition Relationship Auth Google (Application Interface)

Backend for Frontend (BFF) to support Google Drive acces.

List Files (Application Interface)

Properties

Stereotype Protocole
API REST

Relationships

From Relationship To Name/Label Description
List Files Flow Relationship Google Drive (Application Component) list

Update File Extension (Application Interface)

Properties

Stereotype Protocole
API REST

Relationships

From Relationship To Name/Label Description
Update File Extension Flow Relationship Google Drive (Application Component) update

Iterate through fileIds and update each file

Download File (Application Interface)

Properties

Stereotype Protocole
API REST

Relationships

From Relationship To Name/Label Description
Download File Flow Relationship Process File (Application Interface) Pub/Sub
Download File Flow Relationship Google Drive (Application Component) get

File Process (Application Component)

Properties

Stereotype
Container

Relationships

From Relationship To Name/Label Description
File Process Aggregation Relationship Process File (Application Interface)

Microservice to process and enhance Markdown file

Process File (Application Interface)

Properties

Stereotype Protocole
API REST

Relationships

From Relationship To Name/Label Description
Process File Triggering Relationship Push File (Application Interface) State store https://docs.dapr.io/developing-applications/building-blocks/state-management/howto-get-save-state/
Process File Flow Relationship Google Gemini (Application Component) prompt
Process File Flow Relationship Pusher (Application Component) notification

Retrieve the message sent by the publisher Extract the data field, which contains the file information Extract the file content (base64 encoded) and other info If content is base64 encoded, decode it first

Auth Google (Application Interface)

Properties

Stereotype Protocole
API REST

Relationships

From Relationship To Name/Label Description
Auth Google Flow Relationship Google Identity (Application Component) getToken

Google Identity (Application Component)

Properties

Stereotype Provider URL
System Software Google https://developers.google.com/identity

Google Drive (Application Component)

Properties

Stereotype Provider URL
System Software Google https://drive.google.com

Stores files for further processing, with secure access through Google AuthN.

Push File (Application Interface)

Properties

Stereotype Protocole
API REST

Relationships

From Relationship To Name/Label Description
Push File Flow Relationship Github (Application Component) push https://learn.microsoft.com/en-us/rest/api/azure/devops/git/pushes/create?view=azure-devops-rest-7.1&tabs=HTTP

Github (Application Component)

Properties

Stereotype URL Registry
System Software https://github.com/mickael-royer https://github.com/mickael-royer?tab=packages

Relationships

From Relationship To Name/Label Description
Github Triggering Relationship ADR (Application Function) update

Code and Artefact repository with version control.

Frontend (Application Component)

Properties

Stereotype Github
Container https://github.com/mickael-royer/unicorn-ionic

Relationships

From Relationship To Name/Label Description
Frontend Assignment Relationship Drive Component (Application Function)

Frontend based on Ionic and Auth0 authentication

Drive Component (Application Function)

Properties

Stereotype
Component

Relationships

From Relationship To Name/Label Description
Drive Component Flow Relationship Backend (Application Component) fetch

Static Website (Application Component)

Properties

Stereotype Github
Container https://github.com/mickael-royer/unicorn-hugo-website

Relationships

From Relationship To Name/Label Description
Static Website Assignment Relationship ADR (Application Function)

Website to support Project Documentation, Archimate and Architecture Decision Record repositories

ADR (Application Function)

Properties

Stereotype
Component

File Publish (Application Component)

Properties

Stereotype
Container

Relationships

From Relationship To Name/Label Description
File Publish Aggregation Relationship Push File (Application Interface)

Microservice to publish Markdown file

Google Gemini (Application Component)

Properties

Stereotype URL
System Software https://aistudio.google.com/

LLM

Pusher (Application Component)

Properties

Stereotype URL
System Software https://dashboard.pusher.com/apps/1920401

Cross-platform API for native programmatic push notifications.