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
+167 -136
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:** - 🎨 **Premium UI** - Dark theme with glassmorphic design and smooth animations
- React 19 with TypeScript - 📖 **Story-Driven Layout** - Hero, problem, solution, features, roadmap sections
- Vite (build tool & dev server) - 💰 **Tokenomics & Vision** - Interactive modals for detailed information
- Tailwind CSS (styling) - 📊 **Live Waitlist** - Real-time registration tracking with referral system
- Framer Motion (animations) - 🔢 **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:** ## 🛠️ Tech Stack
- Firebase (optional: for app data beyond waitlist)
- Wrangler CLI (deployment & management)
## 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
` ### Backend
. - **Cloudflare Workers** - Serverless API at the edge
├── src/ # React frontend - **Cloudflare D1** - SQLite database for waitlist data
- **Wrangler CLI** - Deployment management
---
## 📁 Project Structure
```
bm-connect/
├── src/ # React frontend application
│ ├── components/ │ ├── components/
│ │ ├── layout/ # Navbar, Footer │ │ ├── layout/ # Header, Footer, Navbar
│ │ ├── sections/ # Landing page sections │ │ ├── sections/ # Landing page sections
│ │ └── ui/ # Reusable components (Button, Badge, etc.) │ │ └── ui/ # Reusable UI components
│ ├── data/ # Static content (features, roadmap, tokenomics, FAQ) │ ├── data/ # Static content
│ ├── lib/ │ ├── lib/ # Utilities & config
│ │ ├── firebase.ts # Firebase configuration
│ │ ├── waitlist.ts # Waitlist API client
│ │ └── utils.ts
│ ├── App.tsx │ ├── App.tsx
│ ├── main.tsx │ └── main.tsx
│ └── index.css │
├── worker/ # Cloudflare Worker (backend API) ├── worker/ # Cloudflare Worker API
│ ├── src/ │ ├── src/index.ts # Waitlist endpoints
│ │ └── index.ts # Waitlist registration endpoints │ └── wrangler.toml # Worker configuration
│ └── wrangler.toml # Worker configuration & D1 binding │
├── dist/ # Production build ├── dist/ # Production build
├── package.json
├── vite.config.ts ├── vite.config.ts
├── tsconfig.json ├── tsconfig.json
├── wrangler.jsonc # Build configuration
├── package.json
├── Dockerfile # Container build (optional)
└── README.md └── README.md
` ```
## Getting Started ---
## 🚀 Quick Start
### Prerequisites ### Prerequisites
- Node.js 18+ - Node.js 18+
- npm or yarn - npm or yarn
- Cloudflare account (for deployment) - Cloudflare account (for deployment)
### Local Development ### Installation
1. **Install dependencies:** ```bash
`ash # Clone repository
git clone <your-repo-url>
cd bm-connect
# Install dependencies
npm install npm install
`
2. **Configure environment variables:** # Configure environment
`ash
cp .env.example .env cp .env.example .env
` ```
Required variables: ### Development
- 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)
3. **Start development server:** ```bash
`ash # Start dev server
npm run dev npm run dev
` # Opens at http://localhost:5173
The app runs on http://localhost:5173 (Vite default)
4. **Build for production:** # Type checking
`ash
npm run build
`
5. **Type checking:**
`ash
npm run lint npm run lint
`
## Database: Cloudflare D1 # Production build
The waitlist backend is powered by **Cloudflare D1**, a serverless SQLite database. Configuration details:
- **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
The Cloudflare Worker in worker/src/index.ts provides these endpoints:
- **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
## Deployment
### 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"
`
2. **Build and deploy:**
`ash
npm run 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 npx wrangler deploy
` ```
3. **Verify deployment:** **Your app is now live!**
- Frontend: https://react-example.white-glade-ab2c.workers.dev - **URL:** https://react-example.white-glade-ab2c.workers.dev
- Worker API: https://react-example.white-glade-ab2c.workers.dev/api/waitlist/stats - **API:** https://react-example.white-glade-ab2c.workers.dev/api/waitlist/stats
### Environment Setup ---
For production, configure these environment variables in your Cloudflare dashboard: ## 🎨 Customization
- Worker secrets (via wrangler secret put)
- D1 database bindings (configured in wrangler.toml)
## Customization ### Update Content
Edit files in `src/data/`:
### Content - `features.ts` - Feature list
- `roadmap.ts` - Milestones & timeline
Static content is managed in src/data/: - `tokenomics.ts` - Token distribution
- features.ts - Feature cards and descriptions - `faq.ts` - FAQ questions & answers
- roadmap.ts - Milestone timeline - `ecosystem.ts` - Partnerships & info
- tokenomics.ts - Token distribution and economics
- faq.ts - Frequently asked questions
- ecosystem.ts - Partner/ecosystem information
### Styling ### 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: Create `.env` file:
- Local development: /api (proxied via Vite dev server)
- Production: https://your-worker.workers.dev
## 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: # Waitlist API
- **Firebase Docs**: https://firebase.google.com/docs VITE_WAITLIST_API_URL=https://your-worker.workers.dev
- **Cloudflare Workers Docs**: https://developers.cloudflare.com/workers/
- **Vite Docs**: https://vitejs.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 ❤️**