Galerie NFT minimaliste — construite avec Vite + TypeScript

NFT Collection #1 est une galerie web moderne et légère permettant d’afficher, filtrer et gérer une première collection NFT.
Ce projet met en avant une architecture claire, performante et extensible, avec un code entièrement en TypeScript et un environnement propulsé par Vite. Peut etre utilisé comme template générale ou layout

Objectif : créer une base de template solide pour de futures collections reliées à la blockchain (smart contracts, IPFS, Web3).

Avant de cloner le projet, vérifie que tu disposes de :

git clone https://github.com/Alyaesub/NFT-Collection-1.git
cd nft-collection-1
Installer les dépendances
npm install

⸻

Script	Commande	Description
Dev	npm run dev	Lance le serveur local avec hot reload
Build	npm run build	Génère le build de production (/dist)
Preview	npm run preview	Simule la version hébergée du build
Typecheck	npm run typecheck	Vérifie les types TypeScript sans compiler

⸻

• Affichage dynamique de toutes les cartes NFT
• Barre de recherche en temps réel (filtrage par titre, description ou créateur)
• Compteur automatique du nombre de NFTs visibles
• Loader & message d’état vide 🫥
• Animation d’apparition fluide des cartes (fade-in)
• Page de détails avec toutes les infos du NFT
• Responsive design (mobile / desktop)
• Structure modulaire et claire (data, ui, domain, lib)

• Aucune injection via innerHTML
• Toutes les données injectées via textContent et createElement
• Validation stricte des URLs d’images
• Code entièrement safe-by-default (protection XSS)

nft-collection-1/ │ ├── public/ → fichiers statiques (images, JSON, etc.) │ └── images/ │ ├── src/ → code source TypeScript │ ├── main.ts → point d’entrée de l’app │ ├── app.ts → logique principale (init, filtrage…) │ ├── ui/ → fonctions liées au DOM │ ├── data/ → données, listes, API simulées │ ├── domain/types/ → définitions de types TypeScript │ └── lib/ → helpers & fonctions pures │ ├── index.html → page principale (entrée du projet) ├── tsconfig.json → configuration TypeScript ├── vite.config.ts → configuration Vite (alias, build) └── package.json → scripts & dépendances

⸻

Démarrer le serveur local

npm run dev

👉 http://localhost:5173

Chaque modification est rechargée automatiquement grâce au Hot Reload de Vite ⚡

⸻

Créer le build optimisé

npm run build

Résultat : un dossier /dist contenant : • index.html final • fichiers JS/CSS minifiés • assets optimisés

Tester le build localement

npm run preview

⸻

Sur GitHub Pages npm i -D gh-pages npm run build npx gh-pages -d dist

⸻

Build command : vite build
Output directory : dist

⸻

node_modules/ dist/ .vite/ .DS_Store built/

⸻

npm init -y npm i -D vite typescript npm run dev # dev local npm run build # build final npm run preview # test prod

⸻

Pascal Reynier Développeur Web & Web3

⸻

Projet distribué sous licence MIT. Libre à toi de le modifier, l’adapter ou le partager.