Comment j'ai codé le site Web de la bibliothèque d'icônes Pixel sans apprendre à coder (Merci, Cursor AI !)

En tant que designer, j'ai toujours été fasciné par l'intersection entre design et technologie. La frontière entre designer et développeur m'a toujours intrigué ; je n'aurais jamais imaginé la franchir si tôt.

La bibliothèque d'icônes Pixel de HackerNoon a débuté comme un projet de design amusant visant à créer des icônes pixelisées reflétant l'essence nostalgique du langage de conception de HackerNoon. Mais transformer moi-même un fichier Figma Design en un site web entièrement fonctionnel ? Ce n'était pas prévu pour 2025, jusqu'à ce que je découvre Cursor AI. La bibliothèque étant open source via GitHub, xFigma et NPM, nous avons toujours voulu rendre ces icônes plus accessibles à la communauté. L'idée était simple : créer un site web où les designers et les développeurs pourraient parcourir, rechercher et télécharger ces icônes pour leurs projets.

Le défi ? Je n'avais aucune expérience en codage.💀

Découvrez Cursor AI, un éditeur de code basé sur l'IA qui est rapidement devenu mon mentor et mon guide tout au long de ce parcours. Voici comment j'ai repoussé mes limites, de la conception au fullstack, grâce à l'assistance de l'IA et à un code d'ambiance rigoureux.

À partir de Ground Zero

La première étape a été d’établir ce que je voulais construire et de faire le point sur ce que j’avais déjà :

• Une bibliothèque d'icônes de pixels au format SVG.
• Une conception Figma pour le site Web.
• Une liste de fonctionnalités que je souhaitais sur le site Web.
• Je n'ai absolument aucune idée de comment lui donner vie.

J'ai commencé par créer une branche de site web sur le dépôt GitHub de la bibliothèque d'icônes Pixel . J'ai ensuite installé Cursor AI, et la prise en main a été étonnamment simple.

Configuration du projet avec Cursor AI

Interface utilisateur du curseur

Après avoir installé Cursor, la prochaine chose à vérifier était :

• GIT - pour le contrôle de version
• Node.js - pour le package NPM

Une fois les éléments essentiels installés, il était temps de passer à l'action. J'ai cloné le dépôt sur mon système, ouvert le dossier du projet dans Cursor AI et initié une conversation avec l'assistant IA intégré.

Fenêtre de discussion du curseur

Ayant eu une solide expérience avec Claude, j'ai opté pour Claude 3.7 Sonnet en mode Agent pour me guider tout au long du processus.

Lors de la première invite, j'ai brièvement expliqué ce que je souhaitais créer et listé les fonctionnalités requises, ainsi qu'une structure de base pour le projet, en demandant des suggestions sur le(s) framework(s) à privilégier pour l'efficacité et la rapidité. Cursor m'a aidé à définir la structure des dossiers et m'a suggéré de m'en tenir à HTML et Tailwind pour le projet. Il a même créé les fichiers nécessaires au démarrage du projet. Voici à quoi ressemblait la structure des dossiers après cela :

├── index.html

├── src/

│ ├── style.css

│ ├── output.css

├── assets/

├── fonts/

├── scripts/

L’étape suivante consistait à configurer Tailwind et à démarrer avec l’interface utilisateur.

Configuration de Tailwind CSS et création de l'interface utilisateur

À ma grande surprise, Cursor a perturbé l'installation de Tailwind et a mélangé les commandes de Tailwind v3.4 et v4.0. Il était donc temps pour moi de passer à l'action ! Je suis allé sur la documentation d'installation de Tailwindcss et j'ai suivi ces étapes :

• Pour installer Tailwind, ouvrez le terminal et exécutez :

  npm install tailwindcss @tailwindcss/cli

• Importer Tailwind dans le fichier src/style.css :

  @import "tailwindcss";

• Pour configurer le processus de construction, exécutez :

  npx @tailwindcss/cli -i ./src/style.css -o ./src/output.css --watch

• Commencez à utiliser Tailwind dans le HTML :

  <link href="/src/output.css" rel="stylesheet">

Une fois Tailwind installé et les classes prêtes à être utilisées, j'ai commencé à définir les couleurs, les polices et d'autres atomes pour l'agent IA avant de créer des molécules, des organismes et des pages plus complexes selon ma conception Figma.

J'ai ensuite installé le package NPM Pixel Icon Library pour utiliser les icônes du projet. Voici les étapes d'installation du package NPM :

• Installer le paquet :

  npm i @hackernoon/pixel-icon-library

