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

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

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 │
└─────────────┘

1. Onboard — User creates an account and completes authentication.
2. Fund — User deposits via supported cryptocurrencies through NOWPayments.
3. Purchase — User selects and buys a pack; balance is debited atomically.
4. Open — Pack opening runs in real time; reward is drawn from the configured distribution.
5. 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

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).

Example .env.local:

NEXT_PUBLIC_API_URL=http://localhost:3000/api/v1
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your_google_client_id
NEXT_PUBLIC_PINATA_API_KEY=
NEXT_PUBLIC_PINATA_API_SECRET=
NEXT_PUBLIC_PINATA_GATEWAY_URL=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 NEXT_PUBLIC_API_URL at your backend. Without it, the UI renders but API calls and WebSockets will fail.
• Google sign-in needs a valid NEXT_PUBLIC_GOOGLE_CLIENT_ID 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

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:

• Web3 platforms & custom blockchain integrations
• DeFi applications
• Crypto gaming & casino platforms
• Prediction markets
• NFT ecosystems

Contact & Collaboration

Interested in the full codebase, technical details, custom builds, or collaboration?

• Telegram: @devsealva

License

Specify your license here (e.g. MIT, proprietary, or "All rights reserved" for a portfolio/demo repository).

Built with a focus on performance, scalability, security, and real-world deployment.