217 lines
5.2 KiB
Markdown
217 lines
5.2 KiB
Markdown
# 🚀 BM Connect
|
|
|
|
> A premium landing page & community waitlist platform for web3 launches powered by React, Vite, and Cloudflare Workers.
|
|
|
|
[](https://react-example.white-glade-ab2c.workers.dev)
|
|
[](https://www.typescriptlang.org/)
|
|
[](https://react.dev)
|
|
[](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 ❤️**
|