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 features three specialized referral tracks:
-
🚀 Meme Coin Masters → backpack.exchange/join/meme
- Target: Meme coin traders, DeFi enthusiasts, high-volume day traders
- Features: Real-time trending tokens, pump.fun integration, 100x potential alerts
-
🌏 Chinese Community → backpack.exchange/join/zh-cn
- Target: Chinese-speaking users globally (Mainland, Taiwan, Hong Kong, Singapore)
- Features: Chinese customer support, USD fiat on/off ramps, mainland KYC support
-
🎮 Gaming Community → backpack.exchange/join/lol
- Target: Gamers, NFT traders, metaverse investors, esports enthusiasts
- Features: Gaming token listings, NFT marketplace integration, play-to-earn support
- Automatic detection based on browser locale
- Languages: English, 简体中文, 繁體中文, Français, Português, Italiano, Deutsch, 日本語, 한국어
- Elegant dropdown with flag emojis for easy switching
- Backpack Points Season 2 - Weekly point distribution system
- Eclipse ES Airdrop - Latest token launch campaigns
- Pump.fun Trading - Viral meme coin discovery
- Fragmetric Frenzy - Trading competition rewards
- New User Campaigns - Up to $200 welcome bonuses
- Legacy Drop - Historical user rewards program
- 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 15 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 | 15.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 check
npm run export # Static exportbackpack-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.js # Next.js configuration
├── tailwind.config.js # Tailwind CSS 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
# Or export static files
npm run export- 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