Fabric Storyline
Securely archive and share original fabric patterns with permanent proof of creativity.
IPFS via Pinata· decentralized storage
Section · Onchain
full primer →The primitive.
Every digital textile archives artefact is pinned to IPFS through Pinata; fashion designers get a permanent CID and a public gateway preview instead of a fragile cloud URL.
Why this primitiveIPFS via Pinata ensures immutable, decentralized storage of design patterns accessible globally.
Kernel
a Pinata JWT upload that pins images / JSON / manifests to IPFS and returns a permanent CID
Drives the UI as
a 'pinned to IPFS' chip with the CID and an ipfs.io gateway preview
Required keys.
POLYGON_AMOY_RPC_URL
Alchemy Polygon Amoy HTTPS endpoint (or https://rpc-amoy.polygon.technology).
open ↗ETHERSCAN_API_KEY
Single Etherscan v2 key — covers PolygonScan (chainId 80002) with no extra key.
open ↗Add these in your Lovable project under Settings → Secrets before pasting the prompt below.
Appendix · Mega-prompt
The build prompt.
budget · 1 message
Paste into a fresh Lovable project. Make sure all five secrets above are set first. read the build strategy →
Build "Fabric Storyline" in ONE Lovable message. Single-page demo.
CONCEPT
Securely archive and share original fabric patterns with permanent proof of creativity.
Discipline: Fashion & Textile Design (digital textile archives).
Onchain primitive: IPFS via Pinata. Why this primitive: IPFS via Pinata ensures immutable, decentralized storage of design patterns accessible globally.
5-CREDIT BUDGET (HARD LIMIT):
- ONE single-page app. No router, no Lovable Cloud, no database, no auth flows beyond Privy drop-in.
- ONE Solidity contract, <=80 lines, deployed to Polygon Amoy (chainId 80002), verified on PolygonScan.
- Privy is always the auth + sponsored-tx layer (Google login, embedded wallet).
- Pinata/IPFS only if the idea genuinely needs to store a file or metadata.
- At most ONE AI call per user action (use Lovable AI Gateway with LOVABLE_API_KEY if AI is part of the idea).
- Skip tests, skip CI, skip docs pages. Ship the demo, nothing else.
STACK
- React + Vite single page (the index route).
- Privy embedded wallet wraps `<App />` in src/main.tsx:
<PrivyProvider appId={import.meta.env.VITE_PRIVY_APP_ID}
config={{ loginMethods:['google'], embeddedWallets:{ethereum:{createOnLogin:'users-without-wallets'}},
defaultChain:{ id: 80002, name:'Polygon Amoy' } }}>
SPONSORED TX (required — zero-gas UX):
- Get the embedded wallet: `const { wallets } = useWallets(); const embedded = wallets.find(w => w.walletClientType === 'privy');`
- Send with BOTH `address` and `sponsor: true`, otherwise Privy falls back to user-paid and pops "Add funds on Polygon Amoy":
const { sendTransaction } = useSendTransaction();
await sendTransaction(
{ to: CONTRACT_ADDRESS, data, chainId: 80002 },
{ address: embedded.address, sponsor: true },
);
- `sponsor: true` alone is not enough — the Privy dashboard sponsorship policy must be enabled for Polygon Amoy (see PRIVY DASHBOARD SETUP).
PRIVY DASHBOARD SETUP (one-time, at https://dashboard.privy.io for the app matching PRIVY_APP_ID):
1. Gas Sponsorship -> Add chain -> Polygon Amoy (chainId 80002).
2. Toggle "App pays" for that chain.
3. Enable "Allow transactions from the client".
4. Fund the sponsorship balance with a small amount of MATIC on Amoy (Privy shows the deposit address).
Without these four steps every `sponsor: true` call falls back to user-paid gas.
- src/lib/pinata.ts uploads via `fetch('https://api.pinata.cloud/pinning/pinFileToIPFS', { method:'POST', headers:{ Authorization: `Bearer ${import.meta.env.VITE_PINATA_JWT}` }, body: fd })`.
- Hardhat in /contracts (kept outside the Vite bundle). Install
`@nomicfoundation/hardhat-ethers` AND `@nomicfoundation/hardhat-verify` (>=2.x).
DO NOT install `@nomicfoundation/hardhat-toolbox` — it drags Hardhat 3 peers.
- hardhat.config.cjs — Polygon Amoy + Etherscan v2 single-key:
require("@nomicfoundation/hardhat-ethers");
require("@nomicfoundation/hardhat-verify");
const pk = process.env.METAMASK_PRIVATE_KEY;
module.exports = {
solidity: { version: "0.8.24", settings: { optimizer: { enabled: true, runs: 200 } } },
networks: { polygonAmoy: {
url: process.env.POLYGON_AMOY_RPC_URL || "https://rpc-amoy.polygon.technology",
accounts: pk ? [pk.startsWith("0x") ? pk : "0x" + pk] : [],
chainId: 80002,
} },
etherscan: {
apiKey: process.env.ETHERSCAN_API_KEY, // single Etherscan v2 key covers PolygonScan
customChains: [{
network: "polygonAmoy", chainId: 80002,
urls: {
apiURL: "https://api.etherscan.io/v2/api?chainid=80002",
browserURL: "https://amoy.polygonscan.com",
},
}],
},
sourcify: { enabled: false },
};
- Deploy: `npx hardhat run scripts/deploy.cjs --network polygonAmoy`.
- Verify (run RIGHT AFTER deploy, no constructor args for these contracts):
`npx hardhat verify --network polygonAmoy <address>`
On success it prints "Successfully verified contract … on the block explorer"
and the source becomes readable at
`https://amoy.polygonscan.com/address/<address>#code`.
- Frontend reads: create a viem public client with the Polygon Amoy RPC too —
`createPublicClient({ chain: polygonAmoy, transport: http(import.meta.env.VITE_POLYGON_AMOY_RPC_URL) })`
(import `polygonAmoy` from `viem/chains`).
Expose the RPC to the client by also setting VITE_POLYGON_AMOY_RPC_URL to the same value.
- Write the deployed address to `src/data/contract.json` so the UI links to
`https://amoy.polygonscan.com/address/<address>`.
CONTRACT (contracts/FabricStoryline.sol):
```solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.24;
/// @title CIDLogFabricStoryline
/// @notice Securely archive and share original fabric patterns with permanent proof of creativity.
/// @notice Built during the Creative AI & Quantum Hackathon organised by StreetKode Fam during Indian Krump Festival 14
contract CIDLogFabricStoryline {
event Logged(address indexed author, string cid, uint256 at);
/// @notice Built during the Creative AI & Quantum Hackathon organised by StreetKode Fam during Indian Krump Festival 14
function log(string calldata cid) external {
emit Logged(msg.sender, cid, block.timestamp);
}
}
```
USER FLOW
1. Land on page -> 'Sign in with Google' (Privy) -> embedded wallet auto-provisioned on Polygon Amoy.
2. On submit, pin the digital textile archives artefact to Pinata, then call `log(cid)` on the contract via Privy sponsored tx. Render the CID, IPFS gateway preview, and PolygonScan tx link.
3. Footer renders: "Built during the Creative AI & Quantum Hackathon organised by StreetKode Fam during Indian Krump Festival 14"
REQUIRED SECRETS (Lovable -> Project Settings -> Secrets):
- METAMASK_PRIVATE_KEY Polygon Amoy deployer key. Fund it: https://faucet.polygon.technology/
(alt: https://faucet.polygon.technology/)
- POLYGON_AMOY_RPC_URL Alchemy Polygon Amoy HTTPS endpoint (https://polygon-amoy.g.alchemy.com/v2/<key>)
OR the public default https://rpc-amoy.polygon.technology. Create a free app: https://dashboard.alchemy.com/
- ETHERSCAN_API_KEY Single Etherscan v2 key — verifies on PolygonScan (chainId 80002) with no extra key.
Get: https://etherscan.io/myapikey
- PRIVY_APP_ID Google sign-in + sponsored tx. See PRIVY DASHBOARD SETUP below to enable Polygon Amoy sponsorship.
Docs: https://docs.privy.io/llms-full.txt
- PINATA_JWT IPFS uploads (only if app pins media). Docs: https://docs.pinata.cloud/llms-full.txt
CREDIT (must appear in UI footer AND as NatSpec on every deployed contract):
Built during the Creative AI & Quantum Hackathon organised by StreetKode Fam during Indian Krump Festival 14
Market sizing.
TAM
$2B
global digital textile market
SAM
$400M
textile design software
SOM
$25M
niche digital fabric design tools
Indicative figures for hackathon pitches — refine with your own research before raising.
Adjacent entries.
fashion show documentation
Runway Replay
Pin high-resolution show images and metadata to create an unalterable runway history.
color palette preservationColor Code Vault
Store confirmed color palettes and their usage securely for design authenticity.
garment construction logsStitch Trace
Record detailed stitch patterns and techniques on-chain to prove craftsmanship.
inspiration curationMoodboard Ledger
Pin moodboards with images and notes securely to track creative evolution.