DeskVerse Web

DeskVerse Web è un'applicazione web full-stack che fornisce un sistema di autenticazione utente con interfaccia moderna. Il frontend è sviluppato con React e TypeScript, mentre il backend utilizza PHP con MariaDB per la gestione del database. L'app permette la registrazione, il login e la gestione di sessioni sicure tramite cookie.

Caratteristiche Principali

• Autenticazione Utente: Registrazione e login con validazione email e password hashata.
• Gestione Sessioni: Sessioni sicure con rigenerazione ID e cookie HTTP-only.
• Interfaccia Responsiva: Utilizza Tailwind CSS per un design moderno e dark-themed.
• API RESTful: Endpoint backend per operazioni di auth con CORS abilitato.
• Contesto React: Gestione dello stato di autenticazione con React Context.

Tecnologie Utilizzate

Frontend

• React 19 con TypeScript
• Vite per il build e development server
• Tailwind CSS per lo styling
• Axios per le chiamate API
• ESLint per la linting

Backend

• PHP 8+ con PDO per il database
• MariaDB/MySQL per il storage
• Sessioni PHP con configurazione sicura

Database

• Tabella users per memorizzare username, email e password hashata (usando password_hash con ARGON2ID).

Struttura del Progetto

DeskVerse_Web/
├── backend/
│   ├── .env                # Variabili d'ambiente (DB credentials)
│   ├── .htaccess           # Configurazione Apache per rewrite
│   ├── bootstrap.php       # Inizializzazione CORS, env e sessioni
│   ├── db.php              # Connessione PDO al database
│   └── api/
│       ├── login.php       # Endpoint per login
│       ├── register.php    # Endpoint per registrazione
│       ├── logout.php      # Endpoint per logout
│       └── status.php      # Verifica stato sessione
├── frontend/
│   ├── .env                # VITE_API_URL per base URL backend
│   ├── package.json        # Dipendenze e script
│   ├── vite.config.ts      # Configurazione Vite
│   ├── tailwind.config.js  # Configurazione Tailwind
│   ├── src/
│   │   ├── App.tsx         # Componente principale (routing auth/dashboard)
│   │   ├── main.tsx        # Entry point React
│   │   ├── components/
│   │   │   ├── AuthPage.tsx # Form di login/registrazione
│   │   │   └── DashboardPage.tsx # Pagina dashboard (post-login)
│   │   ├── context/
│   │   │   └── AuthContext.tsx # Provider per stato auth
│   │   └── services/
│   │       └── api.ts      # Istanza Axios configurata
│   └── ... (altri file di config)
├── database.sql            # Script SQL per creare tabella users
└── README.md               # Questo file

Prerequisiti

• Node.js 18+ (per frontend)
• PHP 8+ con estensione PDO e MySQLi
• MariaDB/MySQL server
• Apache o server web simile (per backend)
• Composer (opzionale, non usato qui)

Installazione

1. Clona il Repository:

   git clone <url-repo>
   cd DeskVerse_Web
   

2. Setup Database:

   • Crea un database MariaDB/MySQL (es. deskverse_db).
   • Esegui lo script SQL:

     mysql -u root -p deskverse_db < database.sql
     

   • Aggiorna backend/.env con le credenziali DB:

     DB_HOST=127.0.0.1
     DB_NAME=deskverse_db
     DB_USER=tuo_user
     DB_PASS=tuo_password
     

3. Setup Backend:

   • Assicurati che Apache serva la cartella backend/ (o usa php -S localhost:8000 da backend/).
   • Il file .htaccess gestisce le richieste API.
   • Includi backend/bootstrap.php in tutti gli endpoint.

4. Setup Frontend:

   • Entra nella cartella frontend:

     cd frontend
     

   • Installa dipendenze:

     npm install
     

   • Aggiorna frontend/.env:

     VITE_API_URL=http://localhost/backend/api/
     

     (Cambia se il backend è su un altro host/porta).

Esecuzione

Backend

• Avvia il server PHP (sviluppo):

  cd backend
  php -S localhost:8000
  

• O configura Apache per servire backend/ come root virtuale.

Frontend

• Avvia il dev server:

  cd frontend
  npm run dev
  

• Apri http://localhost:5173 nel browser.

L'app caricherà la pagina di auth. Dopo login, mostrerà il dashboard.

Utilizzo

• Registrazione: Inserisci username, email e password (min 8 char).
• Login: Usa email e password.
• Logout: Chiama l'endpoint /logout.php (implementa nel frontend se necessario).
• Verifica Sessione: L'AuthContext controlla automaticamente lo status all'avvio.

Endpoint API

Tutti gli endpoint sono in backend/api/ e restituiscono JSON.

• POST /login.php

  • Body: { "email": "...", "password": "..." }
  • Response: { success: true, user: { id, username } } o errore.

• POST /register.php

  • Body: { "username": "...", "email": "...", "password": "..." }
  • Response: { success: true, message: "..." } o errore (es. duplicati).

• POST /logout.php

  • Distrugge la sessione.

• GET /status.php

  • Verifica se loggato: { loggedIn: true, user: { id, username } }.

Gestione errori: HTTP codes (400, 401, 500) con { success: false, message: "..." }.

Configurazione Sicurezza

• Password: Hashate con password_hash(PASSWORD_ARGON2ID).
• Sessioni: Cookie HTTP-only, SameSite=Lax (o None per HTTPS), lifetime 24h.
• CORS: Configurato per http://localhost:5173 (aggiorna in bootstrap.php per produzione).
• Database: Usa prepared statements per prevenire SQL injection.

Per produzione:

• Abilita HTTPS.
• Cambia Access-Control-Allow-Origin da * al dominio frontend.
• Usa variabili d'ambiente sicure.

Script di Build

• Frontend:

  • npm run build: Build per produzione (output in dist/).
  • npm run preview: Preview build locale.

• Backend: Nessun build; copia i file su server.

Risoluzione Problemi

• CORS Errors: Verifica bootstrap.php e URL frontend.
• DB Connection Fail: Controlla .env e credenziali in db.php.
• Sessione Non Persiste: Assicurati withCredentials: true in Axios e CORS headers.
• Password Reset: Non implementato; estendi l'API se necessario.

Se riscontri issues, controlla i log PHP (error_log) e la console browser.

Contribuzione

1. Fork il repo.
2. Crea un branch: git checkout -b feature/nome-feature.
3. Commit: git commit -m "Aggiungi feature".
4. Push: git push origin feature/nome-feature.
5. Apri una Pull Request.

Rispetta le linee guida in AGENTS.md per stile codice.