Solana CRUD from Scratch: Decentralized App

#programming #solana

I Built a Fully On-Chain Notes App on Solana Using Anchor + Next.js

Hey devs! 👋

I recently built a full-stack Solana dApp where users can create, update, and delete notes that live entirely on-chain. It was a great experience to combine Anchor (Rust) for the smart contract with Next.js 14 + TailwindCSS for the frontend — so I thought I'd share what I learned and how I approached it.

🔧 What I Built

It's a classic CRUD app — but on Solana!

Users can:

📝 Create a note (title + content)
✏️ Update it
🗑️ Delete it

All stored on-chain in Solana accounts using Program Derived Addresses (PDAs).

Live demo coming soon... 👀

🧱 Stack

🟨 Anchor (Rust framework for Solana smart contracts)
⚛️ Next.js 14 (with App Router)
🎨 TailwindCSS (for styling)
🔐 @solana/wallet-adapter (wallet connection)
📣 SweetAlert2 (beautiful loading/toast popups)

🧠 What I Learned

How to structure accounts in Solana using Anchor’s #[account] macro
Writing validators and error handling with require! and custom #[error_code]
Creating PDAs using seeds:

  seeds = [b"note", author.key().as_ref(), title.as_bytes()]

Hooking up the frontend using @project-serum/anchor and React hooks
Handling wallet connection state, transaction sending, and UI feedback

🧾 The Smart Contract (Rust + Anchor)

Here is a simplified view of the program logic:

pub fn create_note(ctx: Context<CreateNote>, title: String, content: String) -> Result<()> {
    let note = &mut ctx.accounts.note;
    let clock = Clock::get()?;

    require!(title.len() <= 100, NotesError::TitleTooLong);
    require!(!content.trim().is_empty(), NotesError::ContentIsEmpty);

    note.author = ctx.accounts.author.key();
    note.title = title;
    note.content = content;
    note.created_at = clock.unix_timestamp;
    note.last_updated = clock.unix_timestamp;

    Ok(())
}

The Note account looks like this:

#[account]
#[derive(InitSpace)]
pub struct Note {
    pub author: Pubkey,
    #[max_len(100)]
    pub title: String,
    #[max_len(1000)]
    pub content: String,
    pub created_at: i64,
    pub last_updated: i64,
}

🖥️ Frontend Highlights

Connect to wallet via @solana/wallet-adapter-react
Interact with the program using @project-serum/anchor
SweetAlert2 loading indicators
Tailwind UI for responsive layout

const provider = new AnchorProvider(connection, wallet, {});
const program = new Program(idl, programId, provider);

await program.methods
  .createNote(title, content)
  .accounts({ author, note, systemProgram })
  .rpc();