TimeShift-NFT

Overview

TimeShift-NFT is a dynamic ERC-721 on Sepolia where the metadata is generated on-chain: tokenURI() returns a base64-encoded JSON that embeds an SVG whose color changes with the current time. The project includes a Hardhat + Ignition contract repo (with tests) and a polished React + Vite frontend for minting and viewing your NFTs in a responsive, modern gallery.

What it demonstrates

• Dynamic NFTs with fully on-chain metadata (tokenURI → base64 JSON + SVG)
• Production-style contract workflow: tests, deploy modules (Ignition), verification
• Wallet-first frontend UX (connect → mint → view) with a visual gallery
• Practical handling of a common constraint: marketplace/wallet metadata caching

Key features

• Mint ERC-721 NFTs on Sepolia
• Dynamic on-chain SVG whose color shifts over time
• tokenURI() returns base64 JSON + image data (no off-chain metadata server)
• Hardhat unit tests for core behavior + error cases
• Ignition deployment module for repeatable deploys
• Frontend with RainbowKit/wagmi wallet integration and animated UI polish

Live demo

• Open TimeShift-NFT

Contract details

• Network: Sepolia (Chain ID: 11155111)
• Contract: 0xA7FF038011ab80e0837262c9BAe3814352317cF4

Quickstart

Clone the contract repo:

git clone https://github.com/casaisdev/TimeShift-NFT.git

Run tests:

npm install
npx hardhat test

Deploy to Sepolia (Ignition):

npx hardhat ignition deploy ./ignition/modules/DynamicNFTModule.js --network sepolia

Frontend repo:

git clone https://github.com/casaisdev/TimeShift-NFT-Frontend.git

See each repo README for full .env setup and wallet/project ID configuration.

Notes

• Dynamic metadata is generated on-chain; the contract is the source of truth.
• If a UI shows “static” metadata, it’s usually caching, not a contract issue.
• For consistent real-time viewing, rely on the frontend gallery or direct tokenURI() reads.

Next steps

If I were to evolve TimeShift-NFT further:

• Add a manual refresh UX and a clear metadata caching explanation in-app
• Add more time-based traits (palette sets, gradients, day/night themes)
• Add an on-chain trait breakdown endpoint (human-readable decoding helpers)
• Add indexing (events/subgraph) for richer gallery browsing across wallets