• Importez le CSS dans votre HTML

  (J'ai déplacé tous les fichiers de polices d'icônes nécessaires dans le dossier /fonts pour faciliter l'accès.)

  <link href="/fonts/iconfont.css" rel="stylesheet">

• Pour afficher une icône, ajoutez

  <i class="hn hn-icon-name"></i>

Pour l'interface utilisateur, j'ai adopté une approche élément par élément pour garder les choses organisées et faciliter le retour à l'itération précédente si nécessaire.

Voici l'ordre :

• Barre de navigation
• Pied de page
• Section Héros
• Barre de recherche
• Cartes d'icônes et grille
• Modalité d'icône individuelle

J'ai veillé à définir les marges intérieures, les marges, le rayon des bordures, les couleurs et les dimensions de tous ces éléments, tout en ajoutant des états de survol et de clic. Outre les propriétés CSS, j'ai également intégré des interactions et un comportement réactif dans les invites.

Extension du serveur en direct

Défi des données d'icônes et mise en œuvre de la fonctionnalité de recherche

Une fois les éléments d'interface utilisateur en place, le véritable défi était de relever : afficher toutes les icônes avec leurs détails (nom, type et code SVG), tout en garantissant une recherche fluide. Pour y parvenir, Cursor a proposé une approche structurée :

• Création d'un fichier JSON avec métadonnées d'icône et code SVG
• Chargement des données depuis le JSON pour les afficher efficacement.
• Implémenter la recherche basée sur le nom de l'icône.
• Ajoutez des filtres de recherche en fonction des balises de type d'icône : solide, régulier, marques/icônes de médias sociaux, ronronnements

Pour automatiser davantage ce processus, j'ai demandé à Cursor de créer un script pour ajouter toutes les données d'icône au fichier /data/icons.json.

fichier icons.json

Maintenant que la recherche fonctionne, que les filtres de recherche sont en place et que le mode icône fonctionne comme prévu, il ne restait plus qu'à ajouter les interactions restantes à l'interface utilisateur, à effectuer des tests approfondis et à déployer !

Déploiement et au-delà

Une fois que j'ai été satisfait de l'interface utilisateur et que j'ai testé minutieusement chaque fonctionnalité, il était temps de relever le défi suivant : le déploiement !!!

Comme le projet était un site statique, j'avais besoin d'une solution d'hébergement rapide, gratuite et facile à maintenir. GitHub Pages était une évidence ! Elle offrait :

• Intégration transparente avec le référentiel GitHub, rendant le déploiement sans effort.
• Son utilisation est gratuite et convient parfaitement aux projets statiques comme celui-ci.
• Les mises à jour sont très simples : tout ce dont vous avez besoin est un engagement !

Mais avant de pouvoir transférer tout mon code vers le dépôt et le déployer via GitHub Pages, je devais le nettoyer et vérifier l'absence de problèmes de production. Après un rapide échange avec Cursor et quelques ajustements, tout était prêt pour le lancement !

Voici tout ce que vous devez faire pour déployer votre projet via GitHub Pages :

• Envoyez tout votre code vers le dépôt GitHub et assurez-vous qu'il est public
• Activation des pages GitHub pour le dépôt
  • Accédez aux paramètres
  • Cliquez sur Pages
  • Définissez la branche sur « Site Web » (la branche où se trouve votre code. Dans mon cas, c'était dans la branche du site Web)
  • Cliquez sur Enregistrer
• Facultatif:
  • Ajoutez votre domaine personnalisé (comme je l'ai utilisé : pixeliconlibrary.com)
  • Configurer le DNS (Merci à Richard de m'avoir aidé avec ça)
• Attendez quelques minutes et votre site Web sera EN LIGNE !

PIXELICONLIBRARY

Pixel Icon Library | Open-Source Pixelated Icons By HackerNoon

HackerNoon's Pixel Icon Library is an open-source collection of meticulously designed pixelated icons. Crafted on a 24px grid for perfect alignment, inspired by HackerNoon's retro design vibes, these icons capture the essence of internet's golden days.

Page de paramètres des pages GitHub

Un produit dont on peut être fier

De la conception d'icônes en pixel art au vibe-coding pour créer un site entièrement fonctionnel, ce projet m'a poussé à sortir de ma zone de confort de la meilleure des manières. Avec le recul, il s'agissait de bien plus que de créer un site web : il s'agissait d'élargir mes horizons créatifs et de réaliser qu'avec l'IA, la frontière entre design et développement s'estompe plus rapidement que jamais. Et pour moi, c'est comme si une route sans fin s'ouvrait devant mes yeux.

Envie de découvrir le code du site web ? Consultez le dépôt GitHub !