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:** - 🎨 **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
npm install git clone <your-repo-url>
` cd bm-connect
2. **Configure environment variables:** # Install dependencies
`ash npm install
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)
3. **Start development server:** # Configure environment
`ash cp .env.example .env
npm run dev ```
`
The app runs on http://localhost:5173 (Vite default)
4. **Build for production:** ### Development
`ash
npm run build
`
5. **Type checking:** ```bash
`ash # Start dev server
npm run lint 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 **Database Details:**
- **GET /api/waitlist/stats** - Get global registration and funding stats - **Name:** bm_connect_db
- **POST /api/waitlist/verify** - Verify referral codes and registration status - **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:** ## 🔌 API Endpoints
` oml
[[d1_databases]]
binding = "DB"
database_name = "bm_connect_db"
database_id = "5cf8ba8c-fe38-4db4-bf95-aa8fb8c09892"
`
2. **Build and deploy:** The Cloudflare Worker provides these endpoints:
`ash
npm run build
npx wrangler deploy
`
3. **Verify deployment:** ```
- Frontend: https://react-example.white-glade-ab2c.workers.dev POST /api/waitlist/register → Register a new user
- Worker API: https://react-example.white-glade-ab2c.workers.dev/api/waitlist/stats 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: ## 🚢 Deployment
- Worker secrets (via wrangler secret put)
- D1 database bindings (configured in wrangler.toml)
## Customization ### Deploy to Cloudflare
### Content ```bash
# Build
npm run build
Static content is managed in src/data/: # Deploy
- features.ts - Feature cards and descriptions npx wrangler deploy
- roadmap.ts - Milestone timeline ```
- tokenomics.ts - Token distribution and economics
- faq.ts - Frequently asked questions **Your app is now live!**
- ecosystem.ts - Partner/ecosystem information - **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 ### 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 ❤️**