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

Code examples to go with the blog post available here

Prerequisites

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

2. Solana Tool Suite - You can see the installation instructions here. note - I had a very hard time getting everything working on an M1 Mac, mainly solana-test-validator and cargo-build-bpf. I finally figured it out, and posted my solution here. I'm sure at some point this will be fixed and work out of the box.

3. Anchor - Anchor installation was pretty straight-forward for me. You can find the installation instructions here.

4. Solana browser wallet - I recommend Phantom, which is what I have tested this app with.

To build

1. Clone the repo

git clone [email protected]:dabit3/complete-guide-to-full-stack-solana.git

2. Change into the project directory you'd like to run

3. Install the dependencies

npm install

4. Start a local Solana node

solana-test-validator

5. Build the anchor project

anchor build

6. Fetch the project ID for the build:

solana address -k target/deploy/<programname>-keypair.json

6. Update the project ID in the Rust program located at projectname/programs/src/programname.rs with the output from above.

7. Run the tests

anchor test

8. Change into the app directory and install the dependencies:

cd app && npm install

9. Run the client-side app

npm start

Basic Steps for Full Stack Web Developer

1. Learn Basic of:
   • HTML
   • CSS
   • JavaScript
2. Develop Simple Project using these technologies to understand how does the website actually work.
3. Choose any 1 Front-End Technology:
   • React JS
   • Vue JS
   • Angular
4. Along with Front-End we need to study Back-End also:
   • Java
   • Python
   • C#
   • Ruby
   • Php
   • Node JS
5. We need databases to store the data:

• SQL
  • MYSQL
  • SQL Server
  • Oracle
  • Postegre SQL
• NOSQL
  • MongoDB
  • Casssandra
  • CouchDB

6. Then we have different versions of the developed software with some changes, so we use:
   • Git
   • GitHub/GitLab/BitBucket
7. Finally we need one of the Cloud Services to host the website:
   • Google Cloud Platform
   • Microsoft Azure
   • Amazon Web Service
   • Heroku
8. Some containers used in Cloud Services:
   • Docker
   • Kubernetes

Once we prepare all these aspect for a particular project we can get a hang of Full Stack Web Development.