Galerie NFT WalkerZ

Le projet WalkerZ

Les WalkerZ sont une collection de 1000 NFTs, (des images animées virtuelles collectionnables, échangeables et achetables via la blockchain), sortie en 2022 via la marketplace GameStop. À chacune de ces images étaient associées de nombreuses données, notamment sur les divers objets les composants ainsi que leur niveau de rareté.
 
Forte d’une communauté de nombreux acheteurs (plus de 100 acheteurs uniques !), la collection parue officiellement en août 2022 s’est vendue en intégralité en moins de 6h après sa sortie, réalisant un volume de plus de 40 ETH.

La plateforme GameStop manquant de fonctionnalités cruciales pour les collectionneurs (Impossible de filtrer les NFTs par ID, par objet le composant ou par niveau de rareté) j’ai décidé de développé un site web ayant pour but d’améliorer l’expérience des collectionneurs, leur permettant de filtrer facilement parmis la large collection de Walkerz et de pouvoir facilement accéder à la page GameStop associée au NFT

Le cahier des charges du site web

Le site web devait permettre aux utilisateurs de naviguer efficacement parmis les 1000 GIFs uniques. Il fallait donc intégrer ces fonctionnalités:

• Une galerie avec optimisation des temps de chargement. 
• Des possibilités de filtrage de NFTs: il fallait que les utilisateurs puissent cocher autant d’objets composants les NFTs que souhaités (Par exemple, en cochant la case “Jeans” on obtiendra uniquement les WalkerZ en jean, l’objectif était aussi de pouvoir cocher plusieurs cases de la même catégorie comme par exemple : “Jeans, Colorful Pants” permettant de retrouver tous les walkerz en jeans ou en pantalon coloré.).

  

• Une barre de recherche permettant de retrouver un walkerZ grâce à son numéro unique.
• Un affichage de toutes les données composant le NFT lors du clic.

  

• Un bouton par NFT pour retrouver sa page GameStop associée (Afin de faciliter les transactions).
• Le tout dans un format responsive permettant aux utilisateurs PC comme mobile d’utiliser le site web.

Le choix de la stack technique

Pour réaliser ce site je me suis servi d'une stack technique très simple, en effet, ma trousse à outils n'était pas aussi développée qu'aujourd'hui. Je me suis donc contenté des technologies suivantes :

• HTML
• CSS
• JavaScript/JQuery (Filtrage/Pagination)
• PHP (Routing)
• Python (Scraping de données)
• Figma (Design)

Les défis de développement

Lors du développement je me suis frotté à quelques problèmes qu’il a fallu résoudre efficacement.

La récupération des liens vers la marketplace

J’ai rapidement réalisé que les liens de chaque NFT sur la marketplace GameStop étaient uniques et ne dépendaient pas du numéro du NFT, j’ai donc développé un programme de scraping web en Python afin de récupérer automatiquement tous les liens des NFTs en partant du lien de la collection. Pour se faire il m’a fallu utiliser une librairie appellée Selenium, permettant la simulation d’interactions utilisateur.

L’optimisation du temps de chargement

Afin d’éviter que le site web soit long à charger pour les connexions les plus lentes, j’ai pu exporter tous les NFTs dans leur résolution native (44px x 52px) et ajouter des propriétés CSS pour les agrandir tout en conservant les pixels non-floutés. Ce qui a permis de servir des GIFs de moins de 10 kB au lieu de >100kB, ce qui a pour certaines collections amélioré le temps de chargement de plusieurs secodnes !
 
Une seconde optimisation est la pagination du contenu servi, permettant de montrer les NFTs 50 par 50 évitant de charger 1000 GIFs en une fois et améliorant au passage l’UX.