PromoShock — on-chain stream tickets with targeted ads
MetaLamp · 2024 · Middle Frontend Engineer
- Next.js
- React
- TypeScript
- Zustand
- Wagmi
- Viem
- TON
- TanStack Query
- GraphQL
- React Hook Form
- Zod
- Tailwind CSS
Context
PromoShock was built for Hackers League Winter 2024, TON Society's global Web3 hackathon — 5,000+ participants, 1,200+ projects, 19 cities and a $3M+ prize pool. It's a Telegram Mini App where creators sell stream passes as NFT tickets and advertisers run promos targeted at the people who hold them. I led the frontend, and we built the whole thing end to end in about a week.
What I did
- Led the frontend and shipped it near-solo in the time we had: a Next.js Telegram Mini App with the full loop — landing, stream and promo listings, and the multi-field on-chain forms for creating a new stream pass or promo.
- Built the wallet and transaction UX on wagmi and viem against our contracts on Binance Smart Chain, inside a Telegram Mini App shell with TON Connect. The centerpiece was a composable transaction-button system that chains connect, switch network, check and approve allowance, check balance and send — so every on-chain action runs through one reliable, readable flow instead of being hand-wired each time.
- Wired the NFT ticketing itself: creating a stream or promo writes on-chain and pins its metadata to IPFS through Pinata, while the app reads indexed stream data from a The Graph subgraph over GraphQL alongside a typed, Zod-validated REST client.
Outcome
PromoShock won a prize at Hackers League Winter 2024, out of more than 1,200 projects. In a single week we shipped a working on-chain ticketing Mini App — wallet connection, contract writes, IPFS metadata and indexed reads — and the transaction-button pattern came out clean enough to outlive the hackathon it was built for.