The Complete Guide to Full Stack Solana Development with React, Anchor, Rust, and Phantom

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Scout APM - Less time debugging, more time building
  • SonarQube - Static code analysis for 29 languages.
  • OPS - Build and Run Open Source Unikernels
  • GitHub repo complete-guide-to-full-stack-solana-development

    Code examples for the blog post titled The Complete Guide to Full Stack Solana Development with React, Anchor, Rust, and Phantom

    The code for this project is located here

  • GitHub repo nvm

    Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

    Node.js - I recommend installing Node using either nvm or fnm

  • Scout APM

    Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.

  • GitHub repo fnm

    🚀 Fast and simple Node.js version manager, built in Rust

    Node.js - I recommend installing Node using either nvm or fnm

  • GitHub repo wallet-adapter

    Modular TypeScript wallet adapters and components for Solana applications.

    import './App.css'; import { useEffect, useState } from 'react'; import { Connection, PublicKey } from '@solana/web3.js'; import { Program, Provider, web3 } from '@project-serum/anchor'; import idl from './idl.json'; import { getPhantomWallet } from '@solana/wallet-adapter-wallets'; import { useWallet, WalletProvider, ConnectionProvider } from '@solana/wallet-adapter-react'; import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui'; const wallets = [ /* view list of available wallets at https://github.com/solana-labs/wallet-adapter#wallets */ getPhantomWallet() ] const { SystemProgram, Keypair } = web3; /* create an account */ const baseAccount = Keypair.generate(); const opts = { preflightCommitment: "processed" } const programID = new PublicKey(idl.metadata.address); function App() { const [value, setValue] = useState(null); const [connected, setConnected] = useState(false); const wallet = useWallet(); useEffect(() => { window.solana.on("connect", () => setConnected(true)); return () => window.solana.disconnect(); }, []) async function getProvider() { /* create the provider and return it to the caller */ /* network set to local network for now */ const network = "http://127.0.0.1:8899"; const connection = new Connection(network, opts.preflightCommitment); const provider = new Provider( connection, wallet, opts.preflightCommitment, ); return provider; } async function createCounter() { const provider = await getProvider() /* create the program interface combining the idl, program ID, and provider */ const program = new Program(idl, programID, provider); try { /* interact with the program via rpc */ await program.rpc.create({ accounts: { baseAccount: baseAccount.publicKey, user: provider.wallet.publicKey, systemProgram: SystemProgram.programId, }, signers: [baseAccount] }); const account = await program.account.baseAccount.fetch(baseAccount.publicKey); console.log('account: ', account); setValue(account.count.toString()); } catch (err) { console.log("Transaction error: ", err); } } async function increment() { const provider = await getProvider(); const program = new Program(idl, programID, provider); await program.rpc.increment({ accounts: { baseAccount: baseAccount.publicKey } }); const account = await program.account.baseAccount.fetch(baseAccount.publicKey); console.log('account: ', account); setValue(account.count.toString()); } if (!connected) { /* If the user's wallet is not connected, display connect wallet button. */ return (

    ) } else { return (
    { !value && (Create counter) } { value && Increment counter } { value && value >= Number(0) ? (

    {value}

    ) : (

    Please create the counter.

    ) }
    ); } } /* wallet configuration as specified here: https://github.com/solana-labs/wallet-adapter#setup */ const AppWithProvider = () => ( ) export default AppWithProvider;

  • GitHub repo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

    React - The client-side framework

  • GitHub repo hardhat

    Hardhat is a development environment to compile, deploy, test, and debug your Ethereum software. Get Solidity stack traces & console.log.

    Anchor Framework - Anchor is actually a life saver for me, and I'm almost certain I would not have been able to get over the hump of building anything without it. It is the Hardhat of Solana development and more, and I love it. It also offers a DSL on top of Rust so that you do not need a deep understanding of the language to get started, though I am still trying to learn Rust as it will probably be useful to build anything non-trivial, even with the DSL. A good free place to learn Rust is The Rust Book.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts