Août 2025 · Projet web
Draw Of The Day
Cinq minutes pour dessiner, une minute pour se mettre la pression, ou un dessin à faire à deux. À la fin, chacun choisit de partager sa création ou de la garder pour soi.
- Mon rôle
- Chef de projet · Développement full stack
- Format
- Web · Solo & duo
- État du projet
- Application web
- Technologies
01Le projet
Un dessin avant que le chrono arrive à zéro.
DRAW donne cinq minutes pour dessiner seul. BLITZ n’en laisse qu’une. En DUO, on partage cinq minutes à deux sur le même dessin. Le principe reste simple : se lancer et voir ce qu’on arrive à faire avec le temps disponible.
À la fin, on peut garder son dessin ou le publier sur l’accueil. La galerie présente les créations dans un ordre aléatoire, avec une durée de vie de vingt-quatre heures. Les dessins « test » des captures ont surtout servi à vérifier que tout fonctionnait.
Comment ça marche
- 01
Choisir
DRAW, BLITZ ou DUO.
- 02
Dessiner
Créer avec les outils et le chronomètre.
- 03
Partager
Prévisualiser et décider de publier.
- 04
Découvrir
Parcourir, aimer et conserver des favoris.
02Mon travail
L’application, côté écran et côté serveur.
J’ai porté le projet et son développement full stack : interface de dessin, collaboration en temps réel, comptes et gestion des créations. Il fallait autant soigner le geste du crayon que ce qui se passe derrière.
L’interface et les outils de dessin
J’ai développé les modes chronométrés et l’interface de création, avec les outils, les couleurs et les tailles de trait. L’application est aussi pensée pour être utilisée sur mobile.
Le dessin à deux
Le mode DUO synchronise les dessins en temps réel. Il faut relier ce que chacun dessine à ce que l’autre voit, tout en gardant la même limite de cinq minutes.
Les comptes et les données
J’ai aussi travaillé sur l’authentification par email ou Google, les profils et la gestion des dessins : publication, favoris, likes et téléchargement. C’est un projet full stack, de l’interface à la logique et aux données qui la font fonctionner.
03Sous le capot
Ce qui se passe autour du canvas.
Pour ce projet, j’ai utilisé HTML, CSS et JavaScript, avec Node.js et Firebase. Cette stack répondait aux besoins de l’application : dessiner, partager une session et retrouver ses données. Sur d’autres projets web ou mobile, je travaille aussi avec PHP, Python et d’autres bases de données.
Le cycle d’un dessin
À explorerChoisir son temps de jeu.
Cinq minutes en DRAW ou DUO, une minute en BLITZ. Le mode fixe le temps disponible avant de commencer.
Dessiner, seul ou à deux.
On choisit ses outils, sa couleur et la taille du trait. En DUO, le dessin est partagé en temps réel.
Décider de montrer son dessin.
Une fenêtre affiche un aperçu avant la publication. Le chronomètre peut être terminé sans que le dessin soit envoyé dans la galerie.
Découvrir les créations des autres.
La galerie est pensée pour afficher les dessins pendant vingt-quatre heures. On peut les aimer, les mettre en favoris ou les télécharger.
Du choix du mode à la galerie, tu peux suivre le parcours d’un dessin.
Quelques choix de développement
Laisser le choix de publier
On n’a pas forcément envie de montrer chaque dessin terminé.
J’ai séparé la fin du chronomètre et la publication, avec un aperçu et un bouton de confirmation.
Quand un favori a disparu
Les créations sont éphémères, mais un utilisateur peut les avoir ajoutées à ses favoris.
La fenêtre des favoris prévoit un message quand les dessins ne sont plus disponibles, plutôt que de laisser un espace vide sans explication.
04En images
Le projet, à l’écran.
5 visuelsCliquer pour agrandir ↗
Les écrans de la version de développement. Le dessin « test » revient souvent : il porte plutôt bien son nom.
Choisir sa session
Les trois modes et l’accès à la galerie depuis l’accueil.
L’espace de dessin
Chronomètre, outils, couleurs et tailles de trait réunis autour de la surface de création.
Le profil
Personnalisation du compte et accès aux réglages d’authentification.
Avant de publier
Un aperçu et une confirmation explicite à la fin du dessin.
Les favoris
L’état vide tient compte des créations supprimées ou devenues indisponibles.
05Bilan & équipe
Une application qui va du dessin au partage.
J’ai travaillé sur toute la chaîne : ce que l’on dessine, ce que l’autre joueur reçoit et ce que l’application conserve. Les comptes et la galerie font autant partie du projet que les outils du canvas.
Ce qui est en place
- Trois modes, dont un mode duo en temps réel.
- Outils de dessin et gestion des comptes.
- Publication, likes, favoris et téléchargement.
Où en est le projet
- Les captures montrent la version de développement.
- Pas de version publique à essayer depuis le portfolio pour le moment.
Le canvas est le centre de l’application, mais les comptes, la synchronisation et les petits états d’interface prennent aussi une vraie place dans le développement.
Envie de parler de ce projet ?
On en parleD’un univers à l’autre
