• Stars
    star
    112
  • Rank 312,240 (Top 7 %)
  • Language
    TypeScript
  • License
    Apache License 2.0
  • Created over 4 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Flow Playground front-end app ๐Ÿคนโ€โ™‚๏ธ

Flow Playground

The Flow Playground is the best way to learn and try Cadence. For newcomers to Flow, the Flow Developer Documentation includes a guide on how to use the Playground.

Philosophy

How It's Built

We built the Flow Playground as a static website or typical "JAM stack" website because of these properties:

  • Portability. It is easy to move a static website GUI between platforms if desired
  • We want to have the ability to deploy the Playground on peer-to-peer networks like IPFS or DAT
  • Fast build and deploy cycles
  • We want to maximize the amount of potential contributions

What is the Playground?

We want the Playground to have features that help you build on Flow. We also want to balance functionality with learning.

The Playground is a learning tool first and an awesome development tool second, although the two go hand-in-hand.

Contributing

Read the Contribution Guidelines

Git Workflow

Developing

Pre-requisites

You'll need to have Docker installed to develop.

Installation

Clone the repo

git clone [email protected]:onflow/flow-playground.git

Install dependencies

npm install

Rename .env.local to .env

Start the API (Flow Emulator and services)

docker run -e FLOW_DEBUG=true -e FLOW_SESSIONCOOKIESSECURE=false -p 8080:8080 gcr.io/dl-flow/playground-api:latest

Start the React app

npm run start

โœจ The Playground is running on localhost:3000 โœจ

