Buyer Intent Lead Generation dApp

A modern, full-featured B2B/B2C lead generation platform built with React 18, client-side search, OpenStreetMap geo-targeting, and Framer Motion animations. Optimized for Horizons browser-based deployment.

🚀 Features

Core Functionality

Client-Side Search: Fast, responsive search across leads, packages, and niches (no external API needed)
Geo-Targeting: Interactive OpenStreetMap with radius slider (10-500km) for location-based lead discovery
Lead Capture: B2B and B2C lead capture forms with intent scoring
E-Commerce Style Browsing: Filterable lead packages by industry, niche, budget, and intent score
Federated Results: Unified search results across multiple collections
Dashboard: Comprehensive lead management with analytics, export (CSV/JSON), and intent distribution charts
Dark Theme: Modern dark UI with Tailwind CSS and shadcn/ui components
Persistent Storage: localStorage-based data persistence

Technical Stack

Frontend: React 18.2.0, React Router 6, TypeScript
Styling: TailwindCSS 3.3.2, shadcn/ui components, Lucide icons
Animations: Framer Motion
Search: Client-side filtering with localStorage
Maps: Leaflet + React Leaflet + OpenStreetMap
Charts: Recharts for analytics
Build: Vite
Deployment: Horizons-compatible (no Docker, no external APIs)

📋 Project Structure

windsurf-project-2/
├── src/
│   ├── components/
│   │   ├── ui/
│   │   │   ├── Button.tsx
│   │   │   ├── Input.tsx
│   │   │   ├── Card.tsx
│   │   │   └── Tabs.tsx
│   │   ├── InteractiveMap.tsx
│   │   ├── TypesenseSearch.tsx
│   │   ├── LeadCaptureForm.tsx
│   │   ├── LeadPackagesBrowser.tsx
│   │   └── LeadsDashboard.tsx
│   ├── pages/
│   │   ├── Home.tsx
│   │   ├── Search.tsx
│   │   ├── Packages.tsx
│   │   └── Dashboard.tsx
│   ├── lib/
│   │   ├── typesense.ts (Typesense client & utilities)
│   │   └── utils.ts (Helper functions & constants)
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── Dockerfile
├── docker-compose.yml
├── package.json
├── vite.config.ts
├── tsconfig.json
├── tailwind.config.js
├── postcss.config.js
└── README.md

🛠️ Installation & Setup

Prerequisites

Node.js 18+
Docker & Docker Compose (for containerized deployment)
Typesense instance (local or cloud)

Local Development

Clone the repository

cd /Users/oniasbrown/CascadeProjects/windsurf-project-2

Install dependencies
```
npm install
```

Configure environment variables

cp .env.example .env.local

Update .env.local with your Typesense credentials:

REACT_APP_TYPESENSE_HOST=localhost
REACT_APP_TYPESENSE_PORT=8108
REACT_APP_TYPESENSE_PROTOCOL=http
REACT_APP_TYPESENSE_API_KEY=xyz

Start Typesense (if running locally)

docker run -p 8108:8108 -v typesense_data:/data typesense/typesense:latest

Start development server
```
npm run dev
```
Access at http://localhost:5173

Docker Deployment

Build and run with Docker Compose
```
docker-compose up --build
```
- App: http://localhost:5173
- Typesense: http://localhost:8108

Production build

npm run build
docker build -t buyer-intent-app .
docker run -p 5173:5173 buyer-intent-app

📊 Typesense Collections Schema

b2b_leads

{
  "id": "string",
  "company_name": "string",
  "industry": "string (facet)",
  "location": "string (facet)",
  "budget": "int32",
  "intent_score": "int32 (facet)",
  "contact_email": "string",
  "contact_phone": "string",
  "created_at": "int64"
}

b2c_leads

{
  "id": "string",
  "name": "string",
  "service_category": "string (facet)",
  "location": "string (facet)",
  "budget": "int32",
  "intent_score": "int32 (facet)",
  "email": "string",
  "phone": "string",
  "created_at": "int64"
}

packages

{
  "id": "string",
  "name": "string",
  "industry": "string (facet)",
  "niche": "string (facet)",
  "price": "int32",
  "lead_count": "int32",
  "intent_threshold": "int32",
  "description": "string",
  "created_at": "int64"
}

geo_locations

{
  "id": "string",
  "city": "string (facet)",
  "state": "string (facet)",
  "country": "string (facet)",
  "latitude": "float",
  "longitude": "float",
  "lead_density": "int32",
  "created_at": "int64"
}

🎯 Usage Guide

Home Page

Overview of platform features
Quick links to search, packages, and dashboard
Call-to-action buttons

Search Page

Three tabs:

Search Tab: Semantic/hybrid search across all collections
- Natural language queries: "HVAC leads Richmond VA"
- Federated results showing leads, packages, case studies
Geo-Target Tab: Location-based lead discovery
- Interactive map with click-to-set location
- Radius slider (10-500km)
- Geolocation button
Capture Tab: Lead capture forms
- B2B form (company details)
- B2C form (consumer details)
- Auto-calculated intent scores

