NFT collection of images where you can log in with your Metamask and mint...if there are any left
- NextJS - The React Framework for Production.
- TailwindCSS 3 - Rapidly build modern websites without ever leaving your HTML
- TypeScript - TypeScript is JavaScript with syntax for types.
- Thirdweb - Smart contracts you control. Tools that accelerate your workflow. Intuitive SDKs and widgets for developers.
- Sanity - Sanity.io is the unified content platform that powers better digital experiences.
- React Hot Toast - Smoking hot React notifications.
Requirements
- Files must contain one .csv or .json file with metadata. Download example.csv. Download example.json.
- The csv must have a
name
column, which defines the name of the NFT. - Asset names must be sequential 0,1,2,3...n.[extension]. It doesn't matter at what number you begin. (Example:
131.png
,132.png
).
Options
- Images and other file types can be used in combination.
- They both have to follow the asset naming convention above. (Example:
0.png
and0.mp4
,1.png
and1.glb
, etc.) - When uploading files, we will upload them and pin them to IPFS automatically for you. If you already have the files uploaded, you can add an
image
and/oranimation_url
column and add the IPFS hashes there. Download example-with-ipfs.csv
Download example-with-ipfs.csv
Sanity is the platform for structured content that lets you build better digital experiences. It comes with an open-source editor built in React, Sanity Studio, and a real-time hosted data store, Content Lake.
Get started with the boosted free plan: sanity.io/sonny
npm install -g @sanity/cli
sanity init --coupon sonny2022
We've doubled the free included monthly usage to:
- 200k API requests
- 1M API CDN requests
- 20GB Bandwidth.
- You also get unlimited admin users so you and your whole team can try it out – be it for your own website, app project, podcasting backend, or whatever one can use a real-time graph-based API for.
npm install -g @sanity/cli
oryarn add -g @sanity/cli
sanity login
sanity init --coupon sonny2022
- Project name: Wong NFT Drop
- Use the default dataset configuration? Y
- Project output path: (just type, "Sanity" and press enter)
- Select project template? Blog (schema)
- Done!
- https://docs.thirdweb.com/react - The thirdweb React SDK provides a collection of hooks to use in your React apps to interact with your thirdweb contracts.
- Google drive - with images and .csv file for Thirdweb
- My Sanity Studio - Live Link to Collections.
CREATE NEXT.JS APP WITH TAILWINDCSS3
npx create-next-app --example with-tailwindcss YOUR-APP-NAME-HERE
SANITY
yarn add -g @sanity/cli
or
npm install -g @sanity/cli
sanity login
sanity init --coupon sonny2022
yarn add next-sanity @sanity/image-url
or
npm install next-sanity @sanity/image-url
sanity start (cd in to /sanity folder first)
sanity deploy (cd in to /sanity folder first)
Big thanks to Sonny and crew, that created this amazing content.
- Sonny Sangha - YouTube
- PapaReact - Website