← Torna ai progetti

DPH - Personal Site && Project Publish

# Info.md – DPH.OVH Sito

Documentazione delle funzionalitĂ  del sito e dello stack tecnologico (linguaggi e framework) utilizzati.

---

## Indice

1. [FunzionalitĂ ](#funzionalitĂ )

2. [Linguaggi e framework](#linguaggi-e-framework)

---

## FunzionalitĂ 

### Sito pubblico

- Home /): presentazione DPH.OVH, David Phirtskhalava, link social (X, Skype, Telegram, WhatsApp, LinkedIn, GitHub).

- About /about): Fullstack Developer, skills, features, testimonial.

- Services /services): intro e servizi (Web Applications, Mobile, Desktop, Databases, API, Docker, AI).

- Progetti /portfolio):

- Elenco progetti pubblicati (post con categoria “project” e “Pubblicato”).

- Filtri: ricerca per nome progetto e filtro per linguaggi di programmazione (campo comma-separated nei post).

- Dettaglio progetto in /portfolio/[slug] con titolo, contenuto, galleria immagini, commenti.

- Dettaglio progetto /portfolio/[slug]):

- Contenuto completo (HTML da editor rich text), link stilati.

- Galleria immagini con lightbox: click su un’immagine apre un popup con frecce avanti/indietro e indicatore “1 / N”.

- Commenti: chiunque può lasciare commenti con editor rich text ; è possibile rispondere a un commento (admin loggato o utenti). Commenti e risposte salvati in DB e mostrati al refresh.

- Contact /contact): form contatti, invio email tramite Resend; link WhatsApp, email, social.

- Privacy /privacy): Privacy Policy (IT/EN).

- Cookie banner: consenso cookie, link alla privacy; pulsante “Reset cookie/cache” in dev (parametrizzato da env).

- Footer: link alle pagine principali.

- Tema chiaro/scuro: preferenza utente (cookie + localStorage), toggle in navbar.

- Lingua (i18n): Italiano / English; preferenza salvata in cookie; navbar con switcher lingua.

- Route numeriche: redirect da path testuali (es. /about) a codici numerici (es. /120) e rewrite inverso per servire le pagine; configurazione in next.config e src/lib/routeCodes.ts.

### Area admin

- URL: /admin.

- Login: credenziali da .env ADMIN_USERNAME, ADMIN_PASSWORD), sessione firmata con SESSION_SECRET (cookie httpOnly).

- Gestione post /admin/posts):

- Lista post in sidebar (anteprima, modifica, pubblica/nascondi, elimina).

- Creazione / modifica post: slug, categoria (Progetto/Blog), icona, linguaggi di programmazione (virgola-separati), immagine in evidenza, galleria (fino a 100 immagini), checkbox Pubblicato, campi multilingua (IT/EN) per titolo, summary e contenuto completo con editor rich text (TipTap: grassetto, corsivo, link, immagini, tabelle, ecc.).

- Upload immagini per post tramite API/route dedicata; anteprima post sul sito pubblico.

### Database e modelli

- Post: id, slug, category, published, icon, image, images (array URL), languages (stringa comma-separated), createdAt, updatedAt, campi it/en (title, summary, content).

- Comment: id, postId, parentId (null = commento principale), content (HTML), authorName, authorEmail, isAdmin, createdAt; relazione con Post e risposte annidate (parent/replies).

### Variabili d’ambiente

- DATABASE_URL: connessione DB (PostgreSQL o SQLite).

- ADMIN_USERNAME, ADMIN_PASSWORD, SESSION_SECRET: login admin.

- RESEND_API_KEY, RESEND_FROM_EMAIL, CONTACT_TO_EMAIL: form contatti.

- NEXT_PUBLIC_SHOW_DEV_RESET: mostra in navbar il pulsante “Reset cookie/cache” in sviluppo (valori: 1, true, yes).

---

## Linguaggi e framework

### Linguaggi

- TypeScript: codice applicazione e tipizzazione.

- HTML / CSS: markup e stili (Tailwind, CSS variabili, font Google).

- SQL / Prisma: schema e query verso il database (PostgreSQL nello schema attuale).

### Framework e runtime

- React 19: UI e componenti.

- Next.js 15: App Router, SSR/SSG, API routes, redirect/rewrite, configurazione output: "standalone", Turbopack in dev.

### Styling e UI

- Tailwind CSS 3: utility-first CSS, tema (variabili per colori, font), font custom (Plus Jakarta Sans, JetBrains Mono).

- PostCSS e Autoprefixer: elaborazione CSS.

### Editor e contenuti

- TipTap (v3): editor rich text per contenuti post e commenti.

- Pacchetti: @tiptap/react, @tiptap/starter-kit, @tiptap/pm.

- Estensioni: underline, link, image, text-style, color, highlight, text-align, subscript, superscript, font-family, table (table, row, cell, header).

- Uso in: creazione/modifica post (admin), form commenti e risposte (pagina progetto).

### Database e ORM

- Prisma 6: ORM, schema in prisma/schema.prisma, client TypeScript, migrazioni / db push.

- PostgreSQL: database di produzione/sviluppo (configurabile con SQLite tramite DATABASE_URL).

### Email e servizi esterni

- Resend: invio email dal form contatti (API key e mittente in env).

### Altre librerie

- simple-icons: icone (es. social).

- ESLint + eslint-config-next: linting.

- Node (v18+): runtime; script db:init per inizializzazione DB.

### Build e tooling

- TypeScript 5.6: compilazione e tipi.

- Prisma Generate: generazione client da schema (incluso in npm run build).

---

## Riepilogo stack

| Categoria | Tecnologia |

|------------|--------------------|

| Linguaggio | TypeScript |

| Framework | React 19, Next.js 15 |

| Styling | Tailwind CSS 3 |

| Database | PostgreSQL, Prisma 6 |

| Editor | TipTap 3 |

| Email | Resend |

| Font | Plus Jakarta Sans, JetBrains Mono |

Commenti

    Aggiungi commento