Initial commit: demo sito clinica veterinaria
This commit is contained in:
295
SETUP_ISTRUZIONI.md
Normal file
295
SETUP_ISTRUZIONI.md
Normal file
@@ -0,0 +1,295 @@
|
||||
# 🏥 Clinica Veterinaria Formiginese - Guida di Installazione
|
||||
|
||||
## Requisiti di Sistema
|
||||
|
||||
- **Node.js**: versione 18.x o superiore
|
||||
- **npm** o **pnpm**: gestore pacchetti
|
||||
- **Linux/Unix**: per il server di produzione
|
||||
- **Porta disponibile**: 3000 (sviluppo) o 5000 (produzione)
|
||||
|
||||
---
|
||||
|
||||
## 📦 Struttura del Pacchetto
|
||||
|
||||
```
|
||||
clinica-deploy/
|
||||
├── clinica-app/ # Sorgenti React completi
|
||||
│ ├── client/ # Frontend React
|
||||
│ ├── server/ # Backend Express
|
||||
│ ├── package.json # Dipendenze
|
||||
│ └── ...
|
||||
├── assets/ # Tutte le immagini (7 file)
|
||||
│ ├── hero_dog_cat.jpg
|
||||
│ ├── hero_dog.jpg
|
||||
│ ├── hero_cat.jpg
|
||||
│ ├── clinica_sede1.png
|
||||
│ ├── clinica_ingresso1.png
|
||||
│ ├── clinica_ingresso2.png
|
||||
│ └── clinica_ingresso3.webp
|
||||
└── SETUP_ISTRUZIONI.md # Questo file
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Installazione Passo-Passo
|
||||
|
||||
### 1. Estrai il pacchetto ZIP
|
||||
|
||||
```bash
|
||||
unzip clinica-veterinaria-deploy.zip
|
||||
cd clinica-deploy
|
||||
```
|
||||
|
||||
### 2. Copia le immagini nel progetto
|
||||
|
||||
```bash
|
||||
cp -r assets/* clinica-app/client/public/images/
|
||||
mkdir -p clinica-app/client/public/images
|
||||
```
|
||||
|
||||
### 3. Installa le dipendenze
|
||||
|
||||
```bash
|
||||
cd clinica-app
|
||||
npm install
|
||||
# oppure se usi pnpm:
|
||||
pnpm install
|
||||
```
|
||||
|
||||
### 4. Aggiorna i percorsi delle immagini
|
||||
|
||||
Apri il file `clinica-app/client/src/components/HeroSection.tsx` e sostituisci gli URL CDN con percorsi locali:
|
||||
|
||||
**Prima (URL CDN):**
|
||||
```javascript
|
||||
const heroImages = [
|
||||
{
|
||||
url: "https://d2xsxph8kpxj0f.cloudfront.net/310519663483796440/DLUbzKbSnCG3dLeob4sLeC/ChatGPTImage28mar2026,18_49_09_7d867bcd.png",
|
||||
alt: "Clinica Veterinaria Formiginese - Sede esterna",
|
||||
},
|
||||
// ...
|
||||
];
|
||||
```
|
||||
|
||||
**Dopo (Percorsi locali):**
|
||||
```javascript
|
||||
const heroImages = [
|
||||
{
|
||||
url: "/images/clinica_sede1.png",
|
||||
alt: "Clinica Veterinaria Formiginese - Sede esterna",
|
||||
},
|
||||
{
|
||||
url: "/images/hero_dog_cat.jpg",
|
||||
alt: "Golden retriever e gatto tabby insieme in un prato soleggiato",
|
||||
},
|
||||
{
|
||||
url: "/images/clinica_ingresso1.png",
|
||||
alt: "Clinica Veterinaria Formiginese - Ingresso e sala d'attesa",
|
||||
},
|
||||
{
|
||||
url: "/images/hero_dog.jpg",
|
||||
alt: "Ritratto maestoso di un Labrador",
|
||||
},
|
||||
{
|
||||
url: "/images/clinica_ingresso2.png",
|
||||
alt: "Clinica Veterinaria Formiginese - Ingresso con logo",
|
||||
},
|
||||
{
|
||||
url: "/images/hero_cat.jpg",
|
||||
alt: "Ritratto maestoso di un Maine Coon",
|
||||
},
|
||||
{
|
||||
url: "/images/clinica_ingresso3.webp",
|
||||
alt: "Clinica Veterinaria Formiginese - Ingresso principale",
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
### 5. Build per produzione
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
Questo creerà una cartella `dist/` con il sito compilato e ottimizzato.
|
||||
|
||||
### 6. Avvia il server di produzione
|
||||
|
||||
```bash
|
||||
npm run start
|
||||
```
|
||||
|
||||
Il sito sarà disponibile a: **http://localhost:3000**
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Configurazione Avanzata
|
||||
|
||||
### Cambiare la porta
|
||||
|
||||
Modifica il file `server/index.ts`:
|
||||
|
||||
```typescript
|
||||
const port = process.env.PORT || 5000; // Cambia 5000 con la porta desiderata
|
||||
```
|
||||
|
||||
### Configurare Nginx come reverse proxy
|
||||
|
||||
Se usi Nginx, crea un file di configurazione:
|
||||
|
||||
```nginx
|
||||
server {
|
||||
listen 80;
|
||||
server_name tuodominio.it;
|
||||
|
||||
location / {
|
||||
proxy_pass http://localhost:3000;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection 'upgrade';
|
||||
proxy_set_header Host $host;
|
||||
proxy_cache_bypass $http_upgrade;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Usare PM2 per gestire il processo
|
||||
|
||||
```bash
|
||||
npm install -g pm2
|
||||
pm2 start npm --name "clinica" -- start
|
||||
pm2 save
|
||||
pm2 startup
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📝 Modifiche Personalizzate
|
||||
|
||||
### Cambiare il numero di telefono
|
||||
|
||||
File: `client/src/components/HeroSection.tsx`
|
||||
|
||||
```typescript
|
||||
<a href="tel:0598396263"> // Cambia questo numero
|
||||
```
|
||||
|
||||
### Cambiare i testi
|
||||
|
||||
Tutti i testi sono nei componenti React in `client/src/components/`:
|
||||
|
||||
- `HeroSection.tsx` - Titolo, sottotitolo, CTA
|
||||
- `AboutSection.tsx` - Descrizione della clinica
|
||||
- `ServicesSection.tsx` - Descrizione servizi
|
||||
- `TeamSection.tsx` - Nomi e specializzazioni
|
||||
- `NewsSection.tsx` - Articoli del blog
|
||||
- `BookingSection.tsx` - Form prenotazioni
|
||||
- `AuthSection.tsx` - Registrazione/Login
|
||||
- `Footer.tsx` - Informazioni di contatto
|
||||
|
||||
### Cambiare i colori
|
||||
|
||||
File: `client/src/index.css`
|
||||
|
||||
Cerca le variabili OKLCH e modifica i valori:
|
||||
|
||||
```css
|
||||
--primary: oklch(0.623 0.214 259.815); /* Blu petrolio */
|
||||
--accent: oklch(0.967 0.001 286.375); /* Verde acqua */
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Troubleshooting
|
||||
|
||||
### Errore: "npm: command not found"
|
||||
|
||||
Installa Node.js:
|
||||
```bash
|
||||
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
|
||||
sudo apt-get install -y nodejs
|
||||
```
|
||||
|
||||
### Errore: "Port 3000 already in use"
|
||||
|
||||
Cambia la porta:
|
||||
```bash
|
||||
PORT=5000 npm start
|
||||
```
|
||||
|
||||
### Immagini non si caricano
|
||||
|
||||
Verifica che le immagini siano in `client/public/images/` e che i percorsi in `HeroSection.tsx` siano corretti.
|
||||
|
||||
---
|
||||
|
||||
## 📊 Struttura dei Componenti
|
||||
|
||||
```
|
||||
client/src/
|
||||
├── components/
|
||||
│ ├── Navbar.tsx # Barra di navigazione
|
||||
│ ├── HeroSection.tsx # Carousel hero con immagini
|
||||
│ ├── ServicesSection.tsx # Radiologia, Chirurgia, Laboratorio
|
||||
│ ├── AboutSection.tsx # Chi Siamo
|
||||
│ ├── TeamSection.tsx # I 6 professionisti
|
||||
│ ├── NewsSection.tsx # Blog/News
|
||||
│ ├── BookingSection.tsx # Prenotazione visite
|
||||
│ ├── AuthSection.tsx # Registrazione/Login
|
||||
│ ├── Footer.tsx # Footer
|
||||
│ └── ui/ # Componenti shadcn/ui
|
||||
├── pages/
|
||||
│ ├── Home.tsx # Pagina principale
|
||||
│ └── NotFound.tsx # Pagina 404
|
||||
├── App.tsx # Router e layout
|
||||
├── index.css # Stili globali
|
||||
└── main.tsx # Entry point React
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Design System
|
||||
|
||||
**Colori:**
|
||||
- Blu petrolio (primary): `#1B4F72`
|
||||
- Verde acqua (accent): `#4ECDC4`
|
||||
- Sabbia (secondary): `#F5E6D3`
|
||||
- Bianco (background): `#FFFFFF`
|
||||
|
||||
**Font:**
|
||||
- Display: Cormorant Garamond (serif)
|
||||
- Body: Nunito Sans (sans-serif)
|
||||
|
||||
**Spacing:**
|
||||
- Base unit: 4px (Tailwind default)
|
||||
- Container max-width: 1280px
|
||||
|
||||
---
|
||||
|
||||
## 📞 Supporto
|
||||
|
||||
Per domande o problemi:
|
||||
1. Controlla i log: `npm run dev` per vedere gli errori in tempo reale
|
||||
2. Verifica che Node.js sia aggiornato: `node --version`
|
||||
3. Pulisci la cache: `rm -rf node_modules && npm install`
|
||||
|
||||
---
|
||||
|
||||
## ✅ Checklist Pre-Produzione
|
||||
|
||||
- [ ] Tutte le immagini sono copiate in `client/public/images/`
|
||||
- [ ] I percorsi delle immagini in `HeroSection.tsx` sono aggiornati
|
||||
- [ ] Il numero di telefono è corretto
|
||||
- [ ] I testi sono personalizzati
|
||||
- [ ] La build è stata creata: `npm run build`
|
||||
- [ ] Il server parte senza errori: `npm start`
|
||||
- [ ] Le immagini si caricano correttamente
|
||||
- [ ] Il carousel funziona (3 secondi per immagine)
|
||||
- [ ] I pulsanti CTA funzionano
|
||||
- [ ] Il sito è responsive su mobile
|
||||
|
||||
---
|
||||
|
||||
**Versione:** 1.0.0
|
||||
**Data:** 31 Marzo 2026
|
||||
**Tecnologie:** React 19, Node.js, Express, Tailwind CSS 4
|
||||
Reference in New Issue
Block a user