Giter VIP home page Giter VIP logo

kitty-items's Introduction

๐Ÿ‘‹ Welcome! This demo app was created to help you learn how 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).

๐ŸŽฌ Live Demo

Check out the live demo of Kitty Items, deployed on IPFS and the Flow Testnet.

โœจ Getting Started

1. Install the Flow CLI

Before you start, install the Flow command-line interface (CLI).

2. Create a Flow Testnet account

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 (โš ๏ธ Make sure to save these keys in a safe place, you'll need them later.)
  • Go to the Flow Testnet Faucet to create a new account. Use the public key from the previous step.
  • After a short time, you'll receive an email with your newly-created Flow account address.

3. 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.

4. Deploy the contracts

Follow the deployer instructions to deploy the Kitty Items Cadence contracts to your Testnet account.

5. Run the API

After the contracts are deployed, follow the kitty-items-js instructions to install and run the Kitty Items API. This backend service is responsible for initializing accounts, minting NFTs, and processing events.

6. Launch the web app

Lastly, follow the kitty-items-web instructions to launch the Kitty Items front-end React app.

Project Overview

kitty-items-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.

1. The Flow Blockchain

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 in the Flow Primer, or visit the developer documentation.

2. 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.

3. Look Ma, a Web Server! | kitty-items-js

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).

4. 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 (tests written in Golang).

5. Development Helpers | kitty-items-deployer

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.

6. User Wallet

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?


๐Ÿš€ Happy Hacking!

kitty-items's People

Contributors

fkenji avatar 10thfloor avatar psiemens avatar redakhyatti avatar orodio avatar sideninja avatar jordankitty avatar jordanpublic avatar 0xjayshen avatar laynelafrance avatar olegggatttor avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.