Elerama Frontend

Appearance

Elerama FrontendDocumentazione Completa

React 19 + React Router 7 + Zustand + TypeScript

Quick Start
Autenticazione
🔐

Autenticazione Completa

Sistema di autenticazione integrato con Zustand, gestione multi-tab e protezione route automatica

🛒

Carrello Avanzato

Gestione carrello con persistenza locale, sincronizzazione multi-tab e integrazione completa

🔄

Sincronizzazione Multi-Tab

BroadcastChannel per sincronizzazione automatica dello stato tra schede del browser

📱

iFrame Communication

Sistema di messaggistica e navigazione per comunicazione con applicazioni parent

⚡

React Compiler

Ottimizzazioni automatiche con babel-plugin-react-compiler per performance superiori

🧪

Testing Completo

Vitest + React Testing Library con coverage e best practices

📊

AG Grid Enterprise

Tabelle avanzate con AG Grid Enterprise completamente configurate

🎨

Design System

Componenti UI personalizzati con Tailwind CSS 4 e tokens condivisi

Introduzione ​

Benvenuto nella documentazione del progetto Elerama Frontend, un'applicazione React moderna costruita con le tecnologie più recenti:

  • React 19 - Ultima versione di React con React Compiler
  • React Router 7.9 - Routing avanzato con loaders e actions
  • Zustand - State management semplice e performante
  • TypeScript 5 - Type safety completo
  • Vite - Build tool ultra-veloce
  • Vitest - Testing framework moderno

Caratteristiche Principali ​

🔐 Sistema di Autenticazione ​

Un sistema completo di autenticazione con:

  • Login/Logout con API backend
  • Protezione automatica delle route
  • Sincronizzazione multi-tab
  • Gestione token e refresh automatico
  • User settings personalizzabili

🛒 Gestione Carrello ​

Carrello avanzato con:

  • Persistenza locale
  • Sincronizzazione tra tab
  • Gestione quantità e varianti
  • Integrazione con backend

📡 Comunicazione iFrame ​

Sistema completo per:

  • Navigazione parent/child
  • Scambio messaggi bidirezionale
  • TopBar communication
  • Event handling sicuro

⚡ Performance ​

Ottimizzazioni incluse:

  • React Compiler abilitato
  • Code splitting automatico
  • Bundle size ottimizzato
  • StrictMode double-call prevention

Struttura Progetto ​

app/
├── api/          # API functions e schemas
├── components/   # Componenti React
├── hooks/        # Custom hooks
├── lib/          # Utilities e helpers
├── routes/       # Route React Router
├── schemas/      # Zod schemas
└── store/        # Zustand stores

Come Usare Questa Documentazione ​

  1. Inizia con il Quick Start per una panoramica rapida
  2. Consulta le guide specifiche per approfondire argomenti particolari
  3. Guarda gli esempi per implementazioni pratiche
  4. Usa la ricerca per trovare rapidamente quello che cerchi

Ultima Modifica: Novembre 2025

Documentazione Elerama Frontend

Copyright © 2024-present Elerama