# 🚀 BM Connect

> A premium landing page & community waitlist platform for web3 launches powered by React, Vite, and Cloudflare Workers.

[![Live](https://img.shields.io/badge/Live-Deployed-brightgreen)](https://react-example.white-glade-ab2c.workers.dev)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue)](https://www.typescriptlang.org/)
[![React](https://img.shields.io/badge/React-19-61DAFB?logo=react)](https://react.dev)
[![Cloudflare](https://img.shields.io/badge/Cloudflare-Workers-F38020?logo=cloudflare)](https://workers.cloudflare.com)

## 📋 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](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

```bash
# Clone repository
git clone <your-repo-url>
cd bm-connect

# Install dependencies
npm install

# Configure environment
cp .env.example .env
```

### Development

```bash
# 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

```bash
# 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 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:

```env
# 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

- [Firebase Documentation](https://firebase.google.com/docs)
- [Cloudflare Workers Guide](https://developers.cloudflare.com/workers/)
- [Vite Documentation](https://vitejs.dev/)
- [React Documentation](https://react.dev)
- [Tailwind CSS](https://tailwindcss.com/)

---

## 🤝 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 ❤️**