CMSmall — Small Content Manager System
8/1/2023
CMSmall is a small content management system I built for the Web Applications course at Politecnico di Torino, where the project received the final grade of 30/30.
Demo credentials
stefano@test.com/pwd— Useralberto@test.com/pwd— Adminanna@test.com/pwd— Userdaniela@test.com/pwd— Userdavide@test.com/pwd— User
The goal was to design and implement a simple but complete CMS, with a public front-office for visitors and a private back-office for authenticated users. Public visitors can read published pages, while logged-in users can access unpublished content and manage pages from the administration area.
The frontend is a React single-page application built with Vite, React Router and React Bootstrap. I designed the interface around the two main flows of the application: browsing published content and managing pages in the back-office. The editor allows users to create and update pages composed of different content blocks, such as headers, text, and images. It also includes client-side validation for required fields, publication dates, and the minimum structure of a page.
The backend is an Express REST API backed by a SQLite database. It manages users, sessions, pages, contents, images, and the site name. Authentication is handled with Passport Local and server-side sessions, while passwords are verified using salted hashes. The API also includes role-based checks: normal users can manage their own pages, while administrators have broader permissions, such as assigning authors and changing the site name.
From a data modeling point of view, the project is centered around three main entities: users, pages, and contents. A page has metadata such as title, author, creation date, and publication date, while its body is built from ordered content blocks. This structure made the application flexible enough to support different page layouts without hard-coding each page in the frontend.
I also worked on making the project deployable. The frontend and backend are containerized as separate services: the React app is built and served by Nginx, while the Express server handles the API and image resources. The Docker Compose stack connects both services through an internal network, and Nginx forwards /api/ and /images/ requests to the backend. This helped me understand how a full-stack application is packaged, configured, and exposed outside a local development environment.
This project allowed me to apply and consolidate several full-stack development skills in a complete web application: designing a client-server architecture, building a REST API, modeling relational data, implementing session-based authentication, handling role-based permissions, creating a usable React interface, and preparing the application for deployment.
Repo: https://github.com/AlbertoHugonin/SmallContentManagerSystem • Live: https://contentmanager.albertohugonin.it/#