Some assumptions up front:

• You have a crypto wallet set up for Solana

• You have a hub on Nina with a few published releases

• You are comfortable writing JavaScript and have some experience with React or something similar.

Ok so first thing is first, lets create a new react app with create-react-app and the TypeScript template. I like TypeScript because it helps you avoid writing bugs and gives you much better autocomplete in VSCode.

I use yarn so in the terminal I’m going to run the command below to do the inital setup

yarn create react-app my-nina-hub --template typescript

That will provide you with the initial scaffolding for your app. Next, we’re going to want to install a bunch of dependencies so that we can connect to the users wallet and interact with Nina Protocol via the nina js-sdk. I’m also going to throw in styled-components so that we can make the page look nice but you can use whatever you want for styling.

yarn add @nina-protocol/js-sdk @solana/wallet-adapter-wallets @solana/wallet-adapter-react @solana/wallet-adapter-base @solana/wallet-adapter-react-ui @solana/web3.js styled-components @types/styled-components

Now that we have our dependencies lets fire up the app and see what we’ve got.

yarn start

Lets commit the changes we’ve made so far. create-react-app sets up git out of the box so we can use that to organize our change sets. You can view the commit on GitHub here.

git add . //add all changes
git commit -m "set up app scaffold with dependencies"

Alright, now lets delete a bunch of the boilerplate here so we have a totally clean slate to work with. You can look at this commit to see everything I got rid of but, the important thing is you get you App component looking something like this

import React from "react";

function App() {
  return <div className="App">Blank slate</div>;
}

export default App;

Sweet. Now we have a blank canvas to work with to start building the frontend for our Nina hub. Lets start by creating a React context with a hook wrapper around the Nina SDK so that we can interact with the Nina protocol anywhere in our app.

I’m not going to go into super deep detail about how React works here, essentially we’re creating a context at the top level of our app which we will use to pull data from Nina. I’m going to create a file for this under src/context/nina.tsx and its going to start out pretty empty.

import * as React from "react";

const NinaContext = React.createContext(null);

type NinaProviderProps = {
  children?: React.ReactNode;
};

function NinaProvider({ children }: NinaProviderProps) {
  return <NinaContext.Provider value={null}>{children}</NinaContext.Provider>;
}

function useNina() {
  const context = React.useContext(NinaContext);
  if (context === undefined) {
    throw new Error("useNina must be used within a NinaProvider");
  }
  return context;
}

export { NinaProvider, useNina };

Let’s import this in the App component

import React from "react";
import { NinaProvider } from "./context/nina";

function App() {
  return (
    <div className="App">
      <NinaProvider>Blank Slate</NinaProvider>
    </div>
  );
}

export default App;

Ok nice, so now we have a placeholder for our NinaProvider which is going to wrap our entire app. I’m going to commit the changes here, check out the change set on GitHub.

Now I want to set up some functions in the NinaProvider to start pulling in some data from my hub. Since I’m using typescript I need to create a .d.ts file to declare the types of the js-sdk package, so I made a file src/types/js-sdk.d.ts you’ll see below to make TypeScript happy. It would be nice to fill this out with actual types but for the sake of going fast I’ll just define it like this for now and maybe fill in more details later:

// src/types/js-sdk.d.ts

declare module "@nina-protocol/js-sdk" {
  const Nina: any;
  export = Nina;
}

Ok now lets fetch the data from our hub. I’m going to use my hub id ‘corporationplaza’ and fetch the data in the NinaProvider. I’ll also add types for Hub and Release which will make writing our UI components a bit easier. src/context/nina.tsx now looks like this. Here’s the commit of my changes up to this point.

// src/context/nina.tsx 

import * as React from "react";
import Nina from "@nina-protocol/js-sdk";
import { useEffect, useState } from "react";

Nina.client.init();

const NinaContext = React.createContext<NinaContextValue>({});

type NinaContextValue = {
  hub?: Hub;
  releases?: Release[];
};

type NinaProviderProps = {
  children?: React.ReactNode;
};

type Hub = {
  publicKey: string;
  handle: string;
  data: {
    displayName: string;
    description: string;
    externalUrl: string;
    image: string;
  };
  datetime: string;
  dataUri: string;
  authority: string;
};

