D20 at Hand è una web application sviluppata come progetto di consegna per un corso di Web & App Development.
L’app è pensata come una console di supporto per il Dungeon Master di Dungeons & Dragons 5e, con l’obiettivo di sperimentare architetture frontend moderne e una gestione strutturata dello stato.
Il progetto è attualmente in fase didattica.
In futuro verrà esteso per diventare uno strumento realmente utilizzabile in sessione.
Questo progetto nasce con finalità didattiche, per dimostrare la capacità di:
- progettare un’app React strutturata
- gestire stato locale e globale
- integrare API REST esterne
- creare interfacce complesse e riutilizzabili
- organizzare il codice in modo scalabile
L’aspetto “D&D” è il contesto applicativo, scelto per rendere il progetto realistico e interessante.
- React + Vite
- TypeScript
- React Router
- Context API + useReducer
- D&D 5e API → https://www.dnd5eapi.co/
- CSS custom (no framework UI)
| Hook | Perché |
|---|---|
useState |
Stato locale (form, input, UI) |
useEffect |
Fetch API, persistenza su localStorage |
useContext |
Accesso allo stato globale |
useReducer |
Gestione di stato complesso (encounter, roster, settings) |
useMemo |
Ottimizzazione liste e filtri |
useCallback |
Stabilità delle funzioni |
useRef |
Accesso DOM (dice roller, popup) |
src/
├── app/
│ ├── providers/
│ ├── state/
│ ├── router.tsx
│ └── App.tsx
│
├── features/
│ ├── roster/ # Creazione personaggi (PC / NPC / Mob)
│ ├── encounter/ # Gestione combattimenti
│ ├── monsters/
│ ├── spells/
│ └── items/
│
├── shared/
│ ├── api/
│ └── components/
│
├── styles/
│ ├── theme.css
│ └── layout.css
│
└── main.tsx