5.2 KiB
5.2 KiB
🚀 BM Connect
A premium landing page & community waitlist platform for web3 launches powered by React, Vite, and Cloudflare Workers.
📋 Overview
BM Connect is a production-ready landing page platform designed for meme-coin and web3 project launches. It combines premium storytelling with a fully functional waitlist system, delivering a complete user experience from discovery to registration.
🌐 Live Demo: https://react-example.white-glade-ab2c.workers.dev
✨ Features
- 🎨 Premium UI - Dark theme with glassmorphic design and smooth animations
- 📖 Story-Driven Layout - Hero, problem, solution, features, roadmap sections
- 💰 Tokenomics & Vision - Interactive modals for detailed information
- 📊 Live Waitlist - Real-time registration tracking with referral system
- 🔢 Community Stats - Dynamic counters for registrations and funding
- 📱 Fully Responsive - Mobile-first design that works everywhere
- 🔒 Type-Safe - 100% TypeScript frontend and backend
🛠️ Tech Stack
Frontend
- React 19 - Modern UI framework
- TypeScript - Type safety & developer experience
- Vite - Lightning-fast build tool & dev server
- Tailwind CSS - Utility-first styling
- Framer Motion - Smooth animations
Backend
- Cloudflare Workers - Serverless API at the edge
- Cloudflare D1 - SQLite database for waitlist data
- Wrangler CLI - Deployment management
📁 Project Structure
bm-connect/
├── src/ # React frontend application
│ ├── components/
│ │ ├── layout/ # Header, Footer, Navbar
│ │ ├── sections/ # Landing page sections
│ │ └── ui/ # Reusable UI components
│ ├── data/ # Static content
│ ├── lib/ # Utilities & config
│ ├── App.tsx
│ └── main.tsx
│
├── worker/ # Cloudflare Worker API
│ ├── src/index.ts # Waitlist endpoints
│ └── wrangler.toml # Worker configuration
│
├── dist/ # Production build
├── package.json
├── vite.config.ts
├── tsconfig.json
└── README.md
🚀 Quick Start
Prerequisites
- Node.js 18+
- npm or yarn
- Cloudflare account (for deployment)
Installation
# Clone repository
git clone <your-repo-url>
cd bm-connect
# Install dependencies
npm install
# Configure environment
cp .env.example .env
Development
# Start dev server
npm run dev
# Opens at http://localhost:5173
# Type checking
npm run lint
# Production build
npm run build
🗄️ Database: Cloudflare D1
Your waitlist data is stored in production-grade SQLite:
Database Details:
- Name: bm_connect_db
- ID: 5cf8ba8c-fe38-4db4-bf95-aa8fb8c09892
- Binding: DB (available in Worker)
Data Stored:
- User registrations (email, name, tier, referral code)
- Global statistics (total registered, funded amount)
🔌 API Endpoints
The Cloudflare Worker provides these endpoints:
POST /api/waitlist/register → Register a new user
GET /api/waitlist/stats → Get global statistics
POST /api/waitlist/verify → Verify referral codes
🚢 Deployment
Deploy to Cloudflare
# Build
npm run build
# Deploy
npx wrangler deploy
Your app is now live!
- URL: https://react-example.white-glade-ab2c.workers.dev
- API: https://react-example.white-glade-ab2c.workers.dev/api/waitlist/stats
🎨 Customization
Update Content
Edit files in src/data/:
features.ts- Feature listroadmap.ts- Milestones & timelinetokenomics.ts- Token distributionfaq.ts- FAQ questions & answersecosystem.ts- Partnerships & info
Styling
- Global:
src/index.css - Components: Tailwind classes in JSX
- Theme: Dark mode by default
📝 Environment Setup
Create .env file:
# Firebase Configuration
VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_domain
VITE_FIREBASE_PROJECT_ID=your_project
# Waitlist API
VITE_WAITLIST_API_URL=https://your-worker.workers.dev
# Optional
GEMINI_API_KEY=your_key
📚 Resources
🤝 Contributing
We welcome contributions! Please feel free to:
- Report issues
- Submit pull requests
- Suggest improvements
📄 License
MIT License - Use freely for your own projects
Built for the web3 community ❤️