๐ Welcome! This demo app is designed to help you learn to build on Flow.
- Kitty Items is a complete NFT marketplace built with Cadence, Flow's resource-oriented smart contract programming language.
- Learn how to deploy contracts, mint NFTs, and integrate user wallets with the Flow Client Library (FCL).
Check out the live demo of Kitty Items, deployed on the Flow Testnet.
If you'd like to deploy your own version, see the deploy to Heroku instructions near the bottom to this setup guide.
๐ This project requires Docker
. See: Docker installation instructions
๐ This project requires NodeJS v14.x
or above. See: Node installation instructions
๐ This project requires flow-cli v0.28.0
or above. See: Flow CLI installation instructions
git clone https://github.com/onflow/kitty-items.git
- Run
npm install
in the root of the project. - Run
npx lerna exec npm install
to install project dependencies.
Continue reading the sections below for instructions on how to start the project for local development, or testnet development.
-
Run
npm run start:dev
- Local development uses the Flow Emulator and the FCL Development Wallet to simulate the blockchain and an FCL-compatible wallet.
-
Run
flow project deploy --network emulator
- All contracts are deployed to the emulator.
-
Visit
http://localhost:3001
and follow the instructions "Initialize the Service Account to mint Kitty Items" at the top of the webpage.
Thats it! ๐
You'll need a Testnet account to work on this project. Here's how to make one:
Generate a new key pair with the Flow CLI:
flow keys generate
Go to the Flow Testnet Faucet to create a new account. Use the public key from the previous step.
After your account has been created, export the following environment variables to your shell:
# Replace these values with the address returned from the faucet and the
# private key you generated in the first step!
export FLOW_ADDRESS=address
export FLOW_PRIVATE_KEY=xxxxxxxxxxxx
export FLOW_PUBLIC_KEY=xxxxxxxxxxxx
-
Run:
npm run start:testnet
- Testnet development will connect the application to Flow's testnet
-
Run:
flow project deploy --network testnet -f flow.json -f flow.testnet.json
- All contracts are deployed to the Flow testnet.
-
Select "Blocto" to log in.
Thats it! ๐
Visit http://localhost:3001
to interact with your new instance of Kitty Items!
If you'd like to deploy a version of this app to Heroku for testing, you can use this button!
You'll need to supply the following configuration variables when prompted:
# The Flow address and private key you generated above
MINTER_ADDRESS
MINTER_PRIVATE_KEY
# The Flow address where you have deployed your Kitty Items contract.
# (usually the same Flow address as above)
NEXT_PIBLIC_CONTRACT_KITTY_ITEMS
NEXT_PUBLIC_CONTRACT_NFT_STOREFRONT
Above is a basic diagram of the parts of this project contained in each folder, and how each part interacts with the others.
1. Web App (Static website) | kitty-items/web
A true dapp, client-only web app. This is a complete web application built with React that demonstrates how to build a static website that can be deployed to an environment like IPFS and connects directly to the Flow blockchain using @onflow/fcl
. No servers required. @onflow/fcl
handles authentication and authorization of Flow accounts, signing transactions, and querying data using using Cadence scripts.
2. Look Ma, a Web Server! | kitty-items/api
We love decentralization, but servers are still very useful, and this one's no exception. The code in this project demonstrates how to connect to Flow using Flow JavaScript SDK from a Node JS backend. It's also chalk-full of handy patterns you'll probably want to use for more complex and feature-rich blockchain applications, like storing and querying events using a SQL database (Postgres). The API demonstrates how to send transactions to the Flow blockchain, specifically for minting Kitty Items (non-fungible tokens).
3. Cadence Code | kitty-items/cadence
Cadence smart contracts, scripts & transactions for your viewing pleasure. This folder contains all of the blockchain logic for the marketplace application. Here you will find examples of fungible token and non-fungible token (NFT) smart contract implementations, as well as the scripts and transactions that interact with them. It also contains examples of how to test your Cadence code.
Items are hats for your cats, but under the hood they're non-fungible tokens (NFTs) stored on the Flow blockchain.
Items can be purchased from the marketplace with fungible tokens. In the future you'll be able to add them to Ethereum CryptoKitties with ownership validated by an oracle.
- Chat with the team on the Flow Discord server
- Ask questions on the Flow community forum
๐ Happy Hacking!