Open Format NFT is a web application that showcases the tooling we have designed in order for you to build your own platforms without having to worry about the complexity that can come with web3. It can be used as a starting template, a reference or an immediate implementation to get you up and running quickly.
As with most things we have a preference of the following libraries to build our web apps with. The ones with the biggest learning curves are highlighted below but please feel free to add or remove them as you see fit. The only one that is a core dependency is the Open Format React SDK.
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
- Tailwind CSS - Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.
- React Hook Form - Performant, flexible and extensible forms with easy-to-use validation.
- Open Format - Build your own NFT ecosystem. Trustless, permissionless and collaborative.
Clone the repo
git clone [email protected]:simpleweb/open-format-nft.git
Install dependencies
npm install or yarn install
Setup your environment variables
cp .env.local.example .env.local
| Variable | Description |
|---|---|
NEXT_PUBLIC_NFT_STORAGE_TOKEN |
This starter uses nft.storage to interact with IPFS. You can use any IPFS storage provider. Get an API Key |
NEXT_PUBLIC_IPFS |
https://ipfs.io/ipfs/ |
NEXT_PUBLIC_FACTORY_ID |
This is used for filtering the subgraph to only show tokens created in specific factory frontend. This can be any string value, but for uniqueness, we recommend using UUIDv4 |
NEXT_PUBLIC_POLYGON_SCAN |
Link to the network where you can view your contracts. |
NEXT_PUBLIC_EXAMPLE_NFT_LINK |
A link to the original creator of our example NFT. |
NEXT_PUBLIC_EXAMPLE_NFT_TOKEN_ADDRESS |
This is the example token address we have created for you to quickly interact with. Feel free to replace this with your own once up and running. |
NEXT_PUBLIC_NETWORK |
mumbai |
NEXT_PUBLIC_PINATA_JWT_TOKEN |
Pinata JWT token |
Run the app
npm run dev or yarn run dev
- We have made it quick and easy to add your own copy to all of the current components using the next-translate package. The common.json file is where you can add or remove copy in order to make it sound more like you. You can also remove this package if you wish and just add everything inline.
- View our documentation here.
- Click below to quickly get the app up on vercel.
Check out the Next.js deployment documentation for more details.