Full lesson

breakout-barhoppers

Solana-based application gamifying the barhopping experience with tokens and NFTs - Contribution to the Hackathon "Breakout Challenge"

What it does

From the project README:

Recent statistics show that younger generations are socializing less with their peers. As the first to grow up fully immersed in the digital world, many of their interactions now happen online rather than in person.

Original: StephanieHhnbrg/breakout-barhoppers
SuperStack fork: Blockchains/breakout-barhoppers @ 8960a6c
Stars: 0
Last push (original): 2025-05-15
Languages: TypeScript, Python, HTML, CSS, JavaScript
Detected stack: Metaplexsolana-pyweb3.js
Categories: NFTs & Digital Assets
Licence: MIT
Homepage: https://stephaniehhnbrg.github.io/breakout-barhoppers/

Architecture

68 source files. By extension: .ts ×51, .py ×16, .js ×1.

Top-level directory	Source files
`src`	51
`gcloudrun`	16
`(root)`	1

Dapp: devnet deploy pending

⏳ Devnet deploy pending — goes live when the devnet wallet is topped up. This fork's own dapp is not deployed yet, so there is no program address or transaction to show. It is queued in dapp-queue.txt; once devnet SOL is available it is deployed, exercised with real devnet transactions, and this section switches to the live dapp at /dapps/breakout-barhoppers/. Until then, the lesson and step-by-step guide below are complete, and you can run it locally with the commands below.

Key code, explained

Excerpts chosen automatically where the code uses the most Solana concepts, pinned to the fork's commit.

StephanieHhnbrg/breakout-barhoppers · src/app/services/wallet.service.ts L1–24 @ 8960a6c · MIT · original

import { Injectable } from '@angular/core';import {BehaviorSubject, Observable, Subject} from 'rxjs';import {  Connection,  PublicKey,  clusterApiUrl,  Keypair, Transaction, sendAndConfirmTransaction, Signer,} from '@solana/web3.js';import {  createAssociatedTokenAccountInstruction,  createMint, createTransferInstruction, getAssociatedTokenAddress,  getOrCreateAssociatedTokenAccount,  mintTo,} from '@solana/spl-token';import {Metaplex,keypairIdentity } from '@metaplex-foundation/js';import {environment} from '../../environments/environment';import { LAMPORTS_PER_SOL } from '@solana/web3.js';import {DecryptionService} from './decryption.service';  @Injectable({  providedIn: 'root'})export class WalletService {

Line 7 Keypair, Transaction, sendAndConfirmTransaction, Signer,: Submits the signed transaction to the cluster.
Line 11 createMint, createTransferInstruction, getAssociatedTokenAddress,: An SPL token transfer through the Token Program.

How to run, build and test

These commands come from the repo's own manifests (package.json scripts, Anchor.toml, Cargo, go.mod, Makefile). Check the README for prerequisites and environment variables.

Directory	Command	Runs
`.`	`npm run start`	ng serve
`.`	`npm run build`	ng build
`.`	`npm run test`	ng test

What you could build from it

Fork the SuperStack copy and extend it within the NFTs & Digital Assets gaps listed on the idea page.
Learn the pattern first: NFTs with Metaplex
Learn the pattern first: Compressed NFTs and state compression
Learn the pattern first: Token-2022 (Token Extensions)