01 — Étape du projet
De l'intention visuelle à la maquette.
BeeUs est un projet de plateforme sociale pensée pour faciliter les rencontres et l’intégration des étudiants dans leur ville. Inspiré par les besoins concrets de la vie étudiante, le site propose une expérience fluide et accessible, conçue avec Astro, React, TailwindCSS et PocketBase.
BeeUs est mon projet de second semestre en groupe en BUT MMI. Il s’agit d’une plateforme web imaginée pour proposer des fonctionnalités originales, avec pour objectif de créer une expérience sociale innovante centrée sur les étudiants.
Nous avons choisi ce projet car, en tant qu’étudiants, nous avons nous-mêmes connu l’arrivée dans une nouvelle ville sans repères. Cette expérience nous a permis de nous mettre dans la peau de nos futurs utilisateurs et de donner encore plus de sens à notre travail.
H1
Red Hat Display
H2
Sofia Sans
H3
Sofia Sans
Body
Poppins
Nous avons fait le choix d’utiliser Red Hat Display pour les titres principaux afin de donner du caractère et de la présence à l’identité de BeeUs. Pour les sous-titres, nous avons retenu Poppins, une typographie moderne et polyvalente qui crée un bon équilibre visuel. Enfin, nous avons choisi d’utiliser Montserrat pour le corps de texte qui garantit une lecture fluide et claire, renforçant l’accessibilité et la cohérence du projet.
Nous avons fait le choix d’associer des teintes sobres pour assurer une bonne lisibilité et mettre en valeur le contenu, à des couleurs vives comme le bleu, le violet, le rose et le jaune pour refléter l’énergie et la convivialité de BeeUs. Cet équilibre permet de renforcer la clarté fonctionnelle tout en installant une atmosphère dynamique et sociale, fidèle à l’esprit du projet.
Nous sommes assez rapidement venus à l’idée d’un symbole rappelant une ruche, en lien direct avec le nom BeeUs et l’univers des abeilles. Ce choix nous a permis de représenter visuellement l’idée de communauté, de connexion et de solidarité entre étudiants. Après plusieurs essais, nous avons retenu un design géométrique et épuré représentant une alvéole, à la fois moderne, lisible et facilement déclinable, qui traduit l’identité sociale et collaborative du projet.
BeeUs a été conçu pour s’adapter à tous les supports, du mobile à l’ordinateur. La responsivité et l’optimisation du contenu garantissent une navigation fluide et intuitive, avec une expérience claire et agréable pour chaque utilisateur.
Nous avons travaillé l’accessibilité de BeeUs en adaptant les tailles de texte pour assurer une lecture confortable. L’accessibilité a été pensée dès le départ pour garantir la même expérience sur tout les supports.
Le design de BeeUs a été pensé pour s’adapter à tous les supports. Cette approche nous a permis de travailler la responsivité de manière globale et d’offrir une expérience cohérente et optimale, à tout les utilisateurs.
02 — Étape du projet
Les fonctionnalités, les interfaces de gestion, la structure technique et le développement.
Technologies utilisées
Pour ce projet, nous devions travailler avec le framework Astro. Nous pouvions utiliser React, non pas comme framework mais comme librairie, afin d’ajouter de l’interactivité sans gérer le rendu serveur. Le site devait être entièrement responsive sur tous les supports et respecter les règles de la RGPD, ce qui a orienté nos choix techniques et de conception.
Nous avons travaillé avec Astro en framework et utilisé React en librairie pour l’interactivité, en veillant à garder un code clair et bien structuré. L’un des points essentiels du développement a été d’optimiser le site aussi bien pour mobile que pour desktop, afin d’assurer une expérience fluide et accessible sur tous les supports.
Ce projet m’a permis de travailler avec Astro et d’explorer l’usage de React pour l’interactivité. J’ai appris à gérer une base de données conséquente comprenant des comptes utilisateurs, des posts et des connexions, tout en assurant la sécurité et le respect de la RGPD. J’ai également renforcé mes compétences en responsivité, en référencement et en accessibilité.
© 2026 Bryan Menoux. Tous droits réservés.
