Web3 Made Simple: Exploring Solana for Beginners

paul — Mon, 25 Nov 2024 08:11:39 +0000

Over the past few months, I've maintained a routine of working from libraries and coffee shops, seeking inspiration in familiar and vibrant surroundings. Today, I chose my go-to spot at a nearby Starbucks, equipped with a plan to tackle a variety of tasks, including exploring a unique Upwork opportunity in B2B development using Vue.js. But a more exciting project caught my attention: building a standout resume website.

Revamping My Resume Website

My previous attempt at a resume site, hosted at resume.ddp.life, felt too simplistic. It lacked a compelling design or unique features. Determined to create something better, I scoured GitHub and discovered a web3-focused project that stood out: web3-resume-ui.

This project integrates Next.js, Solana, and Supabase, and offers exciting possibilities for blockchain-backed functionality. Here's how I set it up and adapted it for my needs.

What’s in the Stack?

Next.js

As a React framework, Next.js provides server-side rendering and static site generation, ideal for building fast and SEO-friendly websites.

Solana

Solana is a high-performance L1 blockchain, known for its speed and low transaction costs. It’s the backbone for smart contract integration in this project.

Supabase

Supabase is an open-source alternative to Firebase. In this project, it handles user authentication via GitHub and database management.

Integrating Solana Smart Contracts

What is Solana?

Solana enables developers to deploy smart contracts on its blockchain, allowing for the creation of decentralized applications (DApps) like wallets, exchanges, and more.

Setting Up a Devnet Wallet

Visit Solana Faucet to receive SOL tokens for the devnet environment.
Create and manage wallets easily within the project interface.

Implementing Solana in React

Using Solana’s SDK, you can connect your application to the blockchain. Below are snippets to illustrate signing messages and initiating transactions.

Connecting to Solana

import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';

const endpoint = useMemo(() => clusterApiUrl(WalletAdapterNetwork.Devnet), []);
const wallets = [new PhantomWalletAdapter(), new SolflareWalletAdapter()];

return (
  <ConnectionProvider endpoint={endpoint}>
    <WalletProvider wallets={wallets}>
      <ReactUIWalletModalProvider>{children}</ReactUIWalletModalProvider>
    </WalletProvider>
  </ConnectionProvider>
);

Signing Messages

const { publicKey, signMessage } = useWallet();

try {
  const message = new TextEncoder().encode('Hello, world!');
  const signature = await signMessage(message);
  console.log('Signature:', signature);
} catch (error) {
  console.error('Sign message failed:', error);
}

Sending Transactions

import { SystemProgram, Transaction } from '@solana/web3.js';

const transaction = new Transaction().add(
  SystemProgram.transfer({
    fromPubkey: publicKey,
    toPubkey: Keypair.generate().publicKey,
    lamports: 1,
  })
);

const signature = await sendTransaction(transaction, connection);
await connection.confirmTransaction(signature, 'confirmed');

Using Supabase for Authentication

Supabase simplifies user management. Here's a quick overview:

Create a GitHub OAuth App.
Configure the app credentials in your Supabase project.
Use Supabase’s SDK to handle sign-in and user data management.

Sample Integration

import { createClient } from '@supabase/supabase-js';

const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);

const { user, error } = await supabase.auth.signInWithOAuth({
  provider: 'github',
});
console.log(user, error);

Final Thoughts and Next Steps

Integrating web3 technologies like Solana and Supabase into a Next.js project not only elevates a resume website but also showcases skills in blockchain and modern web development. My next steps are to:

Polish the UI and add interactive elements.
Explore hosting options for scalability.
Dive deeper into Solana’s ecosystem for advanced features.

Building this project has been an enlightening journey into the capabilities of web3. I’m excited to refine it further and create a platform that stands out.

What’s your next personal project? Let’s discuss in the comments below!

Forem: paul