If you are using VSCode, you can use this debugging config (works with workspaces)

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch",
      "type": "chrome",
      "request": "launch",
      "port": 9229,
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./*": "${webRoot}/*",
        "webpack:///*": "*"
      },
      "trace": true
    }
  ]
}

Deployment

The runbook contains details on how to deploy the Flow Playground web app.

More Repositories

1

flow-go

A fast, secure, and developer-friendly blockchain built to support the next generation of games, apps, and the digital assets that power them.
Go
532
star
2

cadence

Cadence, the resource-oriented smart contract programming language ๐Ÿƒโ€โ™‚๏ธ
Go
505
star
3

flow-nft

The non-fungible token standard on the Flow blockchain
Cadence
459
star
4

kitty-items

Kitty Items: CryptoKitties Sample App
JavaScript
408
star
5

flow

Flow is a fast, secure, and developer-friendly blockchain built to support the next generation of games, apps, and the digital assets that power them ๐ŸŒŠ
Go
357
star
6

fcl-js

FCL (Flow Client Library) - The best tool for building JavaScript (browser & NodeJS) applications on Flow ๐ŸŒŠ
JavaScript
318
star
7

flow-go-sdk

Tools for building Go applications on Flow ๐ŸŒŠ
Go
211
star
8

flow-cli

The Flow CLI is a command-line interface that provides useful utilities for building Flow applications
Go
207
star
9

flow-ft

The Fungible Token standard on the Flow Blockchain
Cadence
136
star
10

nft-storefront

A general-purpose Cadence contract for trading NFTs on Flow
Cadence
102
star
11

flow-core-contracts

Cadence smart contracts that define core functionality of the Flow protocol
Go
86
star
12

flow-emulator

The Flow Emulator is a lightweight tool that emulates the behaviour of the real Flow network
Go
84
star
13

freshmint

TypeScript
68
star
14

vscode-cadence

The Visual Studio Code extension for Cadence
TypeScript
52
star
15

fcl-dev-wallet

A Flow wallet for development purposes. To be used with the Flow Emulator.
Go
50
star
16

developer-grants

Grants for developers that contribute to the broader developer ecosystem
50
star
17

flip-fest

A backlog of all the available tasks to complete for Flow's FLIP Fest.
50
star
18

flow-js-testing

Testing framework to enable Cadence testing via a set of JavaScript methods and tools
JavaScript
46
star
19

atree

Atree provides scalable arrays and scalable ordered maps.
Go
39
star
20

nft-catalog

Cadence
37
star
21

flow-101-quest

Cadence
30
star
22

flips

Flow Improvement Proposals
25
star
23

cadence-tools

Developer tools for Cadence
Go
24
star
24

flow-cadut

Node based template generator to simplify interaction with Cadence files.
JavaScript
22
star
25

wallet-api

A REST API to create and manage Flow accounts
HTML
22
star
26

walletless-arcade-example

An example Flow App to demonstrate walletless onboarding and promote composable, secure, and smooth UX for on-chain games without the need for a traditional backend.
Cadence
21
star
27

monster-maker

Create a monster on Flow
TypeScript
18
star
28

hybrid-custody

Cadence suite enabling Hybrid Custody on Flow
Cadence
15
star
29

rosetta

Rosetta implementation for the Flow blockchain
Go
15
star
30

UnityFlowSDK

Flow SDK for Unity - build Unity games on the Flow blockchain
C#
13
star
31

flow-java-client-example

Java
12
star
32

wallet-extension-example

An example and guide showing how to build an FCL-compatible wallet extension on Flow.
JavaScript
12
star
33

fcl-discovery

JavaScript
11
star
34

flow-interaction-template-service

TypeScript
11
star
35

flow-playground-api

Flow Playground back-end app ๐Ÿคนโ€โ™‚๏ธ
Go
11
star
36

linked-accounts

Cadence
11
star
37

ledger-app-flow

JavaScript
10
star
38

sc-eng-gaming

Showcasing how a Rock Paper Scissors game could be made #onFlow
Cadence
10
star
39

flow-batch-scan

Library for running batch scans of the flow network
Go
10
star
40

flow-evm-gateway

FlowEVM Gateway implements an Ethereum-equivalent JSON-RPC API for EVM clients to use
Go
9
star
41

cadence-libraries

Libraries for common programming utilities in the Cadence smart contract programming language
Go
9
star
42

flow-evm-bridge

Repository for contracts supporting bridge between Flow <> EVM
Cadence
9
star
43

sdks

Tips and resources for building Flow SDKs and client libraries ๐Ÿ”ง
Cadence
9
star
44

developer-portal

Source code for developers.flow.com
TypeScript
8
star
45

docs

Flow Developer Portal. Discover the developer ecosystem and master the Flow blockchain
TypeScript
8
star
46

cadence-lang.org

The home of the Cadence website
MDX
8
star
47

cadence-cookbook

JavaScript
8
star
48

flow-multisig

JavaScript
8
star
49

OWBSummer2020Project

OWB (Open World Builders) bootcamp summer 2020 cohort capstone projects submission
CSS
8
star
50

Flow-Working-Groups

8
star
51

casestudies

Learn more about building on Flow from teams that have already launched successful projects
7
star
52

BFTune

Byzantine Fault Tolerance (BFT) Testing Framework for Flow
7
star
53

cadence-style-guide

The Flow Team guide on how to write better Cadence code
7
star
54

twg

Tokenomics Working Group
6
star
55

flowkit

Go
6
star
56

flow-interaction-template-tools

TypeScript
6
star
57

flow-kmm

Kotlin Multiplatform Mobile (KMM) library for building Android and iOS applications on the Flow blockchain
Objective-C
5
star
58

scaffold-flow

๐ŸŒŠ forkable Flow dev stack focused on fast product iterations
JavaScript
5
star
59

flow-issue-box

A public repository dedicated to collecting issues and feedback from external contributors. The Issue Box ๐Ÿ—ณ๏ธ is similar to a backlog, where the issue is later triaged and assigned to the proper team.
5
star
60

ccf

Cadence Compact Format (CCF) is a binary data format and alternative to JSON-CDC
4
star
61

token-cold-storage

JavaScript
4
star
62

cddl

A CDDL implementation in Go
Go
4
star
63

Offers

Cadence
4
star
64

full-observer-node-example

An example demonstrating the use of the Flow unstaked consensus follower
Go
4
star
65

flow-account-api

Go
4
star
66

faucet

Cadence
4
star
67

contract-updater

Enabling delayed contract updates to a wrapped account at or beyond a specified block height
Cadence
4
star
68

flow-validator

Run a Flow node and help secure the network
4
star
69

flow-playground-tutorials

Repository to contain and test tutorials, which are deployed to Playground and used in docs
Cadence
3
star
70

flow-public-key-indexer

A observer service for indexing flow Accounts and by their associated Keys.
Go
3
star
71

flow-cadence-eth-utils

Cadence
3
star
72

flow-cadence-hrt

Write your Cadence tests with human readable TOML
JavaScript
3
star
73

random-coin-toss

An example repo demonstrating safe use of onchain randomness
Cadence
3
star
74

blindninja

Blind Ninja is a composability-first fully onchain game on Flow
JavaScript
3
star
75

waterhose

Waterhose listens to Flow events and publishes them to Kafka
2
star
76

fcl-auth-android

A Kotlin library for the Flow Client Library (FCL) that enables Flow wallet authentication on Android devices
Kotlin
2
star
77

service-account

Cadence
2
star
78

fcl-six

Stored Interactions (SIX) for FCL
JavaScript
2
star
79

flow-scaffold-list

Scaffolds for starting Flow apps
2
star
80

hybrid-custody-scaffold

Starter template for working with HybridCustody contract suite
Cadence
2
star
81

fcl-contracts

Cadence contracts used by the Flow Client Library (FCL)
Cadence
2
star
82

crypto

Assembly
2
star
83

dex

2
star
84

gwg

The Flow Governance Working Group (GWG) is an open-for-all forum that plays a pivotal role in shaping the Flow ecosystem with a focus on discussing and resolving governance issues.
2
star
85

next-docs-v0

next-docs
JavaScript
1
star
86

storage-fees-scripts

1
star
87

unity-flow-sdk-api-docs

HTML
1
star
88

fusd

Cadence source code for the FUSD stablecoin on Flow
Cadence
1
star
89

band-oracle-contracts

Contracts and related for integration with Band protocol Oracle Network
Cadence
1
star
90

cadence-1-migrator

Cadence
1
star
91

fcl-gcp-kms-web

JavaScript
1
star
92

fcl-next-scaffold

JavaScript
1
star
93

wallet-wg

Flow Wallet Working Group
1
star
94

minting-nfts-in-a-set

Cadence Cookbook Recipe: Minting NFTs in a Set
Cadence
1
star
95

create-a-marketplace

Cadence Cookbook Recipe: Create a Marketplace
Cadence
1
star
96

metadata-views

Cadence Cookbook Recipe: Metadata Views
Cadence
1
star
97

create-a-topshot-play

Cadence Cookbook Recipe: Create a TopShot Play
Cadence
1
star
98

collection-for-holding-nfts

Cadence Cookbook Recipe: Collection for Holding NFTs
Cadence
1
star
99

add-a-play-to-topshot-set

Cadence Cookbook Recipe: Add a Play to TopShot Set
Cadence
1
star
100

minting-a-moment-in-topshot-set

Cadence Cookbook Recipe: Minting a Moment in TopShot Set
Cadence
1
star