DEV Community

Cover image for Web3 Made Simple: Exploring Solana for Beginners
paul
paul

Posted on

1

Web3 Made Simple: Exploring Solana for Beginners

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.

project preview


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

  1. Visit Solana Faucet to receive SOL tokens for the devnet environment.
  2. 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>
);
Enter fullscreen mode Exit fullscreen mode

React Providers

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);
}
Enter fullscreen mode Exit fullscreen mode

Signing Messages

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');
Enter fullscreen mode Exit fullscreen mode

Sending Transactions


Using Supabase for Authentication

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

  1. Create a GitHub OAuth App.
  2. Configure the app credentials in your Supabase project.
  3. 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);
Enter fullscreen mode Exit fullscreen mode

Sample Integration


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!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay