John-Michael Crawford

JM Crawford Portfolio & Business Platform

🎨 Overview

A production-ready React 18 portfolio website and full-stack business automation platform. Features comprehensive design portfolio showcases, integrated proposal generation, Stripe payment processing, QuickBooks Online accounting automation, and advanced business intelligence dashboards. Optimized for performance with mobile-first responsive design and iOS Safari compatibility.

Live Site: https://www.jmcrawforddesign.com
Deployment: Firebase Hosting with custom domain
Status: ✅ Production - Fully operational
Last Updated: January 2026

✨ Key Highlights

🚀 Core Features

🎨 Portfolio Showcase

Hero Carousel Featured Projects:

Featured Project: Portfolio Upgrade Case Study

Design Portfolio (25+ Projects)

💼 Business Proposal System

4-Step Client Onboarding Workflow:

  1. Services Catalog (/services) - Interactive selection with 29 professional services ($1,000-$21,500)
  2. Proposal Builder (/proposal-builder) - Dynamic configuration with real-time pricing
  3. Proposal Review (/proposal-review) - Professional presentation with Stripe payment integration
  4. Scheduling (/proposal-next) - Calendly integration for kickoff meeting booking

Key Services:

Features:

💳 Stripe Payment Processing

Production Payment Infrastructure:

Security Features:

Test Cards:

📊 QuickBooks Online Integration

Automated Accounting Pipeline:

Financial Workflow:

  1. Stripe payment received → stripeWebhook.js triggered
  2. Create QBO customer via qboClient.createCustomer()
  3. Generate QBO invoice with service line items via qboClient.createInvoice()
  4. Record payment against invoice via qboClient.createPayment()
  5. Track Stripe fees in clearing account
  6. Bank reconciliation with deposit matching

📈 Advanced Analytics & Business Intelligence

Analytics Dashboard Features (AnalyticsDashboard.js):

Automated Email Workflows (emailAutomation.js):

🏦 Banking & Reconciliation Automation

Plaid Integration (plaidIntegration.js):

Reconciliation Features (bankReconciliation.js):

🛠️ Technical Architecture

Frontend Stack

Core Framework:

UI/UX Libraries:

Business Integrations:

Backend Infrastructure

Firebase Services:

API Integrations:

Performance Optimizations

Code Splitting & Lazy Loading:

Mobile Optimizations:

Build Optimizations:

Recent Fixes (January 2026):

📂 Project Structure

JMC818386.github.io/
├── my-app/                          # Main React application
│   ├── src/
│   │   ├── Components/
│   │   │   ├── App.js               # Home page (About + GraphicDesignBody)
│   │   │   ├── ServicesMain.js      # Service catalog page
│   │   │   ├── ProposalBuilder.js   # Interactive proposal configuration
│   │   │   ├── ProposalReview.js    # Proposal presentation & Stripe payment
│   │   │   ├── ProposalNext.js      # Calendly scheduling integration
│   │   │   ├── QboAdmin.js          # QuickBooks Online admin interface
│   │   │   ├── AnalyticsDashboard.js # Business analytics dashboard
│   │   │   ├── BankingDashboard.js  # Banking reconciliation interface
│   │   │   ├── Portfolio/
│   │   │   │   ├── ProjectTemplate.js # Data-driven template (not used for iOS-sensitive pages)
│   │   │   │   └── Design/
│   │   │   │       ├── PortfolioUpgrade.js # Standalone component (iOS optimized)
│   │   │   │       ├── Clover.js           # Standalone component (iOS optimized)
│   │   │   │       ├── DreamPosters.js     # Standalone component (iOS optimized)
│   │   │   │       ├── MD99.js             # Standalone component (iOS optimized)
│   │   │   │       ├── upgrade-media/      # PDF files and preview images
│   │   │   │       └── ... (20+ other portfolio components)
│   │   │   ├── TopNav.js            # Navigation component
│   │   │   ├── PortfolioNav.js      # Portfolio navigation
│   │   │   └── Layout.js            # Page layout wrapper
│   │   ├── config/
│   │   │   └── services.config.js   # Service definitions & Calendly config
│   │   ├── data/
│   │   │   └── portfolioProjects.js # Portfolio project data (for ProjectTemplate)
│   │   ├── utils/
│   │   │   └── analytics.js         # Analytics tracking utilities
│   │   └── index.js                 # Application entry point & routing
│   ├── public/
│   │   ├── index.html               # HTML template with Calendly script
│   │   └── upgrade-media/           # Static assets for Portfolio Upgrade
│   │       ├── *.pdf (5 files)      # Technical documentation PDFs
│   │       └── *_preview.png (5 files) # PDF preview thumbnails
│   ├── build/                       # Production build output
│   └── package.json                 # Dependencies and scripts
├── functions/                       # Firebase Functions backend
│   ├── index.js                     # Functions export configuration
│   ├── firebaseInit.js              # Firebase admin initialization
│   ├── createPaymentIntent.js       # Stripe payment intent creation
│   ├── stripeWebhook.js             # Stripe webhook with QBO integration
│   ├── qboAuth.js                   # QuickBooks OAuth endpoints
│   ├── qboClient.js                 # QBO API client
│   ├── qboBiz.js                    # QBO business logic helpers
│   ├── analyticsEngine.js           # Business analytics tracking
│   ├── emailAutomation.js           # Automated email workflows
│   ├── proposalTracking.js          # Proposal lifecycle tracking
│   ├── bankReconciliation.js        # Bank reconciliation automation
│   ├── plaidIntegration.js          # Plaid banking integration
│   ├── sendForSignature.js          # Adobe Sign integration (planned)
│   ├── adobeSignWebhook.js          # Adobe Sign webhook handler (planned)
│   ├── package.json                 # Functions dependencies
│   └── QBO_SECRETS_SETUP.md         # QuickBooks setup guide
├── scripts/
│   ├── generateProposalPdf.js       # Adobe PDF generation script
│   ├── create-backup.sh             # Backup utility
│   └── safe-deploy.sh               # Deployment script
├── docs/                            # Documentation and guides
│   ├── PHASE_7_ANALYTICS_EMAIL_GUIDE.md
│   ├── PHASE_8_BANKING_SETUP.md
│   ├── QBO_INTEGRATION_GUIDE.md
│   ├── STRIPE_INTEGRATION_README.md
│   ├── STRIPE_SETUP.md
│   ├── STRIPE_TESTING_GUIDE.md
│   └── ... (additional documentation)
├── firebase.json                    # Firebase configuration
├── .gitignore                       # Security rules for credentials
├── package.json                     # Root package configuration
└── README.md                        # This documentation