type Release = {
  publicKey: string;
  mint: string;
  metadata: {
    name: string;
    symbol: string;
    description: string;
    image: string;
    animation_url: string;
    external_url: string;
    attributes: any[];
    collection: {
      name: string;
      family: string;
    };
    properties: {
      artist: string;
      title: string;
      date: Date;
      md5Digest: string;
      files: any[];
      category: string;
    };
    descriptionHtml: string;
  };
  datetime: Date;
  hubReleasePublicKey: string;
  visible: boolean;
  publishedThroughHub: string;
  publisher: string;
};

function NinaProvider({ children }: NinaProviderProps) {
  const [hub, setHub] = useState<Hub>();
  const [releases, setReleases] = useState<Release[]>();

  const fetchHub = async () => {
    const { hub, releases } = await Nina.Hub.fetch("corporationplaza");
    setHub(hub);
    setReleases(releases);
  };

  useEffect(() => {
    if (!hub) {
      fetchHub();
    }
  }, [hub]);

  console.log(hub);
  console.log(releases);

  const value = { hub, releases };
  return <NinaContext.Provider value={value}>{children}</NinaContext.Provider>;
}

function useNina() {
  const context = React.useContext(NinaContext);
  if (context === undefined) {
    throw new Error("useNina must be used within a NinaProvider");
  }
  return context;
}

export { NinaProvider, useNina };

Our console output now looks like this, you can see the hub data and releases coming back. Woohoo!

Alright, lets start getting some of this stuff showing in the UI. I’m going to create a components folder under /src and make two component files, HubInfo.tsx and HubReleases.tsx to display the info for each. I’ll just do some basic styling for now so we can see what it looks like on the page.

// src/components/HubInfo.tsx

import React from "react";
import styled from "styled-components";

import { useNina } from "../context/nina";

function HubInfo() {
  const { hub } = useNina();

  if (!hub) {
    return null;
  }

  return (
    <HubInfoContainer className="HubInfo">
      <HubImage src={hub.data.image} />
      <div>
        <h1>{hub.data.displayName}</h1>
        <h2>{hub.data.description}</h2>
        <a href={hub.data.externalUrl} target="_blank" rel="noreferrer">
          view on nina
        </a>
      </div>
    </HubInfoContainer>
  );
}
const HubInfoContainer = styled.div`
  display: flex;
  gap: 1em;
  margin: 1em;
`;

const HubImage = styled.img`
  max-width: 200px;
`;

export default HubInfo;

// src/components/HubReleases.tsx

import React from "react";
import styled from "styled-components";

import { useNina } from "../context/nina";

function HubReleases() {
  const { releases } = useNina();
  if (!releases) {
    return null;
  }

  releases.sort(
    (a, b) => new Date(a.datetime).getTime() - new Date(b.datetime).getTime()
  );

  return (
    <HubReleasesContainer>
      {releases.map((release) => (
        <HubReleaseContainer>
          <ReleaseImage src={release.metadata.image} />
          <h2>{release.metadata.name}</h2>
          <p>{release.metadata.description}</p>
        </HubReleaseContainer>
      ))}
    </HubReleasesContainer>
  );
}

const HubReleasesContainer = styled.div`
  margin: 1em;
`;

const HubReleaseContainer = styled.div`
  display: flex;
  gap: 1em;
  margin: 1em 0;
`;

const ReleaseImage = styled.img`
  max-width: 300px;
`;

export default HubReleases;

And I’ll add these to the App.tsx component

// src/App.tsx

import React from "react";
import HubInfo from "./components/HubInfo";
import HubReleases from "./components/HubReleases";
import { NinaProvider } from "./context/nina";

function App() {
  return (
    <NinaProvider>
      <HubInfo />
      <HubReleases />
    </NinaProvider>
  );
}

export default App;

Looking good! We’ve got the hub info showing up along with all the releases from the hub, sorted oldest first. Here’s the commit.

Finally, lets create an audio player so that when a user clicks on a release, they can listen to the track and play/pause. I’m going to create a context for this as well to make reading and writing the player state relatively simple across the app. I’m also going to move the types for Release and Hub out of the Nina context and into their own file to separate those concerns and import them for use in the player.

I’ll move the types out of src/context/nina.tsx to a new file src/types/ninaTypes.ts

// src/types/ninaTypes.ts

export type Hub = {
  publicKey: string;
  handle: string;
  data: {
    displayName: string;
    description: string;
    externalUrl: string;
    image: string;
  };
  datetime: string;
  dataUri: string;
  authority: string;
};

export type Release = {
  publicKey: string;
  mint: string;
  metadata: {
    name: string;
    symbol: string;
    description: string;
    image: string;
    animation_url: string;
    external_url: string;
    attributes: any[];
    collection: {
      name: string;
      family: string;
    };
    properties: {
      artist: string;
      title: string;
      date: Date;
      md5Digest: string;
      files: any[];
      category: string;
    };
    descriptionHtml: string;
  };
  datetime: Date;
  hubReleasePublicKey: string;
  visible: boolean;
  publishedThroughHub: string;
  publisher: string;
};

Then, set up the audio player and dock it to the bottom right of the page.

// src/context/player.tsx

import * as React from "react";
import { useEffect, useRef, useState } from "react";
import styled from "styled-components";
import { Release } from "../types/ninaTypes";

const PlayerContext = React.createContext<PlayerContextValue>({
  setCurrentTrack: () => null,
  playing: false,
});

type PlayerContextValue = {
  currentTrack?: Release;
  setCurrentTrack: (release: Release) => void;
  playing: boolean;
};

type PlayerProviderProps = {
  children?: React.ReactNode;
};

function PlayerProvider({ children }: PlayerProviderProps) {
  const [currentTrack, setCurrentTrack] = useState<Release>();
  const [playing, setPlaying] = useState(false);
  const playerRef = useRef<HTMLAudioElement>(null);

  useEffect(() => {
    if (currentTrack) {
      playerRef.current?.play();
      setPlaying(true);
    }
  }, [currentTrack]);

  const value = { currentTrack, setCurrentTrack, playing };
  return (
    <PlayerContext.Provider value={value}>
      {children}
      {currentTrack && (
        <audio src={currentTrack?.metadata?.animation_url} ref={playerRef} />
      )}
      <PlayerContainer>
        <Cover src={currentTrack?.metadata?.image} />
        <TrackTitle>{currentTrack?.metadata?.properties?.title}</TrackTitle>
        <button
          onClick={() => {
            if (playing) {
              playerRef?.current?.pause();
            } else {
              playerRef?.current?.play();
            }
            setPlaying(!playing);
          }}
        >
          {playing ? "⏸️" : "▶️"}
        </button>
      </PlayerContainer>
    </PlayerContext.Provider>
  );
}

const PlayerContainer = styled.div`
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  position: fixed;
  padding: 10px;
  bottom: 0;
  right: 0;
  top: unset;
  background-color: white;
`;

const TrackTitle = styled.h3``;

const Cover = styled.img`
  width: 30px;
  height: 30px;
`;

function usePlayer() {
  const context = React.useContext(PlayerContext);
  if (context === undefined) {
    throw new Error("usePlayer must be used within a PlayerProvider");
  }
  return context;
}

export { PlayerProvider, usePlayer };

Add the player provider to App.tsx

// src/App.tsx

import React from "react";
import HubInfo from "./components/HubInfo";
import HubReleases from "./components/HubReleases";
import { NinaProvider } from "./context/nina";
import { PlayerProvider } from "./context/player";

function App() {
  return (
    <NinaProvider>
      <PlayerProvider>
        <HubInfo />
        <HubReleases />
      </PlayerProvider>
    </NinaProvider>
  );
}

export default App;

And update the HubReleases component to set the current track on click.

// src/components/HubReleases.tsx

function HubReleases() {
  const { releases } = useNina();
  const { setCurrentTrack } = usePlayer();

...

    <HubReleasesContainer>
      {releases.map((release) => (
        <HubReleaseContainer
          onClick={() => {
            setCurrentTrack(release);
          }}
        >
          <ReleaseImage src={release.metadata.image} />
          <h2>{release.metadata.name}</h2>
          <p>{release.metadata.description}</p>
        </HubReleaseContainer>
      ))}
    </HubReleasesContainer>

...

Commit of these changes here.

Ta da! Our own custom frontend. I’m going to take a break here to kick back and listen to these tunes. In my next post, I’ll show you how to let users connect their crypto wallet so they can see which tracks they own and allow users to purchase releases directly from this page. You can find the complete code here and view the site live at

https://my-nina-hub.netlify.app/