The Macrocompass è una piattaforma SaaS pensata per offrire a professionisti, appassionati e studenti strumenti avanzati per l’analisi macroeconomica, un archivio di contenuti educativi e un’esperienza utente curata su ogni dispositivo. È disponibile sia come web app responsive sviluppata in Next.js, sia come app nativa per Android e iOS grazie a Ionic + Capacitor. Il progetto nasce da un’esigenza chiara: fornire un ambiente completo e accessibile per la formazione e il monitoraggio finanziario, integrando corsi, video-lezioni, strumenti interattivi e funzionalità di pagamento scalabili.

Panoramica

Caratteristiche Principali

• Web App: corsi, video-lezioni, articoli, strumenti di analisi, notifiche browser, tema chiaro/scuro.
• App Mobile: tutte le funzionalità della versione web, ottimizzate per l’uso mobile, con notifiche push di sistema.
• Admin Panel: gestione utenti, piani di abbonamento, statistiche, contenuti didattici, mailing list e invio newsletter.

Obiettivi & Requisiti

Il cliente richiedeva una piattaforma accessibile in mobilità e da desktop, in grado di offrire strumenti finanziari, contenuti editoriali e didattici in un’unica esperienza coerente. Gli obiettivi principali erano:

• Uniformare l’esperienza tra dispositivi desktop e mobile.
• Migliorare la struttura delle lezioni, i sistemi di pagamento e la fruizione dei contenuti multimediali.
• Implementare un sistema robusto di notifiche e onboarding.
• Permettere la gestione indipendente dei contenuti e delle iscrizioni da parte del team editoriale.

Processo

Il progetto è partito con una fase di analisi dell’esperienza utente esistente, seguita dalla revisione dell’architettura dell’informazione. Dopo la definizione dei flussi principali, si è proceduto con lo sviluppo modulare, iniziando dalla web app e successivamente dalle applicazioni native. Ogni modulo (learning, pagamenti, notifiche, portfolio, contenuti editoriali) è stato progettato come componente riutilizzabile e testato singolarmente. Lo sviluppo ha seguito un ciclo iterativo, con feedback continui e rilascio progressivo delle funzionalità.

Tecnologie Utilizzate

• Frontend Web: Next.js, Tailwind CSS, Radix UI, Tanstack Query, Chart.js
• Frontend Mobile: Ionic, Capacitor, React, React Router DOM, Swiper
• Backend: Fastify, tRPC, MongoDB, Zod, Firebase Admin SDK
• Integrazioni: Stripe, Apple Payments, Vimeo, NextAuth, gestore mailing esterno
• Gestione contenuti: TinyMCE, MDEditor, player Vimeo integrato
• Testing: Cypress (e2e), Vitest, Testing Library

Funzionalità

Dashboard & Learning Area

La dashboard principale consente all’utente di accedere a tutte le informazioni rilevanti: corsi in corso, ultime lezioni, video suggeriti, piani attivi e attività recenti. Il layout è disponibile in tema chiaro e scuro, ottimizzato per la fruizione continua e per una lettura gradevole anche su dispositivi mobili. Le sezioni sono modulari e personalizzabili, con focus sulla rapidità di accesso ai contenuti.

Portfolio e strumenti di analisi

L’area dedicata all’analisi macroeconomica permette di visualizzare la propria allocazione di portafoglio, monitorare asset e performance in tempo reale. I grafici sono interattivi, con supporto a zoom, filtri e tooltip. I dati vengono caricati in modo asincrono per garantire un’esperienza fluida anche in condizioni di rete instabile.

Gestione contenuti e media

Gli utenti possono accedere a un vasto archivio di lezioni e contenuti video, suddivisi per argomenti e livelli. I contenuti sono caricati tramite Vimeo, con il player integrato direttamente nell’interfaccia. Il sistema supporta audio, trascrizioni, allegati e test interattivi. L’editor interno permette al team di pubblicare e aggiornare contenuti direttamente dal pannello admin.

Abbonamenti e pagamenti

Il sistema di gestione dei piani è completamente integrato con Stripe e Apple Payments. Gli utenti possono sottoscrivere piani mensili, annuali o a vita, con gestione automatica dei rinnovi, fatturazione e annullamento. Il backend gestisce la sincronizzazione con i provider di pagamento, incluse le API Apple per le sottoscrizioni mobili.

Notifiche push e browser

L’app utilizza Firebase e Capacitor per notifiche push su dispositivi mobile e notifiche browser per utenti desktop. Il sistema è configurabile dal pannello admin: è possibile inviare notifiche automatiche in base a eventi (nuovo contenuto, scadenza piano, reminder lezione) o manualmente tramite editor WYSIWYG.

Caratteristiche software

Architettura modulare full-stack

La piattaforma è basata su una struttura monorepo con moduli indipendenti per web, mobile e backend. L’uso di tRPC consente una comunicazione completamente typesafe tra client e server, migliorando l’affidabilità e riducendo i tempi di sviluppo.

UI/UX responsive e accessibile

Grazie a Tailwind CSS, Radix UI e React Aria, l’interfaccia è accessibile, scalabile e curata in ogni dettaglio. Ogni componente è stato progettato per offrire un’esperienza fluida, anche in condizioni di rete limitata o su dispositivi datati.

Performance ottimizzate

L’app utilizza lazy loading, cache lato client e prefetching intelligente per ridurre i tempi di caricamento. I dati sono gestiti tramite React Query e strutturati per supportare il re-fetching selettivo, evitando sprechi di banda.

Sicurezza e autenticazione

L’autenticazione è gestita tramite NextAuth, con supporto per login via Google, email, Apple e credenziali locali. Le operazioni critiche (pagamenti, gestione contenuti) sono protette da autorizzazioni granulari. Le informazioni sensibili sono archiviate in modo sicuro e validate con Zod e Formik.

Mailing e automazioni

La piattaforma integra un sistema esterno per la gestione della newsletter e dell’email marketing. Gli utenti vengono segmentati in base al piano attivo, ai contenuti seguiti e all’interazione con la piattaforma, permettendo l’invio mirato di comunicazioni e aggiornamenti.