From 2cf6ec2f52e809d4acc2234ec74cf7e963c9482b Mon Sep 17 00:00:00 2001 From: User Date: Mon, 31 Aug 2026 08:42:14 +0200 Subject: [PATCH] docs: Redesign README with better formatting and visual hierarchy --- README.md | 297 ++++++++++++++++++++++++++++++------------------------ 1 file changed, 164 insertions(+), 133 deletions(-) diff --git a/README.md b/README.md index 3186241..d94bf83 100644 --- a/README.md +++ b/README.md @@ -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 +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 ❤️**