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
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • 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.

  • fnm

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

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

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • wallet-adapter

    Modular TypeScript wallet adapters and components for Solana applications.

    import './App.css'; import { useState } from 'react'; import { Connection, PublicKey } from '@solana/web3.js'; import { Program, Provider, web3 } from '@project-serum/anchor'; import idl from './idl.json'; import { PhantomWalletAdapter } from '@solana/wallet-adapter-wallets'; import { useWallet, WalletProvider, ConnectionProvider } from '@solana/wallet-adapter-react'; import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui'; require('@solana/wallet-adapter-react-ui/styles.css'); const wallets = [ /* view list of available wallets at https://github.com/solana-labs/wallet-adapter#wallets */ new PhantomWalletAdapter() ] 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 wallet = useWallet(); 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 (!wallet.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;

  • solana-web3.js

    Solana JavaScript SDK

    solana/web3.js - A Solana version of web3.js that seems to work pretty well, but the documentation was almost unusable for me

  • React

    The library for web and native user interfaces.

    React - The client-side framework

  • hardhat

    Hardhat is a development environment to compile, deploy, test, and debug your Ethereum software.

    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