Il Roaster di Personaggi Interattivo
Benvenuto in SquadBuilder!
Questo progetto è un sito web dinamico che funge da roaster di personaggi appartenenti a diverse categorie.
Gli utenti possono visualizzare i personaggi, leggere le loro descrizioni e, se registrati, costruire la propria squadra personalizzata.
Gli amministratori hanno inoltre la possibilità di gestire il database dei personaggi (aggiunta, modifica e cancellazione).
Assicurati di avere installato:
- Node.js (versione LTS consigliata)
Apri il terminale e segui questi passaggi:
# Clona il repository (se necessario)
git clone https://github.com/tuo-utente/SquadBuilder.git
# Installa le dipendenze Node.js
npm i
# Avvia l'applicazione
node app.jsL'applicazione sarà accessibile all’indirizzo:
👉 http://localhost:3000
(o quello specificato nel file app.js)
Il database è già stato popolato con 6 personaggi e 2 utenti di test.
| Ruolo | Username | Password | Funzionalità |
|---|---|---|---|
| 👤 Utente Normale | Manu |
Emanuele1 |
Visualizzazione, aggiunta e rimozione di personaggi dalla propria squadra |
| 🛡️ Amministratore | Admin |
Admin2024 |
Tutte le funzionalità utente + aggiunta, modifica e rimozione di personaggi dal roster principale |
Per accedere, clicca sull’icona del profilo situata sulla destra della navbar.
- Per la funzionalità di aggiunta di un nuovo personaggio, è già presente un’immagine di test:
📁
public/imgs/characters/pTest.jpeg - L’amministratore può caricare liberamente immagini personalizzate.
| Area | Requisito | Descrizione |
|---|---|---|
| Frontend | Stile | Uso del componente Carousel di Bootstrap per la presentazione dei personaggi |
| Frontend | DOM | Manipolazione dinamica lato client |
| Frontend | Eventi | Gestione di almeno un evento CSS animato per migliorare l’esperienza utente |
| Frontend | Form | Utilizzo degli stili di validazione built-in HTML5 |
| Backend | Framework | Utilizzo di Express.js per la gestione del server |
| Backend | Route | Implementazione modulare tramite express.Router() |
| Database | Accesso Dati | Interazione tramite Knex, query builder SQL di livello intermedio |
| Sicurezza | Autenticazione | Gestione del login e della sessione tramite Passport.js |
Il progetto è organizzato in moduli separati per garantire chiarezza e manutenibilità. Le rotte, la logica di business e il database sono gestiti in modo indipendente.
L’app utilizza express.Router() per separare:
- Rotte di autenticazione
- Rotte di gestione utente
- Rotte amministrative
- Rotte di gestione dei personaggi
Questo approccio migliora la scalabilità e la leggibilità del codice.
L’interazione con il database avviene tramite Knex, che fornisce un’interfaccia sicura e programmatica per la costruzione delle query SQL. In questo modo, la logica di accesso ai dati rimane separata dai controller principali.
L’autenticazione utilizza la Local Strategy di Passport.js (username/password). Le sessioni vengono gestite in modo sicuro per distinguere i ruoli di:
- Utente Normale
- Amministratore
La manipolazione del DOM lato client fornisce un’esperienza utente interattiva e immediata, ad esempio per:
- aggiungere/rimuovere personaggi dalla propria squadra,
- aggiornare il roster in tempo reale.
- Node.js
- Express.js
- Knex.js
- Passport.js
- Bootstrap 5
- Vanilla JavaScript
- HTML5 / CSS3
Fornire una piattaforma interattiva e intuitiva dove gli utenti possano:
- esplorare personaggi di varie categorie,
- creare e gestire la propria squadra ideale,
- interagire con un backend sicuro e modulare.
SquadBuilder è stato sviluppato come progetto didattico/dimostrativo da Emanuele Marzone. Buon divertimento nella costruzione della tua squadra! ⚔️