Heritage Hill: A Case Study in Cooperative Economics

About This Project

This dashboard presents the journey of Heritage Hill LLC (2019-2023), a proof-of-concept venture that explored building economic infrastructure within the Black diaspora. As the founder, I (Brandon Z. Hoff) wanted to create a comprehensive visualization of our learnings and data.

Data & Development Process

• Data Source: All financial and operational data extracted from Heritage Hill's QuickBooks (2019-2023)
• Development Time: Approximately 10 hours total
• AI-Assisted Development:
  • Used Anthropic's Claude for initial architecture planning and code structuring
  • Leveraged Vercel v0 for component prototyping
  • Utilized Cursor IDE for AI-assisted development

Development Workflow

1. Data Organization:

   • Extracted and structured QuickBooks data
   • Used generative AI to help organize and analyze patterns
   • Created data visualization strategies

2. Architecture Planning:

   • Used Claude to plan component structure
   • Implemented v0-generated folder architecture
   • Organized code around data structure

3. Implementation:

   • Built with Next.js 13+ and TypeScript
   • Utilized Framer Motion for animations
   • Implemented Recharts for data visualization
   • Styled with Tailwind CSS

Key Learnings

• Importance of proper data organization before development
• Value of AI tools in structuring complex applications
• Benefits of component-first architecture
• Power of visualization in telling business stories

Features

• Executive Summary Dashboard
• Interactive Timeline (2019-2023)
• Financial Performance Metrics
• Market Opportunity Analysis
• Operational Insights
• Marketing Performance Data

Tech Stack

• Next.js 13+ (App Router)
• TypeScript
• Tailwind CSS
• Framer Motion
• Recharts
• Radix UI

Getting Started

# Clone the repository
git clone [repository-url]

# Install dependencies
npm install

# Run development server
npm run dev

Project Structure

src/
├── app/              # Next.js app router pages
├── components/       # React components
│   ├── executive/    # Executive dashboard components
│   ├── financial/    # Financial visualization components
│   ├── timeline/     # Timeline related components
│   └── ui/          # Reusable UI components
├── lib/             # Utility functions
└── styles/          # Global styles

Connect & Learn More

• Follow my TikTok for Generative AI content
• Connect with me on LinkedIn
• Learn about my journey building with AI tools

Development Insights

This project demonstrates the power of combining traditional development with AI tools:

• Claude for architecture and planning
• v0 for component prototyping
• Cursor IDE for AI-assisted development
• Data visualization strategies for business insights

License

MIT License - Feel free to use this as a template for your own case studies

---

Built with AI assistance by Brandon Z. Hoff