Building a Web3 Application with Substrate and Rust

Unlock the potential of decentralized applications with your own custom blockchain.

Table of Contents

• Introduction
• Features
• Prerequisites
• Installation
• Running the Node
• Developing Smart Contracts
• Integrating the Frontend
• Project Structure
• Contributing

---

Introduction

This project demonstrates how to build a Web3 application using Substrate and Rust. It includes:

• A custom Substrate blockchain node.
• Smart contracts developed with ink!.
• A frontend application interacting with the blockchain via the Polkadot.js API.

By following this guide, you'll set up a local blockchain network, deploy smart contracts, and integrate them with a frontend application.

Features

• Customizable Blockchain Node: Modify and extend your blockchain's runtime.
• Smart Contract Support: Write and deploy smart contracts using ink!.
• Frontend Integration: Interact with your blockchain through a user-friendly interface.
• Modular Design: Easily add new pallets and functionalities.

Prerequisites

Before you begin, ensure you have the following installed:

• Rust and Cargo: Install Rust
• Node.js and npm: Install Node.js
• Git: Install Git
• cargo-contract: For ink! smart contract development

Installation

1. Clone the Repository

git clone https://github.com/yourusername/yourproject.git
cd yourproject

2. Install Rust Toolchain

Ensure that you have the latest stable Rust toolchain:

rustup install stable
rustup update

3. Install Substrate Prerequisites

Follow the official Substrate installation guide for your operating system.

4. Install cargo-contract

cargo install cargo-contract --force

5. Build the Substrate Node

cd backend
cargo build --release

Running the Node

Start your local blockchain node:

./target/release/backend-template --dev

This command runs the node in development mode with temporary state.

Developing Smart Contracts

1. Navigate to the Contracts Directory

cd contracts/my_contract

2. Build the Smart Contract

cargo +nightly contract build

3. Deploy the Contract

Use the Polkadot.js Apps UI to deploy your contract:

1. Navigate to the Contracts tab.
2. Upload your contract's .contract metadata file from the target directory.
3. Follow the on-screen instructions to deploy.

Integrating the Frontend

1. Navigate to the Frontend Directory

cd frontend

2. Install Dependencies

npm install

3. Configure the Connection

Ensure the frontend is configured to connect to your local node. Update the WebSocket endpoint in your configuration file (e.g., config.js):

module.exports = {
  providerEndpoint: 'ws://localhost:9944',
};

4. Start the Frontend Application

npm start

Visit http://localhost:3000 in your browser to interact with your application.

Project Structure

yourproject/
├── node/                   # Custom Substrate node
│   ├── src/
│   └── Cargo.toml
├── runtime/                # Runtime modules (pallets)
│   ├── src/
│   └── Cargo.toml
├── contracts/              # ink! smart contracts
│   └── my_contract/
│       ├── src/
│       └── Cargo.toml
├── frontend/               # Frontend application
│   ├── src/
│   ├── package.json
│   └── ...
├── scripts/                # Deployment and utility scripts
├── README.md
└── LICENSE

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create a new branch: git checkout -b feature/your-feature-name.
3. Commit your changes: git commit -m 'Add some feature'.
4. Push to the branch: git push origin feature/your-feature-name.
5. Open a pull request.

Please make sure to update tests as appropriate.