# HiveMind ## Piattaforma collaborativa per la raccolta, votazione e discussione di idee

Single Page Application — Progetto di Tecnologie Web, Università degli Studi di Napoli Federico II (A.A. 2023/2024)

Autore: Francesco Terrecuso

---

📖 Indice

• Cos'è HiveMind
• Funzionalità principali
• Architettura
• Stack tecnologico
• Struttura del repository
• Avvio rapido con Docker
• Avvio in modalità sviluppo
• API e documentazione Swagger
• Autenticazione

---

🧠 Cos'è HiveMind

HiveMind è una Single Page Application pensata per raccogliere, votare e discutere idee in modo collaborativo, con un'interfaccia reattiva e un backend RESTful separato.

Gli utenti registrati possono proporre nuove idee, votare quelle già pubblicate ed intervenire con commenti (che supportano la formattazione Markdown), in un flusso simile a una bacheca di brainstorming pubblico.

✨ Funzionalità principali

• 🔐 Autenticazione utente — registrazione, login e sessioni protette da JWT
• 💡 Gestione idee — creazione, consultazione e validazione (lunghezza massima) delle proposte
• 👍 Sistema di voto — gli utenti possono votare le idee pubblicate
• 💬 Commenti in Markdown — discussione sotto ogni idea, con rendering Markdown lato frontend
• 👤 Profilo utente — pagina profilo personale
• 📑 API documentate — specifica OpenAPI/Swagger navigabile e testabile da browser

🏗️ Architettura

Il progetto segue un'architettura client-server disaccoppiata:

┌─────────────────────┐        REST API        ┌──────────────────────┐
│     Frontend         │ ──────────────────────▶ │      Backend          │
│  Angular 18 (SPA/SSR) │ ◀────────────────────── │  Express + Node.js    │
│  Angular Material     │        JSON/JWT         │  Sequelize + SQLite   │
│  Tailwind CSS         │                         │  Swagger (/api-docs)  │
└─────────────────────┘                         └──────────────────────┘

• Il frontend consuma le API REST esposte dal backend tramite un servizio dedicato (rest-backend.service.ts) e gestisce l'autenticazione con un interceptor HTTP che allega il token JWT alle richieste.
• Il backend espone rotte separate per autenticazione, idee, voti, commenti e homepage, protette da un middleware di autorizzazione (enforceAuthentication).
• I due servizi sono containerizzati separatamente e orchestrati con Docker Compose.

🧩 Stack tecnologico

Frontend (Angular 18)

Tecnologia	Ruolo
Angular	Framework SPA/SSR basato su TypeScript
Angular Material	Componenti UI secondo le linee guida Material Design
Tailwind CSS	Utility-first CSS per layout personalizzati
ngx-toastr	Notifiche e alert
ngx-markdown / marked	Rendering dei contenuti Markdown (es. commenti)
jwt-decode	Decodifica del token JWT lato client

Backend (Express 4)

Tecnologia	Ruolo
Express	Framework HTTP per Node.js
Sequelize	ORM per l'interazione con il database
SQLite 3	Database relazionale leggero basato su file
JsonWebToken	Generazione e verifica dei token JWT
swagger-jsdoc / swagger-ui-express	Generazione e visualizzazione della documentazione API
cors	Gestione delle richieste cross-origin
morgan	Logging delle richieste HTTP

Containerizzazione

Componente	Porta interna	Porta esposta
Frontend	4200	80
Backend	3000	3000

📁 Struttura del repository

Project-HiveMind/
├── docker-compose.yaml
├── backend/
│   ├── index.js                  # entry point Express + setup Swagger
│   ├── controllers/              # logica applicativa (auth, idee, homepage)
│   ├── routes/                   # definizione endpoint REST (idee, voti, commenti, auth)
│   ├── middleware/                # autorizzazione JWT, validazione idee
│   ├── models/                   # modelli Sequelize (user, idea, comment, vote)
│   ├── database.db               # database SQLite
│   └── dockerfile
└── frontend/
    ├── src/app/
    │   ├── _services/            # auth, rest-backend, markdown
    │   ├── _guards/               # route guard di autenticazione
    │   ├── _interceptors/         # interceptor JWT
    │   ├── homepage/              # bacheca idee, form creazione, commenti, profilo
    │   ├── login/ · signup/       # autenticazione utente
    │   ├── navbar/ · footer/      # layout condiviso
    │   └── welcome-page/          # landing page
    ├── angular.json
    ├── tailwind.config.js
    └── dockerfile

🚀 Avvio rapido con Docker

Prerequisiti

• Docker
• Docker Compose

Download e avvio

git clone https://github.com/terrecruis/Project-HiveMind.git
cd Project-HiveMind
docker-compose up --build

L'applicazione sarà disponibile su:

• 🌐 Frontend: http://localhost:80
• 🔧 Backend: http://localhost:3000

🛠️ Avvio in modalità sviluppo

Se preferisci lavorare senza Docker:

Backend

cd backend
npm install
npm start          # avvia con nodemon su http://localhost:3000

Frontend

cd frontend
npm install
npm start           # avvia il dev server Angular su http://localhost:4200

📑 API e documentazione Swagger

Il backend espone automaticamente la documentazione interattiva OpenAPI, generata dalle annotazioni JSDoc presenti nelle route:

http://localhost:3000/api-docs

Da qui è possibile consultare e testare direttamente tutti gli endpoint disponibili (idee, voti, commenti, autenticazione).

🔐 Autenticazione

L'accesso alle rotte protette è regolato da un middleware (enforceAuthentication) che verifica la presenza e la validità di un JSON Web Token. Il token viene:

• rilasciato al login/signup dal backend,
• salvato e allegato automaticamente alle richieste HTTP dal frontend tramite un interceptor Angular,
• verificato lato client da una route guard, per impedire l'accesso a pagine riservate agli utenti non autenticati.

---

*Progetto sviluppato nell'ambito del corso di Tecnologie Web — Università degli Studi di Napoli Federico II*