Packages Page

Browse pre-curated lead packages
Filter by industry, budget, intent score
Sort by rating, price, or lead count
E-commerce style card layout
Multi-select and checkout

Dashboard

Statistics: Total leads, avg intent score, total budget, high-intent count
Analytics: Intent score distribution chart
Lead Table: Full lead management with:
- Bulk selection
- Export to CSV/JSON
- View/delete actions
- Intent score color coding

🔌 API Integration

Typesense Search

import { searchLeads, addLead, exportLeads } from '@/lib/typesense'

// Search leads
const results = await searchLeads('HVAC Richmond', 'b2b_leads')

// Add new lead
await addLead({
  company_name: 'Acme Corp',
  industry: 'HVAC',
  location: 'Richmond, VA',
  budget: 5000,
  contact_email: 'contact@acme.com',
  contact_phone: '+1 (555) 123-4567'
}, 'b2b_leads')

// Export leads
const csv = await exportLeads('b2b_leads', 'csv')

OpenStreetMap Integration

<InteractiveMap
  onLocationChange={(lat, lon, radius) => {
    console.log(`Location: ${lat}, ${lon}, Radius: ${radius}km`)
  }}
  initialLat={37.7749}
  initialLon={-122.4194}
  initialRadius={50}
/>

🎨 Customization

Dark Theme Colors

Edit src/index.css CSS variables:

:root {
  --background: 0 0% 3.6%;
  --foreground: 0 0% 98%;
  --primary: 0 84.2% 60.2%;
  /* ... more colors ... */
}

Industries & Niches

Update src/lib/utils.ts:

export const INDUSTRIES = [
  'HVAC', 'Plumbing', 'Electrical', 'Roofing',
  // Add more...
]

📦 Build & Deployment

Build for Production

npm run build

Output: dist/ directory

Deploy to Hostinger Horizons

Build the application
Use provided Dockerfile
Push to container registry
Deploy via Hostinger dashboard
Set environment variables in deployment settings

Environment Variables for Production

REACT_APP_TYPESENSE_HOST=your-typesense-host.com
REACT_APP_TYPESENSE_PORT=443
REACT_APP_TYPESENSE_PROTOCOL=https
REACT_APP_TYPESENSE_API_KEY=your_production_key

🔐 Security Considerations

API keys stored in environment variables (never in code)
HTTPS recommended for production
Typesense API key should be restricted to read-only operations
CORS configured for allowed origins
Input validation on all forms

📈 Performance Optimization

Code splitting with React Router
Lazy loading of components
Memoization of expensive computations
Image optimization
CSS minification via Tailwind
JavaScript minification via Vite

🐛 Troubleshooting

Typesense Connection Issues

Verify Typesense is running: http://localhost:8108/health
Check API key in .env.local
Ensure CORS is enabled if using cloud Typesense

Map Not Loading

Verify Leaflet CSS is loaded in index.html
Check browser console for errors
Ensure OpenStreetMap tiles are accessible

Search Not Working

Verify collections are initialized
Check Typesense API key
Ensure data is indexed in Typesense

📝 License

MIT License - feel free to use for commercial projects

🤝 Support

For issues or questions:

Check the troubleshooting section
Review Typesense documentation: https://typesense.org/docs/
Check React Router docs: https://reactrouter.com/
Leaflet docs: https://leafletjs.com/

🚀 Future Enhancements

Built with ❤️ for lead generation professionals

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
backend		backend
n8n/workflows		n8n/workflows
src		src
.env.example		.env.example
.env.production		.env.production
.gitignore		.gitignore
DEPLOYMENT.md		DEPLOYMENT.md
HORIZONS_GUIDE.md		HORIZONS_GUIDE.md
PROJECT_SUMMARY.md		PROJECT_SUMMARY.md
RAILWAY_DEPLOYMENT.md		RAILWAY_DEPLOYMENT.md
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
typesense-schema.json		typesense-schema.json
vercel.json		vercel.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation

Buyer Intent Lead Generation dApp

🚀 Features

Core Functionality

Technical Stack

📋 Project Structure

🛠️ Installation & Setup

Prerequisites

Local Development

Docker Deployment

📊 Typesense Collections Schema

b2b_leads

b2c_leads

packages

geo_locations

🎯 Usage Guide

Home Page

Search Page

Packages Page

Dashboard

🔌 API Integration

Typesense Search

OpenStreetMap Integration

🎨 Customization

Dark Theme Colors

Industries & Niches

📦 Build & Deployment

Build for Production

Deploy to Hostinger Horizons

Environment Variables for Production

🔐 Security Considerations

📈 Performance Optimization

🐛 Troubleshooting

Typesense Connection Issues

Map Not Loading

Search Not Working

📝 License

🤝 Support

🚀 Future Enhancements

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages