Kasa Thumb
Planifier le développement d'une application en ligne

⋅ Étude de cas ⋅

Qwenta présentation
Qwenta logo

OpenClassRooms Projet #11

Note : Le travail présenté ici est issu d'un module de la formation d'intégrateur web proposée par OpenClassRooms, pour laquelle j'ai obtenu la certification RNCP38145 en octobre 2025. Le client comme le projet sont fictifs mais font l'objet d'un scénario calqué sur les conditions réelles. Les livrables attendus sont jaugés à l'aulne de ce scénario.
Voir mon évaluation.


Objectifs pédagogiques

✦ Rédiger les spécifications techniques d'un projet web à partir de besoins fonctionnels
✦ Mettre en place une méthode de veille technologique
✦ Découper une fonctionnalité en tâches pour préparer le développement
✦ Suivre le déroulement du projet grâce à un outil de gestion de projet
✦ Présenter la solution technique

Définition du projet

Un outil de création de menus pour les restaurateurs

En tant que leader historique de l’impression de supports, Qwenta souhaite réaliser un outil en ligne qui permettra à ses clients restaurateurs de publier et de choisir par eux-mêmes la mise en forme de leurs menus, d’où le nom “Menu Maker”.

Spécificités du projet

Menu Maker est une interface sur laquelle les restaurateurs peuvent se connecter pour créer leurs menus à diffuser en ligne ou à imprimer. L’outil doit être dynamique.

Prestataire

Qwenta fait appel à Webgencia dans un premier temps pour développer les spécifications techniques du site et organiser la gestion de projet du développement du site.

Maquette UX / UI

Le visiteur arrive sur la landing page, où toute la procédure de l’outil est expliquée étape par étape. Il peut s’inscrire ou se connecter. Le formulaire de connexion s’ouvre dans une modale. A la validation, une confirmation de l’email est demandée puis validée.

Qwenta maquette home

L’utilisateur sera guidé à chaque étape pour construire son menu, l’interface est claire et intuitive. A chaque validation, il voit son menu progresser dans la section de droite.

Qwenta maquette Menu-maker

L’utilisateur pourra facilement personnaliser son menu, puis pourra l’exporter et le diffuser en quelques clics.

Qwenta maquette Menu-maker

Veille technologique

Méthode de classification des sources d’information

A l’instar d’un journaliste parcourant sa revue de presse chaque matin, en tant que développeur et designer UX/UI, je mène une veille quotidienne concernant, entre autres, les évolutions technologiques, les tendances en développement ou en design. Pour organiser ma veille technologique, j’utilise Feedly, un agrégateur de flux très pratique pour organiser les sources auxquelles je suis abonné. Tout est pensé pour faciliter une veille quotidienne rigoureuse.
Veille Feedly

Veille quotidienne & généraliste

Une veille régulière apporte nombre d’idées et d’aides pour le travail d’un développeur. Outre les mises à jour, on a accès à de nouvelles bibliothèques et mille autres “outils géniaux” propres à alimenter nos applications.

Veille ciblée & aide à la décision

Pour les choix techniques de Menu-Maker, la veille m’a permis de jauger nombre de frameworks (Express, Next, React, Adonis, Laravel). Et pour arrêter définitivement ce choix, rien de tel qu’un débat mené par des spécialistes reconnus et très suivis. Les arguments avancés ont été déterminant.

Veille frameworks

Solutions techniques

Le choix de Next.js

Avant de choisir Next.js, j’ai donc évalué, lu et regardé des comparatifs autour des principaux frameworks actuels, pesant notamment avantages et inconvénients par rapport à React. Une fois mon choix arrêté sur le framework Next.js, j’ai compilé les liens utiles vers des tutoriels et les documentations officielles.
Next.js
Avantages de Next.js

✦ Performance Améliorée : le SSR permet de réduire le temps de chargement.
✦ Mise en cache efficace.
✦ SEO : Google indexe plus efficacement les pages rendues côté serveur.
✦ Déploiement serverless : série de fichiers individuels (plus léger).
✦ Alternative “tout-en-un” aux server components proposés par React.
✦ Sécurité : seul le HTML est envoyé au client.
✦ Flexibilité : on peut choisir si un composant est envoyé ou non au client.

