Topics

#battles #betting #casino #crypto #crypto-game #events #game #gamify #jackpot #multi-chain #online-game #p2e #packdraw #packs #rewards #upgrader #web3 #web3-games

Language breakdown

No language data available.

▸ Files click to expand

README

PackDraw / HypePack

A pack-opening platform that combines real-time reward mechanics, crypto payments, and scalable backend infrastructure. Built for production deployment—not a proof-of-concept—with emphasis on performance, security, and operational flexibility.

This repository contains the frontend only.

It is published publicly so potential builders, clients, and collaborators can review the UI, product flows, and implementation quality. The full codebase—including the backend API, admin dashboard, payment webhooks, and database layer—is available on request. See Contact & Collaboration below.

https://github.com/user-attachments/assets/0c5b220c-3641-4127-af8d-99fccab0bc73

What's in This Repo

| Included | Not included (full platform) | | ------------------------------------------------- | ----------------------------------- | | Next.js user-facing web app | Backend API & services | | Pack store, opening animations, battles, upgrader | Admin dashboard | | Account, wallet, and history UI | Database & server-side reward logic | | Real-time client (Socket.io) | NOWPayments webhook handling | | Auth UI (email + Google OAuth) | Production deployment configs |

The frontend expects a running backend API. Most screens will load, but login, payments, pack opens, and live updates require the backend from the full platform.

Overview

PackDraw (HypePack) delivers an instant, engaging unboxing experience where users purchase digital packs, open them in real time, and receive randomized rewards. The platform integrates cryptocurrency payments, persistent user accounts, transaction history, and an administrative layer for day-to-day operations.

The product sits at the intersection of gaming mechanics, digital collectibles, and seamless Web3 payments—a pattern that continues to drive strong user engagement when execution is fast, fair, and transparent.

Key Features

| Feature | Description | | ---------------------------------- | --------------------------------------------------------------------------- | | Real-time pack opening | Live, animated pack-opening flow with immediate feedback and reward reveal | | Randomized reward distribution | Configurable loot tables and probability-weighted outcomes | | Crypto payments | Deposit and checkout via NOWPayments | | User accounts | Registration, authentication, balances, and inventory management | | Transaction management | Full audit trail for deposits, purchases, openings, and payouts | | Admin dashboard | Platform operations: users, packs, rewards, transactions, and configuration | | Scalable architecture | Backend designed for horizontal growth and high-concurrency events |

Platform Workflow

┌─────────────┐     ┌──────────────┐     ┌─────────────┐     ┌──────────────┐
│   User      │────▶│  Crypto      │────▶│  Purchase   │────▶│  Real-time   │
│   Account   │     │  Deposit     │     │  Pack       │     │  Pack Open   │
└─────────────┘     └──────────────┘     └─────────────┘     └──────────────┘
       │                    │                    │                    │
       │                    ▼                    ▼                    ▼
       │             NOWPayments           Balance /           Randomized
       │             webhook               ledger update       reward grant
       ▼
┌─────────────┐
│   Admin     │  ← monitors users, packs, odds, transactions, and platform health
│   Dashboard │
└─────────────┘

Onboard — User creates an account and completes authentication.
Fund — User deposits via supported cryptocurrencies through NOWPayments.
Purchase — User selects and buys a pack; balance is debited atomically.
Open — Pack opening runs in real time; reward is drawn from the configured distribution.
Manage — User views inventory and transaction history; admins oversee operations via the dashboard.

Architecture Highlights

Frontend (this repository)

Next.js App Router with responsive UI optimized for the pack-opening experience
Real-time updates via Socket.io during purchases, battles, and reveal flows
User-facing account, wallet, cart, battles, upgrader, rewards, and history views
Zustand for client state; HeroUI + Tailwind CSS for components and styling

Backend (full platform — not in this repo)

RESTful APIs and WebSocket events for auth, payments, packs, and rewards
Idempotent payment webhook handling for NOWPayments callbacks
Server-side reward resolution—outcomes are determined on the backend, not the client
Structured logging and transaction records for auditability

Payments (NOWPayments)

Crypto deposit flow with IPN/webhook confirmation
Balance crediting only after verified payment status
Reconciliation support for admin and support workflows

Admin Operations

User lookup and account management
Pack and reward catalog configuration
Probability / loot-table management
Transaction and payment monitoring
Platform settings and operational controls

Design Principles