🔒 Security & Configuration

Environment Security

Protected Credentials:

Client-Side Security:

Deployment Security

🚀 Getting Started

Prerequisites

Installation

  1. Clone the repository: 
    git clone https://github.com/JMC818386/JMC818386.github.io.git
cd JMC818386.github.io
  2. Install React app dependencies: 
    cd my-app
npm install
  3. Install Firebase Functions dependencies: 
    cd ../functions
npm install
cd ..
  4. Start development server: 
    cd my-app
npm start
  5. Access local development:

Production Deployment

# Build production version
cd my-app
npm run build

# Deploy to Firebase Hosting
cd ..
firebase deploy --only hosting

# Deploy Firebase Functions (if changed)
firebase deploy --only functions

📋 Available Scripts

React Application (/my-app/)

Firebase Functions (/functions/)

Root Level

🧪 Testing

Stripe Payment Testing

Test Cards (Stripe Test Mode):

Test Workflow:

  1. Navigate to /services and select services
  2. Go to /proposal-builder and fill out client information
  3. Review proposal at /proposal-review
  4. Click “Process Payment” and use test card
  5. Verify payment success message and Firebase Functions logs

Browser Compatibility

Tested & Verified:

Performance Metrics

Lighthouse Scores (Target):

Build Metrics:

🎨 Design System

Color Palette

--color-bg: #fdfdfd        /* Background - Clean minimal white */
--color-gray: #21272a      /* Text - Dark gray for readability */
--color-silver: #7a7a7a    /* Secondary text - Silver accents */
--color-primary: #007bff   /* Primary action color */
--color-white: #ffffff     /* Pure white for contrast */

Typography

Component Patterns

📈 Performance & Analytics

Current Performance

Bundle Analysis (Production Build):

Main bundle:    307.59 KB gzipped
CSS bundle:     43.84 KB gzipped
Largest chunk:  305.js (88.58 KB) - Core UI components
Total build:    402 files deployed

Optimization Strategies:

Analytics Tracking

Business Metrics:

Technical Metrics:

🔄 Recent Updates & Changelog

January 2026 - iOS Compatibility & Performance Fixes

Critical Fixes:

Layout & Responsive Design:

Component Architecture:

Previous Major Updates

Phase 8 - Banking & Reconciliation:

Phase 7 - Analytics & Email Automation:

Phase 6 - QuickBooks Integration:

Phase 4-5 - Stripe Payment Processing:

🤝 Contributing

This is a personal portfolio and business platform project. While the codebase is public for portfolio demonstration purposes:

📞 Contact & Connect

📄 License & Copyright

Copyright © 2025-2026 JM Crawford

This project represents personal portfolio work and business capabilities. The code structure and implementation approaches may be referenced for educational purposes, but direct copying of design assets, brand identity, content, or business logic is not permitted without explicit permission.

🏆 Project Statistics

Codebase Metrics:

Business Platform Features:

Built with ❤️ and careful attention to user experience, performance, mobile compatibility, and professional presentation.