Schéma complet de l'application

schema de l'application

Organisation Agile

Méthode Agile

L'agence Webgencia évolue en équipe AGILE. L’approche Agile est une méthode de gestion de projet qui met l’accent sur :
✦ La découpe du projet en petites étapes (sprints), pour avancer progressivement.
✦ L’adaptabilité aux changements grâce à une organisation flexible.
✦ La collaboration étroite entre le client et l’équipe, en favorisant l’échange continu.
✦ La livraison régulière des versions fonctionnelles, afin d’obtenir des retours réguliers et améliorer en continu.

Méthode Agile

Méthode Scrum

SCRUM est un cadre de travail Agile qui organise le projet en sprints. Chaque sprint a pour but de livrer une version utilisable du produit. Il s'agit d'une version structurée d’Agile, avec des rôles précis et des rituels réguliers pour avancer par petits cycles.

Les rôles principaux :
✦ Product Owner (vision et priorités)
✦ Scrum Master (facilite et protège l’équipe)
✦ Équipe de développement (réalise le produit)


Les rituels clés :
✦ Daily stand-up (réunion courte chaque jour)
✦ Revue de sprint (présenter ce qui est fait)
✦ Rétrospective (améliorer la façon de travailler)

Méthode Scrum

Kanban & définition des tâches
Notion

“Notion est une plateforme de gestion de projet et de collaboration très poussée qui offre une variété de fonctionnalités pour organiser les informations, collaborer en équipe et gérer les tâches.”

Kanban dédié au projet Menu-maker

Évaluation & bilan

Validations

1. Présenter la solution technique
✔ Validé
→ Les maquettes et leur fonctionnement ont été présentés par l'étudiant en début de soutenance pour poser le contexte du projet. La présentation comporte un support de qualité fait à l'aide de Prezi. Le discours est clair, intéressant et complet. Tous les choix de technos, organisation, sécurité, maintenances sont présents et justifiés.

2. Rédiger les spécifications techniques d'un projet web à partir de besoins fonctionnels
✔ Validé
→ La stack technique choisie est pertinente et répond parfaitement aux besoins et à la taille de l'application à créer. L'étudiant a su répondre à chaque besoin par une réponse technique appropriée. Toutes les fonctionnalités ont été présenté lors de la soutenance et dans les différents livrables.

3. Découper une fonctionnalité en tâches pour préparer le développement
✔ Validé
→ Un tableau kanban a été créé sur Notion, il comporte toutes les tâches du projet. Les tâches sont classées par priorité, sprint, story points, le poste affecté, et chacune comporte un descriptif complet, ainsi que des critères de validation.

4. Mettre en place une méthode de veille technologique
✔ Validé
→ Feedly a été utilisé pour la veille technologique de ce projet. L'étudiant a pris le temps de bien s'informer et faire des recherches avant de déterminer la stack technique. Il a sélectionné une multitude de sources d'informations pertinentes autour du développement web en général et 7 sources d'infos ciblées pour le projet menu maker.

5. Suivre le déroulement du projet grâce à un outil de gestion de projet
✔ Validé
→ L'étudiant a su expliquer la méthode Agile, et l'adapter pour l'organisation et la création du projet menu-maker avec son équipe à disposition. Les notions de gestion de projet sont acquises, et l'étudiant a su appréhender correctement des besoins du client et proposer une solution technique pertinente.

Livrable

Points forts :
→ Livrables de qualité et très complets.

Axes d'amélioration :
→ Aucun.

Remarques :
→ Excellente soutenance avec un beau support de présentation Prezi. Le timing est respecté et l'étudiant a été exhaustif sur l'organisation et la stack technique du projet. Les notions sont acquises, et tout est prévu, livrables de qualité.

Menu-Maker by Qwenta

Gestion de projet et solutions techniques

Commanditaire
OpenClassRooms (module de formation #11)

Prestation
Définition complète de la stack technique
Organisation du travail en équipe
Définition des tâches et des sprints
Veille technologique
Présentation client

Outils principaux
Next.js / Node.js / MongoDB / React / Redux-Toolkit
Notion / Kanban
Agile / Scrum
SwifDoo PDF / Prezi