Projets
 |
parTidi

Mon propre «URL Shortener», version MVP

TidiLabs
2 au 4 juin
«Le vrai pouvoir aujourd’hui, ce n’est plus de tout coder à la main. C’est de savoir concevoir intelligemment, de comprendre assez pour débugger, et surtout, de bien formuler ta demande à une machine. L’avenir appartient peut-être moins aux codeurs purs… qu’aux concepteurs capables de collaborer avec l’IA.» –Tidi
Expertises: Bolt.new, ChatGPT, UX/UI, TypeScript/Tailwind.css, GitHub, Render/Railway

Mise à jour: 2025-06-08

Tu connais sûrement Bitly ou TinyURL. Des services qui transforment une URL trop longue en quelque chose de plus propre, plus partageable.

L’idée de créer mon propre URL shortener m’est venue d’un besoin personnel. En tant que professionnel du web, je partage souvent des liens dans des présentations, courriels ou réseaux sociaux. Et je trouvais ça vraiment cool d’avoir mon propre service personnalisé, hébergé sur mon sous-domaine: url.tidi.ca.

Sur le papier, ça a l’air simple. Mais sous le capot, c’est une vraie petite machine. Frontend. Backend. Base de données. Hébergement. Tout ça, pour une interface qui donne l’impression que ça marche comme par magie.

Et puis, je me suis dit que ce projet serait un bon prétexte pour tester un truc dont on parle souvent ces temps-ci.

Tu sais, cette idée qu’avec l’IA, on peut bâtir une app web sans coder.

Avant, ce genre de projet coûtait cher

Il y a encore cinq ans, ça m’aurait demandé d’embaucher un designer, un développeur frontend, un backend si je voulais livrer quelque chose de solide.

On parle de 3 000 à 4 000 $ pour un produit comme ça. Une ou deux semaines de boulot, facile.

Aujourd’hui, je l’ai fait… en deux journées. Et sans écrire une ligne de code à la main.

OK mais comment?

Je suis parti sur Bolt.new, un outil magique qui te génère une application complète en quelques prompts. J’ai demandé un petit service de raccourcissement d’URL avec une interface simple et propre. Et j’ai laissé tourner la machine.

Bolt m’a généré un projet complet que j’ai pu télécharger.

Une fois le zip en main, j’ai ouvert mon terminal sur mon Mac Mini, lancé l’app localement, et ça fonctionnait… presque.

Le rôle de ChatGPT dans tout ça

Quand j’avais des bugs, ou des trucs que je voulais ajuster, je copiais le code dans ChatGPT et je lui demandais de corriger. Presque à chaque fois, ça réglait le problème du premier coup.

Et je ne parle pas juste de corriger une faute de syntaxe.

Parfois, je lui demandais d’ajouter un système de notes, de corriger un comportement étrange ou d’améliorer un petit détail de l’UX. Il me sortait le bon patch à insérer, je collais, je testais. Boom, ça roulait.

C’est à ce moment-là que j’ai compris, et ce n’est rien de nouveau.

On entre dans une nouvelle ère. Le métier de développeur web est sérieusement chamboulé.

Aujourd’hui, ce qu’il faut, ce n’est pas de savoir écrire du code. C’est de savoir comment une app est construite, de maîtriser l’art du prompt, et d’être capable de guider une IA vers le bon résultat.

Le nouveau rôle, c’est celui de concepteur d’applis propulsées par l’IA.

Comment j’ai fait, étape par étape

Petit résumé de mon processus, pour ceux qui veulent s’en inspirer:

  • Je demande un premier jet sur Bolt.new
  • Je télécharge le package
  • Je teste localement (npm install, npm run dev)
  • J’ajuste le design, je corrige les erreurs avec ChatGPT
  • Je connecte ma base de données Supabase
  • Et je déploie sur Railway

À la fin, je configure mon DNS pour pointer url.tidi.ca vers Railway. Et là, tout marche. Mon raccourcisseur est en ligne, sur mon sous domaine, prêt à être utilisé.

Qu’est-ce qu’un MVP

Ce projet constitue un MVP — un minimum viable product. Autrement dit, une première version allégée mais pleinement fonctionnelle de l’outil que j’avais en tête. Par exemple, l’interface mobile a été optimisée et peaufinée pour une meilleure expérience utilisateur sur petit écran: boutons plus larges, espacement plus aéré, comportements adaptés aux interactions tactiles, etc.

Url-Shortener


Au-delà de l’outil lui-même, le vrai apprentissage s’est fait dans les coulisses. Travailler avec Tailwind CSS m’a permis de mieux comprendre l’approche utilitaire en design d’interface. Plutôt que d’écrire des classes CSS personnalisées, on compose directement l’apparence des éléments à l’aide de classes prédéfinies très expressives comme flex, gap-4, rounded-md, ou encore text-muted-foreground. Ce mode de travail oblige à penser en système dès le départ, en termes de hiérarchie visuelle, de cohérence et de responsive design. Il favorise aussi une exécution rapide: l’itération sur le design est immédiate, sans retour permanent à une feuille de style séparée.

Côté programmation, TypeScript a été utilisé, un surensemble de JavaScript qui ajoute un typage statique. Ce typage permet de détecter des erreurs directement à l’étape de développement, avant même que le code ne s’exécute. Pendant mes tests en local, c’est un gain de temps considérable: grâce à TypeScript, les erreurs de type sont repérées immédiatement. Quand une erreur surgit, je prends une capture d’écran de la console ou du message d’erreur, que je colle dans ChatGPT. Ce va-et-vient peut se répéter plusieurs fois avant de résoudre un bug, ce qui m’aide à affiner la compréhension du problème. Et si la réponse n’est pas satisfaisante, je retourne dans le code, j’analyse la structure des fichiers, et j’isole le bug en le divisant en morceaux plus petits et plus faciles à corriger. Ce processus m’a permis de progresser à la fois sur le plan technique et méthodologique.

Et le plus fou dans tout ça ? 

Ce projet, qui m’aurait coûté plusieurs milliers de dollars il y a cinq ans — designer, dev fullstack, gestion de projet — je l’ai fait seul, en quelques heures, gratuitement, avec des outils modernes.

C’est sûr, l’IA impressionne. Elle permet d’aller plus vite, pour moins cher. On ne peut tout simplement pas compétitionner avec une machine sur le plan de la vitesse d’exécution. Elle code, elle corrige, elle documente. Si tu sais bien expliquer ce que tu veux, elle le construit pour toi.

Mais l’envers de la médaille, c’est que cette efficacité soulève de vraies questions. Des jobs vont disparaître, des compétences vont devenir moins «indispensables», et ça peut être déstabilisant, voire injuste pour celles et ceux qui ont mis des années à se former. L’impact humain est réel, et on ne peut pas juste l’ignorer.

Ce que j’ai compris en chemin, c’est que le vrai pouvoir aujourd’hui, ce n’est plus de tout coder à la main. C’est de savoir concevoir intelligemment, de comprendre assez pour débugger, et surtout, de bien formuler ta demande à une machine. L’avenir appartient peut-être moins aux codeurs purs… qu’aux concepteurs capables de collaborer avec l’IA.

Tien-Dat Nguyen. Chef de projets numériques.

À propos de votre PO

Multidisciplinaire et agile, je vous accompagne dans la réalisation de solutions numériques qui répondent précisément à vos besoins en communication marketing.

M'écrire