A modern, multi-language referral website for Backpack cryptocurrency exchange, designed to attract and convert users from diverse global communities.
Production: https://www.backpackref.com/
Vercel: https://backpack-referral.vercel.app/
This website now uses one primary referral link across all community cards:
- Main Referral Link → backpack.exchange/join/meme
- X Contact → @mikexuusa for Backpack Securities beta invite information
- Automatic detection based on browser locale
- Languages: English, 简体中文, 繁體中文, Français, Português, Italiano, Deutsch, 日本語, 한국어
- Elegant dropdown with flag emojis for easy switching
- BP Staking Benefits - Trading fee tiers, wire perks, Equity Exchange access, and product access subject to official terms
- Backpack Securities - Stocks and ETFs beta access through regulated securities infrastructure
- Path to Liftoff - Official SpaceX shares campaign running June 4-10, 2026 UTC
- BP Token - BP/USD spot trading, Solana token details, staking, and tokenomics
- Wallet & Trading Tools - Zero-fee wallet swaps/bridges and Grid Bot V2 automated trading updates
- Google Analytics 4 integration with custom event tracking
- User interaction monitoring (button clicks, language changes, community selection)
- Conversion funnel analysis for referral optimization
- Responsive layout optimized for mobile, tablet, and desktop
- Consistent max-width containers for visual harmony
- Gradient backgrounds and smooth hover animations
- Professional color scheme matching Backpack branding
- Next.js 16 with App Router for optimal performance
- Dynamic meta tags and structured data
- Sitemap & robots.txt for search engine optimization
- Custom domain with SSL certificate
- Sub-millisecond loading times
| Technology | Purpose | Version |
|---|---|---|
| Next.js | React framework | 16.0+ |
| TypeScript | Type safety | Latest |
| Tailwind CSS | Styling | Latest |
| Google Analytics | User tracking | GA4 |
| Vercel | Hosting & deployment | - |
- Node.js 18+
- npm or yarn package manager
# Clone the repository
git clone https://github.com/xuxizhen/backpack-referral.git
cd backpack-referral
# Install dependencies
npm install
# Start development server
npm run dev
# Open browser
open http://localhost:3000npm run dev # Development server
npm run build # Production build
npm run start # Production server
npm run lint # ESLint checkbackpack-referral/
├── src/
│ ├── app/
│ │ ├── layout.tsx # Root layout with GA4
│ │ ├── page.tsx # Main landing page
│ │ └── globals.css # Global styles
├── public/
│ ├── sitemap.xml # SEO sitemap
│ ├── robots.txt # Crawler directives
│ └── favicon.ico # Backpack favicon
├── next.config.ts # Next.js configuration
├── postcss.config.mjs # Tailwind CSS / PostCSS config
└── package.json # Dependencies
- Primary: Black (#000000) - Backpack brand color
- Secondary: Gray gradients for depth
- Accents: Purple, blue, green gradients for CTAs
- Community Colors: Unique gradients per community section
- Headers: Bold, large sizes for impact
- Body: Clean, readable text with proper contrast
- CTAs: Prominent button styling with hover effects
- Consistent spacing using Tailwind's spacing scale
- Max-width containers (max-w-6xl) for content alignment
- Grid layouts for responsive design
- Card-based UI for feature sections
language_change- User switches languageregister_button_click- CTA button interactionscommunity_selection- Which referral link clickedpage_scroll- User engagement depth
- Referral click tracking by community
- Language preference analysis for localization insights
- User journey mapping from landing to registration
- Structured data (JSON-LD) for rich snippets
- Meta tags dynamically updated per language
- Open Graph tags for social media sharing
- Canonical URLs to prevent duplicate content
- Keyword optimization for crypto trading terms
- Multi-language content for global reach
- Fresh content updates with latest Backpack activities
- Internal linking strategy for user retention
- Connect to Vercel: Link your GitHub repository
- Configure custom domain: Point DNS to Vercel
- Environment variables: Add any required secrets
- Deploy: Push to main branch triggers deployment
# Build for production
npm run build
# Start production server
npm start
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes with proper testing
- Commit with descriptive messages
- Push to your branch:
git push origin feature/amazing-feature - Open a Pull Request
- TypeScript: Strict type checking enabled
- ESLint: Follow configured rules
- Prettier: Consistent code formatting
- Responsive design: Mobile-first approach
- All website content is AI-generated for promotional purposes
- Backpack promotions mentioned may not reflect actual offers
- Not financial or investment advice
- Users should conduct their own research before trading
- Google Analytics: Anonymized user tracking
- No personal data: Collection beyond standard analytics
- GDPR compliant: Cookie consent and data processing transparency
- Main Exchange: backpack.exchange
- Documentation: learn.backpack.exchange
- Support: support.backpack.exchange
- Next.js Docs: nextjs.org/docs
- Tailwind CSS: tailwindcss.com
- Vercel Deployment: vercel.com/docs
MIT License - see LICENSE file for details.
⚡ Built with Claude Code - AI-powered development assistance