Performance — Low-latency openings and responsive UI under load
Scalability — Stateless services and data layers that scale horizontally
Security — Server-authoritative rewards, validated webhooks, and protected admin routes
User experience — Clear flows from deposit → purchase → reveal → inventory
Operational flexibility — Admin tools to adjust catalog and monitor health without redeploys

Tech Stack

| Layer | Technology | | -------------------------- | ----------------------------------------------------------------------- | | Frontend | Next.js 16, React 19, TypeScript, Tailwind CSS 4, HeroUI, Framer Motion | | Client state | Zustand | | Real-time | Socket.io client | | HTTP | Axios | | Auth (UI) | Google OAuth (@react-oauth/google) | | Media uploads | Pinata IPFS (avatars, pack images) | | Backend (full platform) | Node.js API, PostgreSQL, server-side WebSockets | | Payments (full platform) | NOWPayments API |

Getting Started

Prerequisites

Node.js 18+ and npm
A running PackDraw backend API (from the full platform) for authenticated and live features
Optional: Pinata credentials for avatar/image uploads; Google Cloud OAuth client ID for Google sign-in

Installation

git clone https://github.com/<your-username>/packdraw.git cd packdraw

npm install

Environment variables

Copy the example file and set your values:

cp env.example .env.local

On Windows, if .env.local is blocked, use env.local instead (as noted in env.example).

| Variable | Required | Description | | -------------------------------- | ---------------- | ---------------------------------------------------------------------------------- | | NEXTPUBLICAPI_URL | Yes | Backend API base URL including /api/v1 (e.g. http://localhost:3000/api/v1) | | NEXTPUBLICGOOGLECLIENTID | For Google login | OAuth 2.0 client ID from Google Cloud Console | | NEXTPUBLICPINATAAPIKEY | For uploads | Pinata API key | | NEXTPUBLICPINATAAPISECRET | For uploads | Pinata API secret | | NEXTPUBLICPINATAGATEWAYURL | Optional | IPFS gateway URL (defaults to Pinata) | | NEXTPUBLICPLATFORM_MARGIN | Optional | Platform margin for user-created packs (default 0.08) |

Example .env.local:

NEXTPUBLICAPI_URL=http://localhost:3000/api/v1
NEXTPUBLICGOOGLECLIENTID=yourgoogleclient_id
NEXTPUBLICPINATAAPIKEY=
NEXTPUBLICPINATAAPISECRET=
NEXTPUBLICPINATAGATEWAYURL=https://gateway.pinata.cloud/ipfs

Run locally

# Development (default: http://localhost:80)
npm run dev
Production build
npm run build
npm start

Notes:

The dev script binds to port 80. On some systems that requires elevated permissions; if startup fails, run on another port, e.g. npx next dev --webpack --port 3000.
Point NEXTPUBLICAPI_URL at your backend. Without it, the UI renders but API calls and WebSockets will fail.
Google sign-in needs a valid NEXTPUBLICGOOGLECLIENTID and the redirect URI configured in Google Cloud Console.

Lint

npm run lint

Project Structure

packdraw/
├── public/
│   └── assets/              # Images, icons, audio, avatars
├── src/
│   ├── app/                 # Next.js App Router pages
│   ├── components/          # UI by feature (packs, battles, account, modals, …)
│   ├── lib/
│   │   ├── api/             # REST client modules
│   │   ├── services/        # IPFS and other client services
│   │   └── websocket.ts     # Socket.io real-time client
│   └── store/               # Zustand stores
├── env.example
├── next.config.ts
├── package.json
└── README.md

Security Considerations

Server-side RNG — Reward outcomes must never be computed or trusted on the client.
Webhook verification — Validate NOWPayments IPN signatures and payment status before balance updates.
Idempotency — Handle duplicate webhook deliveries without double-crediting accounts.
Admin access — Role-based access control; admin routes protected and audited.
Rate limiting — Apply limits on auth, payment, and pack-opening endpoints.
Secrets — Never commit API keys; use environment variables and secret managers in production.

Demo

| Pack Store | Pack Opening | Admin Dashboard | | ------------ | ------------ | --------------- | | screenshot | screenshot | screenshot |

Live demo: Add link when deployed Workflow video: add link to your demo recording

Roadmap

Additional cryptocurrency support
Enhanced pack animations and sound design
Referral and loyalty programs
Public provably-fair verification (optional)
Mobile-optimized PWA experience
Analytics and reporting dashboards

About

This project was built as a production-oriented Web3 gaming platform—combining instant engagement mechanics with reliable payment and account infrastructure. This public repo showcases the frontend implementation; the complete system includes backend services, admin tooling, and payment integration.

Related work: