About This Project

A modern web application for exploring and preserving the Culpepper family genealogy

🚀Technology Stack

Frontend

▸
Next.js 16 - React framework with App Router for server & client components
▸
React 19 - Modern UI library with hooks and server components
▸
TypeScript 5 - Type-safe development with strict mode
▸
Tailwind CSS 4 - Utility-first styling with custom theme system
▸
D3.js 7 - Interactive family tree visualization

Backend & Data

▸
Neo4j Aura - Graph database perfect for family relationships
▸
ConfigCat - Feature flags for dynamic configuration
▸
Vercel - Deployment platform with GitHub integration
▸
Node.js - Runtime for data scraping and processing

📊Data Collection Process

Source Data

All genealogy data is sourced from Culpepper Connections, a comprehensive genealogy website maintained by Lewis Wyman Griffin Jr.

Web Scraping

A custom TypeScript scraper fetches HTML pages from the source website, parsing person records, relationships (parents, spouses, siblings), and biographical details using Cheerio for HTML parsing.

Graph Database Import

Data is transformed and imported into Neo4j, a graph database ideal for modeling family relationships. Each person becomes a node, with edges representing PARENT_OF, SPOUSE_OF, and SIBLING_OF relationships.

Web Application

Next.js queries Neo4j to build interactive family tree visualizations, searchable person directories, and detailed person pages. The graph database makes it efficient to traverse family relationships across generations.

✨Key Features

🌳 Interactive Family Tree

D3.js-powered visualization with zoom, pan, and click-to-expand functionality for exploring family connections.

🔍 People Search

Debounced search across all records with filtering by name, birthplace, and other criteria.

🌓 Dark Mode

Custom CSS theme system with localStorage persistence and FOUC prevention using blocking scripts.

🚦 Feature Flags

ConfigCat integration for dynamic feature control with route protection and instant rollback capability.

📱 Responsive Design

Mobile-first design with Tailwind CSS breakpoints for optimal viewing on all devices.

⚡ Performance

Server-side rendering, efficient Neo4j queries, and Next.js optimizations for fast page loads.

🏗️Architecture Highlights

→
TypeScript Path Mappings: Clean imports using @components, @lib, @models for better code organization
→
Server & Client Components: Strategic use of Next.js 13+ patterns for optimal performance and interactivity
→
Route Protection: Feature flag-based access control preventing direct URL access to disabled features
→
Graph Database: Neo4j's Cypher query language enables efficient traversal of complex family relationships
→
Barrel Exports: All modules use index.ts files for clean, maintainable imports

Back to Home View on GitHub

Open source • Built with ❤️ for the Culpepper family