​
What you will learn

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

​
Prerequisites

For this guide, you will need:
  • Node.js and pnpm
  • Rust and Cargo
  • Anchor CLI
  • A SOON compatible wallet
  • SOON RPC endpoint

​
Getting Started

​
1. Clone the Repository

# Clone the repository
git clone https://github.com/rkmonarch/soon-app.git

# Navigate to the project directory
cd soon-app
Verify the project structure: 
ls
You should see the following structure: 
soon-app/
├── anchor-program/     # Solana program written in Anchor
├── src/               # Frontend Next.js application
├── .eslintrc.json
├── .gitignore
├── next-env.d.ts
├── next.config.mjs
├── package.json
├── pnpm-lock.yaml
├── postcss.config.mjs
├── tailwind.config.ts
└── tsconfig.json

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

​
Program ID Declaration

declare_id!("E6t9eu8HpaFx6PymgHuPPrGwMegFYrCdLa4EeejjE4ji");

​
Instruction Handler

#[program]
pub mod favorites {
    use super::*;

    pub fn set_favorites(
        ctx: Context<SetFavorites>,
        number: u64,
        color: String,
        hobbies: Vec<String>
    ) -> Result<()> {
        let user_public_key = ctx.accounts.user.key();
        msg!(
            "User {user_public_key}'s favorite number is {number}, favorite color is: {color}",
        );
        msg!(
            "User's hobbies are: {:?}",
            hobbies
        ); 

        ctx.accounts.favorites.set_inner(Favorites {
            number,
            color,
            hobbies
        });
        Ok(())
    }
}

​
Account Context

#[derive(Accounts)]
pub struct SetFavorites<'info> {
    #[account(mut)]
    pub user: Signer<'info>,

    #[account(
        init_if_needed, 
        payer = user, 
        space = ANCHOR_DISCRIMINATOR_SIZE + Favorites::INIT_SPACE, 
        seeds=[b"favorites", user.key().as_ref()],
        bump
    )]
    pub favorites: Account<'info, Favorites>,

    pub system_program: Program<'info, System>,
}

​
Building and Deploying

​
1. Install Dependencies

# Install project dependencies
pnpm install

​
2. Configure SOON Network

# Set SOON testnet URL
solana config set --url https://rpc.testnet.soo.network/rpc

# Verify configuration
solana config get

​
3. Prepare Wallet

# Generate new keypair (if needed)
solana-keygen new

# Get testnet SOON tokens from faucet
https://faucet.soo.network/

​
4. Build Anchor Program

# Navigate to anchor directory
cd anchor-program

# Build the program
anchor build

​
5. Get Program ID

# Get program ID from the keypair
solana address -k target/deploy/favorites-keypair.json

​
6. Update Program ID

Update the program ID in:
  • lib.rs (declare_id! macro)
  • Anchor.toml

​
7. Deploy Program

# Deploy to SOON testnet
anchor deploy

# Verify deployment
solana account <PROGRAM_ID>

​
Frontend Setup

​
Start Development Server

pnpm dev

​
Testing the dApp

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

​
Common Issues & Solutions

  1. Deployment Failures
    • Ensure sufficient SOON testnet balance
    • Verify RPC endpoint is correct
    • Check program ID matches in all locations
  2. Transaction Errors
    • Verify wallet connection
    • Check input validations
    • Ensure proper PDA derivation
  3. Build Issues
    • Clean and rebuild: anchor clean && anchor build
    • Verify Rust and Anchor CLI versions
    • Check for any missing dependencies

​
Resources