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!

🎨 Customization

Update Content

Edit files in src/data/:

features.ts - Feature list
roadmap.ts - Milestones & timeline
tokenomics.ts - Token distribution
faq.ts - FAQ questions & answers
ecosystem.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 ❤️