๐ Welcome to the Kitty Items Demo Application
This app was created to help you learn how to build on
- It demonstrates how to interact with Flow using the Flow client library (@onflow/fcl) from different areas of your application.
- It's a complete smart contract powered NFT marketplace that showcases how to use Flow's resource-oriented smart contract programming language: Cadence.
๐ฌ Live demo
live demo of Kitty Items, deployed on and the Testnet.
Check out theโจ Get Started
-
Create a Flow Testnet account
To work on this project you'll need to create an account on the Flow Testnet:
- Generate your new Flow account keys using the following command from Flow CLI:
flow keys generate
โ ๏ธ Make sure to save these keys in a safe place, you'll need them later. - Sign up for a Testnet account here: https://testnet-faucet.onflow.org/ by filling out the "Creating an Account" form using the public key generated from the previous step.
- Click "Submit". After a short time, you'll receive an e-mail with your newly created Flow account address.
-
these instructions to install Flow (command-line tools)
Follow
Using VSCode? Before cloning this project download and install the Cadence VSCode Extension.
flow cadence install-vscode-extension
-
Clone the project
git clone [email protected]:onflow/kitty-items.git
Once you have the project files, you'll find setup instructions in the README.md
files inside each folder.
The Cadence code is also well commented to help you understand how they function and how to use them.
-
kitty-items-js
Start by installing
Install this project first. It will help you deploy all of the Cadence contracts, and send transactions to bootstrap the marketplace with Kibble and Kitty Items. You'll find instructions for installing and starting the marketplace here.
Project Overview
๐ Legend
Above is a basic diagram of the parts of this project contained in each folder, and how each part interacts with the others.
-
The Flow Blockchain
- The hero of our story. Flow is a next-generation blockchain platform that is designed to be fast and easy to use. If you're new to Flow, consider reading more about it. Read the Flow Primer, or visit (Flow developer documentation).
-
kitty-items-web
Web App (Static website) |- 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.
- 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
-
kitty-items-js
Look Ma, a Web Server! |- 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 NodeJS backend. It's also chalk-full of handy patterns you'll proabably 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 Kibbles (fungible tokens) and Kitty Items (non-fungible tokens).
-
kitty-items-cadence
Cadence Code |- 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 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 (tests written in Golang).
-
kitty-items-deployer
Development Helpers |- Useful utilities for automating development related tasks like bootstrapping accounts and deploying contracts. Look through this project for an idea of what it's like to bootstrap your Flow accounts and Cadence smart contracts onto the Flow Emulator or Flow testnet.
-
An
@onflow/fcl
compatible wallet service that helps@onflw/fcl
perform authentication and authorization of Flow accounts.
๐บ What are Kitty Items?
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.
โ More Questions?
- Chat with the team on the Flow Discord server
- Ask questions on the Flow community forum
๐ Happy Hacking!