Pierre Houllière

Micro-CMS pour bornes interactives

Période : Stage 1
Environnement technologique : React, Next.js, TailwindCSS, Golang, MongoDB, Docker, Nginx
Compétences mobilisées :
- - B1.3 : Développer la présence en ligne de l'organisation
  
  Participer à la valorisation de l'image de l'organisation sur les médias numériques en tenant compte du cadre juridique et des enjeux économiques, Participer à l'évolution d'un site Web exploitant les données de l'organisation
- - B1.4 : Travailler en mode projet
  
  Analyser les objectifs et les modalités d'organisation d'un projet, Planifier les activités
- - B1.5 : Mettre à disposition des utilisateurs un service informatique
  
  Déployer un service

Lors de mon stage chez Prod’Advance, j’ai réalisé la refonte complète de l’interface utilisateur d’un micro-CMS nommé Skald’aura, destiné à gérer le contenu de bornes interactives (Totem) pour l’accueil numérique dans des établissements comme les Ehpad. Ce projet m’a permis de travailler sur une architecture moderne (frontend en Next.js et TailwindCSS, backend en Go avec une base de données MongoDB), tout en intégrant des fonctionnalités avancées comme le glisser-déposer, le mode sombre, et une expérience utilisateur optimisée.

Les missions principales que j’ai accomplies incluent :

Migration d’une SPA vers Next.js pour améliorer l’ergonomie et réduire la dette technique.
Déploiement de l’application sur un serveur de développement via Docker et configuration d’un proxy inverse avec Nginx.
Ajout de nouvelles routes API pour gérer les éléments et sous-éléments du CMS.

Structure des données du micro-CMS

Je devais répondre à plusieurs problématiques, notamment :

Interface utilisateur repensée pour une gestion intuitive des zones, éléments et sous-éléments.
Système de glisser-déposer pour réorganiser les contenus et uploader des images.
Déploiement automatisé avec Docker et gestion des conteneurs sur un serveur dédié.

Interface utilisateur final

Extrait du code pour la barre latérale

Pour travailler en mode projet, nous avons utilisé l’instance GitLab disponible sur le serveur de l’entreprise. Ainsi, mon tuteur pouvait visualiser mon stade d’avancement à tout moment.

Ce projet est utilisé par tous les clients de l’entreprise, pour qu’ils puissent modifier le conten ude leurs bornes de manière autonome.

Le projet est hébergé via Docker sur le serveur de l’entreprise.

Extrait du Dockerfile du projet

Les API étant également hébergé sur ce serveur, j’ai mit en place un reverse proxy.

Configuration du reverse proxy

Micro-CMS pour bornes interactives

- B1.3 : Développer la présence en ligne de l'organisation

- B1.4 : Travailler en mode projet

- B1.5 : Mettre à disposition des utilisateurs un service informatique