Architecture

Frontend (The App)

Found inside the /front folder, it is a Single Page Application (SPA) built with:

• Nuxt: A powerful Vue.js framework that provides the application structure and routing.
• Vant UI: A lightweight Mobile UI Component library that gives Pico its native app feel.
• PWA (Progressive Web App): Allows the app to be installed on your device, work offline (to an extent), and launch like a native app.

Backend (The Brains)

Found inside the /back folder it exposes a REST API and proxies all requests to your Firefly III instance.

• Laravel: A robust PHP framework used for the REST API.
• Spatie Query Builder for implementing the JSON:API specification

Database

Firefly-Pico maintains a separate, lightweight database to store:

• Icons: Linked to Firefly resources (accounts, categories).
• Metadata: Extra columns not supported by Firefly III.

Security

Firefly-Pico does not implement a separate authorization layer!

• It proxies all requests to the Firefly III API.
• Firefly III is responsible for checking the Authorization header.
• Even custom endpoints (like /api/transaction-templates) are authorized by against Firefly III's v1/about/user endpoint first.
• Benefit: Single source of truth for authorization; no separate account needed.

Data Storage

• Local Storage: App settings, tags, accounts, categories, budgets, and templates are cached in the browser's localStorage for instant access.
• Syncing: Data is re-synced every N days (configurable). You can manually trigger a sync via Settings -> App config -> Save or by pulling to refresh on lists.

Docker

• exposes a single port to the outside. Inside the container there is an Nginx instance which sends all requests containing /api to the backend and all other to the frontend instance.