Sui dApp Starter - Easy-to-Use Full-Stack Sui Starter

Won the 1st place in the Randomness category of the Sui Overflow 2024 hackathon

Motivation

Most of the Sui starters I found were either very basic or one-sided (frontend or backend). Thanks to my experience with various full-stack starters and templates, I knew how to do better, so I started this template with the goal of providing all basic tools and components for you to focus on your business logic from day one and not spend weeks on creating your app skeleton. // @kkomelin

Features

• Suibase: Painless work with the networks and system dependencies
• Local Sui Explorer: Browse your transactions and objects locally
• pnpm: More efficient package management for monorepos
• TypeScript: Less error-prone JavaScript
• React: Good old React for truly decentralized apps
• Tailwind CSS: Utility-first CSS for more efficient styling
• Vite + SWC: Faster app bundling and optimizing
• Radix UI: Accessible React components to prototype quicker
• Sui dApp Kit: All you need to work with Sui network on frontend
• Components and Hooks: useTransact, useNetworkType, NetworkType, useBalance, Balance, useFaucet, Faucet and more
• Frontend Deployment: Firebase, Walrus Sites, Arweave
• One-liner Install: Just pnpm create sui-dapp@latest
• Demo app: Illustrates the use of Sui On-Chain Randomness and Sui Object Display (NFT)

Prerequisites

Before you begin, install the following:

• Suibase
• Node (>= 20)
• pnpm (>= 9)

Installation

Use this template ->

or

pnpm create sui-dapp@latest

Usage

1. Run the local Sui network:

pnpm localnet:start

Local Sui Explorer will be available on localhost:9001

2. Deploy the demo contract to the local network:

pnpm localnet:deploy

This command skips dependency verifications to prevent dependency version mismatch issues, which are caused by local and remote Sui version mismatch. The deploy commands for devnet, testnet and mainnet do perform such verifications.

3. Switch to the local network in your browser wallet settings.

4. Fund your localnet account/address:

You have a few options here:

a) Use the Faucet button integrated into your wallet (e.g. Sui Wallet).

b) Copy the localnet address from your wallet and run the following in your console:

pnpm localnet:faucet 0xYOURADDRESS

c) Run the app and use the Faucet button in the footer.

5. Run the app:

pnpm start

Find all commands in the documentation.

Test

Backend

pnpm test

Docs & Support

• Troubleshooting Guide
• Project Documentation
• Improvement Ideas
• Discord Support

Useful Links

• Suibase Docs
• Move Book
• Sui Move: Code Conventions
• @mysten/create-dapp - official starter
• Awesome Sui

License & Copyright

Copyright (c) 2024 Konstantin Komelin and other contributors

Code is licensed under MIT

SVG Graphics used for NFTs is licensed under CC-BY 4.0