How to Create a Favorites dApp on SOON

In this guide, you will learn how to create and deploy both the Anchor program and UI for a basic on-chain Favorites dApp. This dApp will allow users to store their favorite number, color, and hobbies through on-chain transactions.

What you will learn

Setting up your development environment
Using npx create-soon-app
Understanding Anchor program structure
Creating and using Program Derived Addresses (PDAs)
Connecting an Anchor program to a Next.js UI

Prerequisites

For this guide, you will need:

Node.js and pnpm installed
Rust and Cargo
Anchor CLI
A SOON compatible wallet

Setting up the project

Create a new project using:

npx create-soon-app my-favorites-app

This will set up a complete project with:

Next.js frontend
Anchor program
Tailwind CSS
Jupiter wallet adapter integration
SOON testnet configuration

Understanding the Anchor Program

The Anchor program is located in anchor-program/programs/favorites/src/lib.rs. Let’s break down its key components:

Program State

#[account]
#[derive(InitSpace)]
pub struct Favorites {
    pub number: u64,
    #[max_len(50)]
    pub color: String,
    #[max_len(5, 50)]
    pub hobbies: Vec<String>
}

This structure defines what we’ll store on-chain:

A favorite number (u64)
A favorite color (string up to 50 chars)
A list of hobbies (up to 5 hobbies, each up to 50 chars)

Instruction Handler

pub fn set_favorites(
    ctx: Context<SetFavorites>,
    number: u64,
    color: String,
    hobbies: Vec<String>
) -> Result<()> {
    // Store user's favorites
    context.accounts.favorites.set_inner(Favorites {
        number,
        color,
        hobbies
    });
    Ok(())
}

Frontend Integration

The frontend is a Next.js application that uses:

Jupiter wallet adapter for SOON testnet
Anchor for program interaction
Tailwind CSS for styling

Key Components

Wallet Connection:

const wallet = useWallet();
const { publicKey, sendTransaction } = useWallet();

State Management:

const [number, setNumber] = useState("");
const [color, setColor] = useState("");
const [hobbies, setHobbies] = useState<string[]>([]);

Transaction Handling:

const setFavorites = async () => {
  const [favoritesPda] = PublicKey.findProgramAddressSync(
    [Buffer.from("favorites"), publicKey.toBuffer()],
    programId
  );

  const transaction = await program.methods
    .setFavorites(new BN(number), color, hobbies)
    .accounts({
      user: wallet.publicKey,
      favorites: favoritesPda,
      systemProgram: SystemProgram.programId,
    })
    .transaction();
    
  const hash = await sendTransaction(transaction, connection);
};

Testing the dApp

Connect your SOON wallet
Input your favorites:
- Enter a favorite number
- Choose a favorite color
- Add up to 5 hobbies
Click “Save Favorites” to store on-chain
View the transaction on SOON Explorer

Resources

SOON Explorer: https://explorer.testnet.soo.network
SOON App: https://github.com/rkmonarch/soon-app

Using SOON

Building on SOON

SOON Node

Metaplex

How to Create a Favorites dApp on SOON

What you will learn

Prerequisites

Setting up the project

Understanding the Anchor Program

Program State

Instruction Handler

Frontend Integration

Key Components

Testing the dApp

Resources

​What you will learn

​Prerequisites

​Setting up the project

​Understanding the Anchor Program

​Program State

​Instruction Handler

​Frontend Integration

​Key Components

​Testing the dApp

​Resources

What you will learn

Prerequisites

Setting up the project

Understanding the Anchor Program

Program State

Instruction Handler

Frontend Integration

Key Components

Testing the dApp

Resources