feat(fullstack): implement observability and redesign frontend UI

This commit introduces comprehensive observability for both backend and frontend, alongside a major UI/UX overhaul to align with modern design standards (Material 3 inspired) and improve localization.

Backend changes:
- Integrated OpenTelemetry SDK for distributed tracing.
- Added Pino for structured JSON logging with OTel instrumentation for trace/span correlation.
- Configured OTLP exporters to route traces and logs to Grafana Alloy.
- Updated docker-compose to include necessary environment variables for observability.

Frontend changes:
- Integrated Grafana Faro for Real User Monitoring (RUM), capturing Web Vitals, JS errors, and user interactions.
- Redesigned the entire UI using a new color palette and Material 3 design principles.
- Refactored component architecture (App, Home, Search, Scanner, Profile, Alerts views) for better state management and navigation.
- Improved mobile UX with a redesigned Bottom Navigation bar and Top Bar.
- Localized the interface to Spanish (es).
- Updated assets, icons, and PWA configuration (manifest, icons).
- Refactored CSS to use a centralized design token system (CSS variables).

Observability enables better debugging and performance monitoring across the entire stack.

backend/package.json

@@ -18,6 +18,16 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@opentelemetry/api": "^1.9.0",
+    "@opentelemetry/auto-instrumentations-node": "^0.52.0",
+    "@opentelemetry/exporter-logs-otlp-grpc": "^0.55.0",
+    "@opentelemetry/exporter-trace-otlp-grpc": "^0.55.0",
+    "@opentelemetry/instrumentation-pino": "^0.45.0",
+    "@opentelemetry/resources": "^1.28.0",
+    "@opentelemetry/sdk-logs": "^0.55.0",
+    "@opentelemetry/sdk-node": "^0.55.0",
+    "@opentelemetry/sdk-trace-base": "^1.28.0",
+    "@opentelemetry/semantic-conventions": "^1.28.0",
     "axios": "^1.6.0",
     "bcrypt": "^5.1.1",
     "connect-pg-simple": "^10.0.0",
@@ -27,6 +37,8 @@
     "express": "^4.18.2",
     "express-rate-limit": "^8.5.2",
     "express-session": "^1.17.3",
+    "pino": "^9.4.0",
+    "pino-http": "^10.3.0",
     "redis": "^4.6.0",
     "sqlite3": "^5.1.6",
     "web-push": "^3.6.7"

backend/server.js

@@ -1,3 +1,6 @@
+// OpenTelemetry SDK — must be imported first to instrument http, express, pg, etc.
+import './src/tracing.js';
+
 import express from 'express';
 import cors from 'cors';
 import sqlite3 from 'sqlite3';
@@ -11,6 +14,8 @@ import pg from 'pg';
 import bcrypt from 'bcrypt';
 import rateLimit from 'express-rate-limit';
 import webpush from 'web-push';
+import pino from 'pino';
+import pinoHttp from 'pino-http';
 import { searchMedicines, getMedicineDetails } from './cima-service.js';
 import { runFarmaciaWebhookImport, DEFAULT_FARMACIAS_WEBHOOK, importPharmaciesFromRows } from './farmacias-webhook-import.js';
 import { fetchPharmaciesExternal } from '../API/index.js';
@@ -21,6 +26,13 @@ const __dirname = path.dirname(__filename);
 const app = express();
 const PORT = process.env.PORT || 3001;
 
+// Structured JSON logger. The Pino OTel instrumentation attaches trace_id /
+// span_id to every log line so they can be correlated in Grafana.
+const logger = pino({
+  level: process.env.LOG_LEVEL || 'info',
+  base: { service: process.env.OTEL_SERVICE_NAME || 'farmafinder-backend' },
+});
+
 // Trust the reverse proxy in front of us (Docker/Traefik/nginx/Cloudflare) so
 // req.ip and X-Forwarded-For are honored. Configurable via TRUST_PROXY:
 //   - unset/"1" → trust exactly one hop (typical single reverse proxy)
@@ -39,6 +51,7 @@ app.use(cors({
   credentials: true
 }));
 app.use(express.json());
+app.use(pinoHttp({ logger }));
 
 const PG_URL = process.env.PG_URL;
 let pgPool = null;

backend/src/tracing.js

@@ -0,0 +1,49 @@
+// OpenTelemetry Node SDK bootstrap for FarmaFinder backend.
+// Started as a side-effect import from server.js (ESM).
+//
+// Env vars (set by docker-compose):
+//   OTEL_SERVICE_NAME        — default: farmafinder-backend
+//   OTEL_EXPORTER_OTLP_ENDPOINT — OTLP gRPC endpoint (e.g. http://alloy:4317)
+//
+// Exports traces to the shared Grafana Alloy collector, where they are
+// routed to Tempo.
+
+import { NodeSDK } from '@opentelemetry/sdk-node';
+import { getNodeAutoInstrumentations } from '@opentelemetry/auto-instrumentations-node';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-grpc';
+import { resourceFromAttributes } from '@opentelemetry/resources';
+import { ATTR_SERVICE_NAME, ATTR_SERVICE_NAMESPACE } from '@opentelemetry/semantic-conventions';
+import { PinoInstrumentation } from '@opentelemetry/instrumentation-pino';
+
+const serviceName = process.env.OTEL_SERVICE_NAME || 'farmafinder-backend';
+const otlpEndpoint = process.env.OTEL_EXPORTER_OTLP_ENDPOINT || 'http://localhost:4317';
+
+const sdk = new NodeSDK({
+  resource: resourceFromAttributes({
+    [ATTR_SERVICE_NAME]: serviceName,
+    [ATTR_SERVICE_NAMESPACE]: 'farmafinder',
+  }),
+  traceExporter: new OTLPTraceExporter({ url: otlpEndpoint }),
+  instrumentations: [
+    getNodeAutoInstrumentations({
+      // Disable fs by default — it is noisy and rarely useful.
+      '@opentelemetry/instrumentation-fs': { enabled: false },
+      '@opentelemetry/instrumentation-dns': { enabled: false },
+    }),
+    new PinoInstrumentation(),
+  ],
+});
+
+sdk.start();
+
+const shutdown = async () => {
+  try {
+    await sdk.shutdown();
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.error('OpenTelemetry shutdown failed', err);
+  }
+};
+
+process.on('SIGTERM', shutdown);
+process.on('SIGINT', shutdown);