ctmmediagroup/SoftwareX
22
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: Redesign README with better formatting and visual hierarchy

Browse Source
This commit is contained in:
User
2026-08-31 08:42:14 +02:00
parent ad0c936ccd
commit 2cf6ec2f52
1 changed files with 164 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+164 -133
View File
@@ -1,185 +1,216 @@
# BM Connect
# 🚀 BM Connect
A premium React + Vite landing page and community waitlist platform for a meme-coin launch. Features dynamic sections for problem/solution storytelling, tokenomics modals, roadmap visualization, and real-time waitlist tracking backed by Cloudflare D1 SQLite.
> A premium landing page & community waitlist platform for web3 launches powered by React, Vite, and Cloudflare Workers.
**Live:** https://react-example.white-glade-ab2c.workers.dev
[![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
## 📋 Overview
BM Connect delivers a high-trust launch narrative for community-driven web3 projects. The platform combines premium brand storytelling, conversion-focused messaging, and a production-ready waitlist system with real-time registration tracking and community stats.
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.
## Key Features
**🌐 Live Demo:** [https://react-example.white-glade-ab2c.workers.dev](https://react-example.white-glade-ab2c.workers.dev)
- **Premium UI**: Dark, modern design with glassmorphic cards and smooth animations
- **Story-Driven Sections**: Hero, problem, solution, features, ecosystem, stats, roadmap
- **Interactive Modals**: Tokenomics breakdown and vision manifesto
- **Live Waitlist**: Real-time registration tracking with referral system and tier support
- **Community Stats**: Dynamic counter showing total registrations and funding progress
- **Responsive Design**: Mobile-first approach with Tailwind CSS
- **Type-Safe**: Full TypeScript throughout frontend and backend
---
## Tech Stack
## ✨ Features
**Frontend:**
- React 19 with TypeScript
- Vite (build tool & dev server)
- Tailwind CSS (styling)
- Framer Motion (animations)
- 🎨 **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
**Backend:**
- Cloudflare Workers (serverless API)
- Cloudflare D1 (SQLite database)
---
**Infrastructure:**
- Firebase (optional: for app data beyond waitlist)
- Wrangler CLI (deployment & management)
## 🛠️ Tech Stack
## Project Structure
### 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
`
.
├── src/ # React frontend
### 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/ # Navbar, Footer
│ │ ├── sections/ # Landing page sections
│ │ └── ui/ # Reusable components (Button, Badge, etc.)
│ ├── data/ # Static content (features, roadmap, tokenomics, FAQ)
│ ├── lib/
│ │ ├── firebase.ts # Firebase configuration
│ │ ├── waitlist.ts # Waitlist API client
│ │ └── utils.ts
│ │ ├── layout/ # Header, Footer, Navbar
│ │ ├── sections/ # Landing page sections
│ │ └── ui/ # Reusable UI components
│ ├── data/ # Static content
│ ├── lib/ # Utilities & config
│ ├── App.tsx
│ ├── main.tsx
│ └── index.css
├── worker/ # Cloudflare Worker (backend API)
│ ├── src/
│ │ └── index.ts # Waitlist registration endpoints
│ └── wrangler.toml # Worker configuration & D1 binding
├── dist/ # Production build
│ └── 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
├── wrangler.jsonc # Build configuration
├── package.json
├── Dockerfile # Container build (optional)
└── README.md
`
```
## Getting Started
---
## 🚀 Quick Start
### Prerequisites
- Node.js 18+
- npm or yarn
- Cloudflare account (for deployment)
### Local Development
### Installation
1. **Install dependencies:**
`ash
npm install
`
```bash
# Clone repository
git clone <your-repo-url>
cd bm-connect
2. **Configure environment variables:**
`ash
cp .env.example .env
`
Required variables:
- VITE_FIREBASE_API_KEY - Firebase API key
- VITE_FIREBASE_AUTH_DOMAIN - Firebase auth domain
- VITE_FIREBASE_PROJECT_ID - Firebase project ID
- VITE_WAITLIST_API_URL - Waitlist API endpoint (local: /api, production: Worker URL)
- GEMINI_API_KEY - Google GenAI API key (optional)
# Install dependencies
npm install
3. **Start development server:**
`ash
npm run dev
`
The app runs on http://localhost:5173 (Vite default)
# Configure environment
cp .env.example .env
```
4. **Build for production:**
`ash
npm run build
`
### Development
5. **Type checking:**
`ash
npm run lint
`
```bash
# Start dev server
npm run dev
# Opens at http://localhost:5173
## Database: Cloudflare D1
# Type checking
npm run lint
The waitlist backend is powered by **Cloudflare D1**, a serverless SQLite database. Configuration details:
# Production build
npm run build
```
- **Database name:** bm_connect_db
- **Database ID:** 5cf8ba8c-fe38-4db4-bf95-aa8fb8c09892
- **Binding:** DB (available in Worker via env.DB)
- **Tables:**
- waitlist_entries - User registrations (email, name, tier, referral code, etc.)
- waitlist_stats - Global statistics (total registered, funded amount)
---
### Worker API Endpoints
## 🗄️ Database: Cloudflare D1
The Cloudflare Worker in worker/src/index.ts provides these endpoints:
Your waitlist data is stored in production-grade SQLite:
- **POST /api/waitlist/register** - Register a new email with optional metadata
- **GET /api/waitlist/stats** - Get global registration and funding stats
- **POST /api/waitlist/verify** - Verify referral codes and registration status
**Database Details:**
- **Name:** bm_connect_db
- **ID:** 5cf8ba8c-fe38-4db4-bf95-aa8fb8c09892
- **Binding:** DB (available in Worker)
## Deployment
**Data Stored:**
- User registrations (email, name, tier, referral code)
- Global statistics (total registered, funded amount)
### Deploy to Cloudflare Workers
---
1. **Ensure wrangler.toml is configured with D1 database:**
` oml
[[d1_databases]]
binding = "DB"
database_name = "bm_connect_db"
database_id = "5cf8ba8c-fe38-4db4-bf95-aa8fb8c09892"
`
## 🔌 API Endpoints
2. **Build and deploy:**
`ash
npm run build
npx wrangler deploy
`
The Cloudflare Worker provides these endpoints:
3. **Verify deployment:**
- Frontend: https://react-example.white-glade-ab2c.workers.dev
- Worker API: https://react-example.white-glade-ab2c.workers.dev/api/waitlist/stats
```
POST /api/waitlist/register → Register a new user
GET /api/waitlist/stats → Get global statistics
POST /api/waitlist/verify → Verify referral codes
```
### Environment Setup
---
For production, configure these environment variables in your Cloudflare dashboard:
- Worker secrets (via wrangler secret put)
- D1 database bindings (configured in wrangler.toml)
## 🚢 Deployment
## Customization
### Deploy to Cloudflare
### Content
```bash
# Build
npm run build
Static content is managed in src/data/:
- features.ts - Feature cards and descriptions
- roadmap.ts - Milestone timeline
- tokenomics.ts - Token distribution and economics
- faq.ts - Frequently asked questions
- ecosystem.ts - Partner/ecosystem information
# 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
- Global styles: src/index.css
- Tailwind config: tailwind.config.js (if present)
- Component-level: Tailwind classes in JSX
---
### API Integration
## 📝 Environment Setup
Update VITE_WAITLIST_API_URL to point to your deployed Worker:
- Local development: /api (proxied via Vite dev server)
- Production: https://your-worker.workers.dev
Create `.env` file:
## Community & Support
```env
# Firebase Configuration
VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_domain
VITE_FIREBASE_PROJECT_ID=your_project
For questions or issues, refer to:
- **Firebase Docs**: https://firebase.google.com/docs
- **Cloudflare Workers Docs**: https://developers.cloudflare.com/workers/
- **Vite Docs**: https://vitejs.dev/
# 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 ❤️**