Skip to content

ionutale/calcolatore-mance-svelte

Repository files navigation

Calcolatore Mance Staff

Deploy to GitHub Pages

Un'applicazione web semplice e intuitiva per dividere le mance in modo equo tra i membri dello staff di ristoranti, bar e locali. Costruita con SvelteKit e Tailwind CSS.

🌟 Caratteristiche

  • Calcolo automatico: Divisione equa delle mance basata sui punti assegnati a ciascun membro dello staff
  • Interfaccia intuitiva: Design moderno e responsive con supporto per dispositivi mobili
  • Tema scuro/chiaro: Adattabile alle preferenze dell'utente
  • Persistenza dati: Salvataggio automatico dei dati nel browser locale
  • Ordinamento flessibile: PossibilitΓ  di ordinare lo staff per nome o punti
  • Validazione input: Controlli per garantire dati corretti
  • Notifiche: Messaggi di feedback per l'utente

πŸš€ Demo

πŸ‘‰ Prova l'app live

Screenshot Calcolatore Mance Staff
Anteprima dell'app

πŸ“± Come funziona

  1. Inserisci il totale delle mance da dividere
  2. Aggiungi i membri dello staff con nome e punti (da 1 a 10)
  3. Visualizza le quote calcolate automaticamente per ciascun membro
  4. Ordina e gestisci la lista come preferisci

Sistema di punteggio

  • I punti rappresentano il contributo di ciascun membro (es. ore lavorate, responsabilitΓ , performance)
  • La divisione avviene in base alla proporzione: quota = (punti_membro / punti_totali) Γ— totale_mance

πŸ› οΈ Tecnologie utilizzate

  • Framework: SvelteKit - Framework moderno per applicazioni web
  • Styling: Tailwind CSS - Framework CSS utility-first
  • Tipografia: Google Fonts - Inter
  • Deployment: GitHub Pages con GitHub Actions
  • Build tool: Vite

πŸ—οΈ Sviluppo locale

Prerequisiti

  • Node.js (versione 18 o superiore)
  • npm o pnpm

Installazione

  1. Clona il repository:
git clone https://github.com/ionutale/calcolatore-mance-svelte.git
cd calcolatore-mance-svelte
  1. Installa le dipendenze:
npm install
  1. Avvia il server di sviluppo:
npm run dev
  1. Apri http://localhost:5173 nel browser

Comandi disponibili

# Sviluppo
npm run dev          # Avvia server di sviluppo
npm run build        # Build per produzione
npm run preview      # Preview build locale

# QualitΓ  codice
npm run check        # TypeScript e Svelte check
npm run lint         # Linting
npm run format       # Formattazione codice

# Test
npm run test         # E2E tests con Playwright

πŸš€ Deployment

L'app viene automaticamente deployata su GitHub Pages tramite GitHub Actions:

  1. Push su main: Il workflow si attiva automaticamente
  2. Build: Installa dipendenze e build dell'app
  3. Deploy: Carica i file statici su GitHub Pages

Risoluzione problemi (404 su GitHub Pages)

Se aprendo la demo vedi una pagina 404:

  • Verifica in GitHub: Settings β†’ Pages β†’ Build and deployment che la Source sia impostata su GitHub Actions.
  • Controlla lo stato dei workflow: Actions β†’ workflow "Deploy to GitHub Pages" deve essere success.
  • Attendi 1-2 minuti dopo il primo deploy: l'abilitazione di Pages non Γ¨ istantanea.
  • Forza il refresh senza cache: macOS Cmd+Shift+R.

Note tecniche: il progetto usa @sveltejs/adapter-static con paths.relative = true e un file .nojekyll durante il deploy per servire correttamente la cartella _app/ sotto il percorso /calcolatore-mance-svelte/.

Configurazione manuale

Per deployare manualmente:

npm run build

I file buildati saranno nella cartella build/ e possono essere serviti da qualsiasi server statico.

πŸ“ Struttura progetto

src/
β”œβ”€β”€ app.html              # Template HTML principale
β”œβ”€β”€ app.d.ts              # TypeScript declarations
β”œβ”€β”€ lib/
β”‚   └── TipCalculator.svelte  # Componente principale
└── routes/
    β”œβ”€β”€ +page.server.js   # Configurazione prerender
    β”œβ”€β”€ +page.svelte      # Pagina principale
    └── +layout.svelte    # Layout dell'app

🎨 Personalizzazione

Tema

L'app supporta temi chiaro e scuro che vengono salvati automaticamente nelle preferenze del browser.

Stili

Gli stili sono gestiti con Tailwind CSS. Le classi sono configurate per:

  • Responsive design (mobile-first)
  • Dark mode support
  • Transizioni fluide
  • AccessibilitΓ 

🀝 Contributi

Contributi sono benvenuti! Per contribuire:

  1. Fork il progetto
  2. Crea un branch per la tua feature (git checkout -b feature/nuova-feature)
  3. Commit delle modifiche (git commit -m 'Aggiungi nuova feature')
  4. Push del branch (git push origin feature/nuova-feature)
  5. Apri una Pull Request

πŸ“„ Licenza

Questo progetto Γ¨ distribuito sotto licenza MIT. Vedi il file LICENSE per maggiori dettagli.

πŸ“ž Contatti

Per domande o suggerimenti:

  • Apri una issue su GitHub
  • Contribuisci con una pull request

Sviluppato con ❀️ per la comunità dei ristoratori italiani

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published