System Architecture
+A two-tier client-server application. A single-page Vue frontend runs in the browser and communicates with a stateless FastAPI service over HTTP. The API reads sample data loaded into memory from JSON files at startup. There is no database.
+ +
+
+
+
+
+
+
+ Client tier – Browser
+ Vue 3 SPA · Vite dev server · port 3000
+
+
+
+
+
+
+
+ Views (7)
Dashboard, Inventory, Orders, Demand, Spending, Reports
Components (9)
Filter bar, detail modals, profile, language switcher
Composables (3)
useFilters, useI18n, useAuth
API client
api.js (Axios), Vue Router
HTTP / JSON · Axios · CORS open
+
+
+
+
+
+ Application tier – API server
+ FastAPI + Uvicorn · port 8001
+
+
+
+
+
+
+
+ Route handlers
14 read endpoints under /api
Filter engine
apply_filters + filter_by_month (quarter map)
Pydantic models
Response validation and typing
CORS middleware
allow_origins = *
In-process load at startup · mock_data.py
+
+
+
+
+
+ Data tier – In-memory
+ JSON files in server/data/ · no database
+
+
+
+
+
+
+
+ inventory.json
Stock across warehouses
orders.json
12 months of orders
spending / transactions
Finance datasets
demand / backlog / POs
Forecasts and fulfillment
Technology Stack
+
+
+
+
+ Frontend
+Single-page app, runs in the browser
+ -
+
- Vue^3.4.21 +
- Vue Router^4.3.0 +
- Axios^1.6.7 +
- Vite^5.2.0 +
- @vitejs/plugin-vue^5.0.4 +
+
+ Backend
+Stateless REST API
+ -
+
- Python≥3.11 +
- FastAPI≥0.110 +
- Uvicorn≥0.24 +
- Pydantic≥2.5 +
+
+ Data
+Loaded into memory at startup
+ -
+
- FormatJSON files +
- Locationserver/data/ +
- Loadermock_data.py +
- Databasenone +
+
+ Tooling
+Dev, test, and locale support
+ -
+
- Env manageruv / venv + pip +
- Testspytest + TestClient +
- i18nen / ja +
- CurrencyUSD / JPY +
Data Flow
+A single request cycle, from a user changing a filter to updated numbers on screen. Filter state is shared app-wide through a singleton composable, so every view reads the same selection.
+-
+
-
+ User sets a filter+The filter bar updates shared state in+
useFilters(Time Period, Warehouse, Category, Order Status). State is a module-level singleton, so all views stay in sync.
+ -
+ View requests data+A view calls+
getCurrentFilters()and passes the result to a method onapi.js, for examplegetDashboardSummary(filters).
+ -
+ HTTP request+Axios sends a GET to+
http://localhost:8001/api/...with active filters as query params. "all" values are omitted from the request.
+ -
+ Server filters in memory+FastAPI applies+
apply_filters(warehouse, category, status) andfilter_by_month, which expands quarters such asQ3-2025into their months.
+ -
+ Validate and respond+Results are shaped and validated against Pydantic models, then returned as JSON.+
+
-
+ Reactive render+The view stores raw data in refs; computed properties derive metrics and charts, and Vue re-renders the affected parts of the page.+
+
API Endpoints
+All endpoints are read-only GET requests. Filters accepted: warehouse, category, status, month.
| Method | Path | Purpose | Filters |
|---|---|---|---|
| GET | /api/inventory | Inventory items | warehouse, category |
| GET | /api/inventory/{id} | Single inventory item | – |
| GET | /api/orders | Orders | warehouse, category, status, month |
| GET | /api/orders/{id} | Single order | – |
| GET | /api/demand | Demand forecasts | – |
| GET | /api/backlog | Backlog items (with PO status) | – |
| GET | /api/dashboard/summary | Headline metrics | all four |
| GET | /api/spending/summary | Spending totals | – |
| GET | /api/spending/monthly | Monthly spend | – |
| GET | /api/spending/categories | Spend by category | – |
| GET | /api/spending/transactions | Recent transactions | – |
| GET | /api/reports/quarterly | Quarterly report | – |
| GET | /api/reports/monthly-trends | Monthly trend series | – |
| GET | / | Service root / health | – |
Data Entities
+| Dataset | File | Records | Notes |
|---|---|---|---|
| Orders | orders.json | 250 | Spans 12 months, four statuses |
| Transactions | transactions.json | 56 | Finance ledger entries |
| Inventory | inventory.json | 32 | Stock by SKU and warehouse |
| Demand forecasts | demand_forecasts.json | 9 | Current vs forecast with trend |
| Backlog items | backlog_items.json | 4 | Delayed / short-stock items |
| Spending | spending.json | 3 sets | Summary, monthly, category |
| Purchase orders | purchase_orders.json | 0 | Empty; drives backlog PO flag |
Architecture Notes
+
+
+
+
+ Stateless by design
+ The API holds no session state. Data is loaded from JSON once at startup and filtered per request. Restarting the server resets everything.
+
+
+ Direct cross-origin calls
+ The client calls the API host and port directly. There is no Vite proxy; the backend allows all origins via open CORS. Fine for a local demo, not for production.
+
+
+ Client methods without backend routes
+ api.js defines methods for tasks (GET/POST/DELETE/PATCH) and purchase orders (POST/GET), but the backend exposes no matching routes. Tasks are mocked in useAuth.js; those write calls would 404.
+
+
+ Demo, not production
+ No database, authentication, or authorization. useAuth returns a hard-coded user with isAuthenticated always true.
+