MoodboardChain
Create decentralized moodboards pinned to IPFS for collaborative color grading projects.
IPFS via Pinata· decentralized storage
Section · Onchain
full primer →The primitive.
Every color study curation artefact is pinned to IPFS through Pinata; filmmakers get a permanent CID and a public gateway preview instead of a fragile cloud URL.
Why this primitivePinata JWT ensures moodboards remain accessible and unaltered during creative processes.
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.
METAMASK_PRIVATE_KEY
Exported from MetaMask. Fund on Plasma Testnet via openfaucet.org (free XPL).
open ↗PLASMA_RPC_URL
Plasma Testnet HTTPS RPC. Defaults to https://testnet-rpc.plasma.to; use a partner RPC for hackathon load.
open ↗Add these in your Lovable project under Settings → Secrets before pasting the prompt below. Plasmascan verification needs no API key.
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 "MoodboardChain" in ONE Lovable message. Single-page demo.
CONCEPT
Create decentralized moodboards pinned to IPFS for collaborative color grading projects.
Discipline: Filmmaking & Animation (color study curation).
Onchain primitive: IPFS via Pinata. Why this primitive: Pinata JWT ensures moodboards remain accessible and unaltered during creative processes.
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 Plasma Testnet, verified on Plasmascan.
- Privy is the auth layer (Google login, embedded wallet). Users pay their own gas in XPL.
- 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).
- Target chain is **Plasma Testnet** (chainId 9746, native token XPL, ~1s blocks,
full EVM). RPC: https://testnet-rpc.plasma.to. Explorer: https://testnet.plasmascan.to.
Faucet: https://openfaucet.org/.
- Define the chain inline for viem (Privy accepts any viem chain, no built-in export needed):
const plasmaTestnet = {
id: 9746, name: 'Plasma Testnet',
nativeCurrency: { name: 'XPL', symbol: 'XPL', decimals: 18 },
rpcUrls: { default: { http: [import.meta.env.VITE_PLASMA_RPC_URL || 'https://testnet-rpc.plasma.to'] } },
blockExplorers: { default: { name: 'Plasmascan', url: 'https://testnet.plasmascan.to' } },
} as const;
- SSR-safe Privy mount is mandatory. Never import @privy-io/react-auth at
module scope of a route file — it crashes SSR. Use
lazy(() => import('./privy-client-entry')) inside <ClientOnly> + <Suspense>,
and put <PrivyProvider> only inside privy-client-entry.tsx.
- PrivyProvider config — pass the plasmaTestnet chain via supportedChains and
defaultChain so the embedded wallet lands on the right network:
<PrivyProvider appId={import.meta.env.VITE_PRIVY_APP_ID}
config={{ loginMethods:['google','email'],
supportedChains:[plasmaTestnet], defaultChain: plasmaTestnet,
embeddedWallets:{ ethereum:{ createOnLogin:'users-without-wallets' } },
appearance:{ theme:'dark' } }}>
- Read the embedded wallet from useWallets, not user.wallet:
const embedded = wallets.find(w => w.walletClientType === 'privy');
- Every send goes through Privy `useSendTransaction` with `address` and
`chainId: 9746`. Do NOT pass `sponsor: true` — Privy's native gas sponsorship
does not cover Plasma; users pay their own XPL. Wrap the call in a 45s
Promise.race timeout that tells the user to top up XPL if their balance is 0:
await Promise.race([
sendTransaction(
{ to, data, chainId: 9746 },
{ address: embedded.address }
),
new Promise((_, r) => setTimeout(() => r(new Error(
"Plasma tx timed out. Check the embedded wallet has XPL from https://openfaucet.org/"
)), 45_000)),
]);
- Preflight: before calling sendTransaction, read the wallet's XPL balance via
a viem publicClient({ chain: plasmaTestnet, transport: http() }). If it's 0,
render a toast + inline banner with a copy-address button and a link to
https://openfaucet.org/ so the user can drip XPL to themselves.
- Do NOT pass uiOptions:{ showWalletUIs:false } — it aborts with
"signal is aborted without reason". The approval sheet is fine.
- Do NOT add ZeroDev / SmartWalletsProvider / any paymaster URL. Plasma
Testnet uses simple EOA transactions.
- 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 lives in /contracts (kept outside the Vite bundle). Install
`@nomicfoundation/hardhat-toolbox` and `@nomicfoundation/hardhat-verify@latest`.
- hardhat.config.cjs — Plasma Testnet network + Plasmascan (Etherscan-compatible) verify:
require("@nomicfoundation/hardhat-toolbox");
require("@nomicfoundation/hardhat-verify");
module.exports = {
solidity: { version: "0.8.24", settings: { optimizer: { enabled: true, runs: 200 } } },
networks: { plasmaTestnet: {
url: process.env.PLASMA_RPC_URL || "https://testnet-rpc.plasma.to",
accounts: [process.env.METAMASK_PRIVATE_KEY.startsWith("0x")
? process.env.METAMASK_PRIVATE_KEY : "0x" + process.env.METAMASK_PRIVATE_KEY],
chainId: 9746,
} },
etherscan: {
apiKey: { plasmaTestnet: process.env.PLASMASCAN_API_KEY || "empty" },
customChains: [{
network: "plasmaTestnet",
chainId: 9746,
urls: { apiURL: "https://testnet.plasmascan.to/api",
browserURL: "https://testnet.plasmascan.to/" },
}],
},
sourcify: { enabled: false },
};
- Deploy: `npx hardhat run scripts/deploy.cjs --network plasmaTestnet`.
- Verify (right after deploy, no constructor args for these contracts):
`npx hardhat verify --network plasmaTestnet <address>`
Source becomes readable at `https://testnet.plasmascan.to/address/<address>#code`.
- Frontend reads via viem: `createPublicClient({ chain: plasmaTestnet,
transport: http(import.meta.env.VITE_PLASMA_RPC_URL) })`. Expose the RPC to
the client by also setting VITE_PLASMA_RPC_URL to the same value.
- Write the deployed address to `src/data/contract.json` so the UI links to
`https://testnet.plasmascan.to/address/<address>`.
CONTRACT (contracts/MoodboardChain.sol):
```solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.24;
/// @title CIDLogMoodboardChain
/// @notice Create decentralized moodboards pinned to IPFS for collaborative color grading projects.
/// @notice Built during the Creative AI & Quantum Hackathon organised by StreetKode Fam during Indian Krump Festival 14
contract CIDLogMoodboardChain {
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 Plasma Testnet.
2. If wallet XPL balance is 0, show the openfaucet.org top-up banner with copy-address.
3. On submit, pin the color study curation artefact to Pinata, then call `log(cid)` on the contract via the Privy embedded wallet. Render the CID, IPFS gateway preview, and Plasmascan tx link.
4. 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 Plasma Testnet deployer key. Fund it (free XPL): https://openfaucet.org/ or https://faucet.quicknode.com/plasma
- PLASMA_RPC_URL Plasma Testnet HTTPS endpoint. Default: https://testnet-rpc.plasma.to (public). For hackathon load, use a partner RPC (see https://docs.plasma.org/docs/plasma-chain/tools/rpc-providers).
- PRIVY_APP_ID Google sign-in + embedded wallet. 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
Optional:
- PLASMASCAN_API_KEY Not required. Plasmascan's Etherscan-compatible API accepts any string; pass "empty".
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
$400M
digital moodboard platforms
SAM
$100M
collaborative color grading tools
SOM
$15M
freelance colorists and animators using moodboards
Indicative figures for hackathon pitches — refine with your own research before raising.
Adjacent entries.
storyboard management
FrameForge Archive
Securely store and share storyboards as immutable IPFS manifests to simplify team collaboration.
material asset libraryTextureVault
Pin and catalog textures on IPFS for reuse and verified provenance in animation projects.
scene version controlAnimScene Sync
Automatically pin scene JSON manifests to IPFS to track animation iterations and changes.
character rig sharingRigPin Sync
Share and pin character rig files and metadata on IPFS for verified reuse across teams.