Un dojo di dattilografia bilingue che unisce pratica narrativa, progressione in stile RPG e una tastiera virtuale tattile
AlphaType è un trainer di dattilografia moderno e interattivo che trasforma l'apprendimento della digitazione in un'esperienza coinvolgente simile a un videogioco. Progettato per supportare sia italiano che inglese, AlphaType combina:
- Pratica guidata con filtri personalizzabili e testi curati
- Modalità Storia con capitoli narrativi in tre generi diversi
- Sistema di progressione RPG con livelli, XP e ricompense
- Tastiera virtuale animata con feedback visivo in tempo reale
- Coaching predittivo che analizza le tue performance e fornisce consigli mirati
- Dashboard analitica per tracciare miglioramenti nel tempo
Tutto questo funziona completamente offline, senza dipendenze da servizi esterni.
- 5 preset ottimizzati: Standard, Principiante, Velocità, Precisione, Programmatore
- Filtri configurabili: punteggiatura, numeri, modalità zen
- Tastiera virtuale opzionale con zone delle dita e heatmap degli errori
- Coaching predittivo immediato dopo ogni sessione
- 3 generi narrativi: Fantasy, Fantascienza, Avventura
- 5 capitoli per genere completamente tradotti in italiano e inglese
- Progressione integrata con il sistema XP principale
- Riassunto della storia per riprendere da dove hai lasciato
- Grafici interattivi per WPM e precisione
- Statistiche dettagliate: migliori performance, medie, tendenze
- Storico sessioni con visualizzazione cronologica
- Responsive design con Recharts
- Anteprima delle funzionalità future: arena, gilde, classifiche
Frontend: React 19.1.1 + TypeScript 5.8.2
Build: Vite 6.2
Styling: Tailwind CSS (via CDN)
Charts: Recharts
State: Context API + Hooks personalizzati
AlphaType/
├── src/
│ ├── App.tsx # Orchestratore principale: routing, XP, state globale
│ ├── components/
│ │ ├── GameUI.tsx # Shell principale con navigazione e HUD
│ │ ├── TypingTest.tsx # Motore di digitazione riutilizzabile
│ │ ├── StoryMode.tsx # Gestione capitoli e narrativa
│ │ ├── VirtualKeyboard.tsx # Tastiera animata con feedback
│ │ ├── PredictiveCoaching.tsx # AI coaching locale
│ │ ├── AnalyticsDashboard.tsx # Grafici e statistiche
│ │ ├── FilterToolbar.tsx # Controlli filtri pratica
│ │ └── common/ # Componenti UI riutilizzabili
│ ├── hooks/
│ │ └── useTypingGame.ts # Logica core digitazione
│ ├── services/
│ │ ├── contentEngine.ts # Selezione intelligente dei testi
│ │ ├── textGenerator.ts # Generazione procedurale
│ │ ├── geminiService.ts # Integrazione Gemini (opzionale)
│ │ └── predictiveAI.ts # Coaching AI (opzionale)
│ ├── data/
│ │ └── textLibrary.ts # Biblioteca testi bilingue con metadata
│ ├── utils/
│ │ ├── filterEngine.ts # Applicazione filtri post-selezione
│ │ └── logger.ts # Sistema di logging con subscription
│ ├── contexts/
│ │ └── LanguageContext.tsx # Gestione lingua con persistenza
│ └── i18n/
│ └── translations.ts # Catalogo stringhe bilingue
└── index.html # Entry point con Tailwind CDN
- Node.js 18 o superiore
- npm o package manager compatibile
# 1. Clona il repository
git clone https://github.com/pinksy91/AlphaType.git
# 2. Entra nella cartella
cd AlphaType
# 3. Installa le dipendenze
npm install
# 4. Avvia il server di sviluppo
npm run devL'applicazione sarà disponibile su http://localhost:5173
# Crea la build ottimizzata
npm run build
# Preview della build
npm run previewPer abilitare la generazione di testi e coaching avanzato tramite AI:
- Copia
.env.localin.env - Aggiungi la tua API key:
GEMINI_API_KEY=la_tua_chiave_api
- Il sistema mapperà automaticamente la chiave tramite
vite.config.ts
Nota: L'app funziona completamente offline senza questa configurazione. Gemini è puramente opzionale per funzionalità avanzate.
- Biblioteca curata: oltre 50 testi bilingue con metadata dettagliati
- Scoring intelligente: algoritmo di selezione basato su difficoltà, categoria, lunghezza
- Rotazione anti-ripetizione: evita testi recenti per varietà
- Generazione procedurale: frasi infinite da word banks stratificati per difficoltà
- Filtri post-processo: punteggiatura, numeri e zen mode applicati dinamicamente
- Heatmap errori per tasto: identifica quali tasti causano più problemi
- Zone delle dita colorate: guida visiva per la posizione corretta delle mani
- Highlight dinamico: evidenzia la lettera corrente e mostra errori istantaneamente
- Statistiche live: WPM, precisione e tempo rimanente sempre visibili
- Curva esponenziale:
XP richiesti = XP_PER_WORD × 1.2^(livello - 1) - Ricompense basate su performance: più precisione = più XP
- Persistenza cross-session: livello e XP salvati durante la sessione
- Barra progresso visiva: mostra avanzamento verso il prossimo livello
- Cambio lingua istantaneo: tutto l'UI si aggiorna senza ricaricare
- Persistenza in localStorage: la lingua preferita viene ricordata
- Attributo
<html lang>: aggiornato automaticamente per accessibilità - Layout tastiera adattivo: passa tra layout italiano e US
- Dark mode nativo: interfaccia ottimizzata per sessioni lunghe
- Animazioni fluide: transizioni CSS e feedback visivo immediato
- Responsive layout: si adatta da mobile a desktop
- Accessibilità: contrasti WCAG-compliant e navigazione da tastiera
Tutti i componenti comuni (Card, Button, Loader) sono centralizzati in components/common/ con stili Tailwind consistenti per facilitare manutenzione ed estensioni future.
- Selezione contenuto:
contentEngine.tsanalizza la biblioteca e seleziona il testo ottimale - Applicazione filtri:
filterEngine.tsmodifica il testo secondo i toggle attivi - Digitazione:
useTypingGame.tscattura keystrokes, calcola metriche, gestisce timer - Feedback visivo:
VirtualKeyboard.tsxanima i tasti e mostra heatmap - Risultati: calcolo WPM, precisione, errori comuni
- Coaching:
PredictiveCoaching.tsxgenera consigli localizzati - XP e livello:
App.tsxaggiorna progressione e salva dati analytics
score = (categoryMatch × 0.4) +
(difficultyMatch × 0.3) +
(lengthPreference × 0.2) +
(recencyPenalty × 0.1)Il sistema evita testi usati di recente e favorisce quelli che matchano meglio i filtri attivi.
- Clicca il pulsante log flottante per vedere lo stream di eventi in tempo reale
- Tutti gli eventi passano attraverso
utils/logger.ts LogViewer.tsxoffre filtri e ricerca nell'event stream
- State locale: pratica corrente, filtri, testo selezionato (
App.tsx) - Context globale: lingua, theme, preferenze (
LanguageContext.tsx) - Hook custom: logica di digitazione isolata (
useTypingGame.ts) - Persistenza: localStorage per lingua, sessioni in memoria
La tastiera virtuale mantiene il focus sull'input invisibile per evitare blur accidentali. Il componente TypingTest gestisce automaticamente focus/blur durante mount/unmount.
- Debouncing: gestione keystrokes ottimizzata per evitare race conditions
- Memoization: componenti pesanti wrappati in
React.memo - Lazy loading: vista multiplayer caricata on-demand
- CDN Tailwind: zero build time per styling
- Connettere servizi Gemini per generazione testi cloud
- Abilitare coaching AI avanzato con suggerimenti personalizzati
- Espandere biblioteca testi con 100+ nuovi contenuti
- Aggiungere categorie specializzate (medico, legale, tecnico)
- Database locale (IndexedDB) per storico completo
- Sistema di achievement e badge
- Grafici avanzati con breakdown per categoria
- Export dati in CSV/JSON
- Gare in tempo reale con WebSocket
- Sistema di ranking e leaderboard
- Gilde e sfide di gruppo
- Modalità torneo
- Supporto per altre lingue (spagnolo, francese, tedesco)
- App mobile nativa (React Native)
- Modalità allenatore vocale
- Integrazione con piattaforme educative
# Esegui test (quando implementati)
npm run test
# Test con coverage
npm run test:coverage
# Test E2E
npm run test:e2eNota: La suite di test è pianificata per coprire useTypingGame, content engines e filter logic.
AlphaType è attualmente un progetto solo, ma suggerimenti e feedback sono benvenuti!
Per segnalare bug o proporre funzionalità, apri una issue su GitHub.
Pinksy91
Ogni singola riga di codice in questo repository è stata scritta dalla stessa persona.
Le informazioni sulla licenza non sono ancora state pubblicate. Fino all'aggiunta di un file LICENSE, tutti i diritti sono riservati all'autore.
- React Team per React 19 e il nuovo ecosistema
- Vercel per Vite e il tooling moderno
- Tailwind Labs per il framework CSS
- Recharts per i componenti grafici
- Google per l'API Gemini (integrazione opzionale)
Fatto con ❤️ e TypeScript
Inizia a digitare più velocemente oggi stesso! 🚀