CMSmall — Small Content Manager System
01/08/2023
CMSmall è un piccolo content management system che ho sviluppato per il corso di Applicazioni Web al Politecnico di Torino, dove il progetto ha ricevuto la valutazione finale di 30/30.
Credenziali demo
stefano@test.com/pwd— Useralberto@test.com/pwd— Adminanna@test.com/pwd— Userdaniela@test.com/pwd— Userdavide@test.com/pwd— User
L’obiettivo era progettare e implementare un CMS semplice ma completo, con un front-office pubblico per i visitatori e un back-office privato per gli utenti autenticati. I visitatori possono leggere le pagine pubblicate, mentre gli utenti loggati possono accedere ai contenuti non pubblicati e gestire le pagine dall’area amministrativa.
Il frontend è una single-page application React costruita con Vite, React Router e React Bootstrap. Ho progettato l’interfaccia intorno ai due flussi principali: consultazione dei contenuti pubblicati e gestione delle pagine nel back-office. L’editor permette di creare e aggiornare pagine composte da blocchi diversi, come header, testo e immagini, includendo anche validazione lato client.
Il backend è una REST API Express con database SQLite. Gestisce utenti, sessioni, pagine, contenuti, immagini e nome del sito. L’autenticazione usa Passport Local e sessioni server-side, mentre le password sono verificate tramite hash con salt. L’API include anche controlli basati sui ruoli: gli utenti normali gestiscono le proprie pagine, mentre gli amministratori hanno permessi più ampi.
Dal punto di vista del modello dati, il progetto ruota attorno a utenti, pagine e contenuti. Una pagina ha metadati come titolo, autore, data di creazione e data di pubblicazione, mentre il corpo è composto da blocchi ordinati. Questa struttura rende l’applicazione abbastanza flessibile da supportare layout diversi senza hard-codare ogni pagina nel frontend.
Ho lavorato anche per rendere il progetto distribuibile. Frontend e backend sono containerizzati come servizi separati: l’app React viene buildata e servita da Nginx, mentre il server Express gestisce API e risorse immagini. Lo stack Docker Compose collega i servizi tramite una rete interna e Nginx inoltra le richieste /api/ e /images/ al backend.
Questo progetto mi ha permesso di consolidare diverse competenze full-stack in un’applicazione completa: architettura client-server, REST API, modellazione relazionale, autenticazione con sessioni, permessi basati sui ruoli, interfaccia React e preparazione al deploy.
Repo: https://github.com/AlbertoHugonin/SmallContentManagerSystem • Live: https://contentmanager.albertohugonin.it/#