Librairie Icitte est une librairie de Longueuil qui offre des livres neufs, d’occasion et rares en plusieurs langues. Le site, sur une seule page, invite les visiteurs à parcourir les rayons sur place et à demander de l’aide pour trouver un livre. Le catalogue Amazon de la librairie y est présenté comme un point de départ ; la visite en librairie reste au centre de l’expérience.
Mandat et objectif
Un site d’une seule page qui invite les visiteurs à parcourir les rayons sur place et à demander de l’aide pour trouver un livre, avec le catalogue en ligne comme point de départ.
Rôle et responsabilités
Conception et programmation du site, contenus et validation ; les renseignements (adresse, heures d’ouverture, services) proviennent de la librairie.
Crédits
Contrat client. Les renseignements (adresse, heures d’ouverture, services) proviennent de la librairie. La conception et la programmation du site sont faites par moi.
Utilisation d’IA
J’ai utilisé Claude Code pour programmer et déboguer le site, à partir de mon template de dossier de projet IA, et pour intégrer cette fiche au portfolio, à partir de mon étude de cas. Ma contribution personnelle comprend la conception du site, les contenus et la validation du résultat.
Étapes de production
-
Étape 1 : Une collection pensée pour la découverte
Le site présente des livres neufs, d’occasion et rares en plusieurs langues. Son texte invite les visiteurs à prendre le temps de chercher, de feuilleter et de trouver le livre qu’ils ne savaient pas encore vouloir.
-
Étape 2 : Les renseignements pratiques au même endroit
La section de visite fournit l’adresse de la librairie au 855, chemin du Coteau-Rouge, son numéro de téléphone, un lien vers l’itinéraire et les heures d’ouverture pour chaque jour de la semaine.
-
Étape 3 : Une porte d’entrée en ligne vers la librairie
Une section dédiée mène au catalogue Amazon de Librairie Icitte. Le site présente ce catalogue comme un point de départ et recommande de visiter la librairie pour davantage de choix et de l’aide dans une recherche.
-
Étape 4 : Programmation assistée par l’IA
J’ai programmé et débogué le site avec Claude Code, à partir de mon template de dossier de projet IA, en un seul fichier HTML sémantique et un JavaScript léger, sans framework ; les contenus et la validation sont faits par moi.
-
Étape 5 : Mise en ligne
Le site est hébergé sur Firebase Hosting avec une mise en ligne automatisée, et son manifeste web permet de l’ajouter à l’écran d’accueil d’un téléphone.
Technologies
-
Site statique d’une seule page, entièrement réalisé en code avec un balisage HTML sémantique.
-
Un fichier JavaScript léger, sans framework, pour la navigation et les interactions de la page.
-
Hébergement du site et mise en ligne automatisée.
-
Un manifeste d’application web permet d’ajouter le site à l’écran d’accueil d’un téléphone.
Défis
Garder la librairie physique au centre, alors qu’un site invite d’abord à consulter en ligne.
Solutions
Le site présente la consultation en ligne comme une porte d’entrée vers la collection, tout en invitant sans cesse les visiteurs à explorer les rayons et à demander de l’aide dans leur recherche.
Résultat final
Un site statique d’une page en ligne, librairie-icitte.web.app, qu’on peut ajouter à l’écran d’accueil d’un téléphone grâce à son manifeste web.