AI-driven sustainable material adoption platform with modern UI/UX, LCA benchmarking, and cost forecasting

A professional web application that helps organizations discover, compare, and adopt sustainable materials through data-driven insights and beautiful user experience.

• 10 Sample Materials: Recycled cotton, polyester, and blends with realistic data
• Advanced Search & Filtering: Real-time search with multiple filter options
• LCA Comparisons: CO₂, water usage, energy consumption vs virgin materials
• Sustainability Scoring: Composite scores with visual indicators
• Certification Tracking: GOTS, GRS, OEKO-TEX, and more
• Interactive Comparison: Side-by-side material analysis

• 1-10 Year Predictions: Advanced forecasting with confidence intervals
• EU 2027 Regulation Modeling: 15% cost increase impact simulation
• Supply Volatility Analysis: Market dynamics and price fluctuations
• Interactive Charts: Beautiful visualizations with Recharts
• MOQ Considerations: Minimum order quantity impact analysis

• Requirements Definition: Cost, durability, environmental constraints
• Smart Material Matching: Rule-based AI recommendations
• Certification Filtering: Filter by required certifications
• Quantity & Timeline Planning: MOQ and lead time optimization

• Tailwind CSS: Professional design system with custom components
• Framer Motion: Smooth animations and micro-interactions
• Glass Morphism: Modern card designs with backdrop blur effects
• Responsive Design: Mobile-first approach, works on all devices
• Accessibility: Built-in accessibility features and keyboard navigation

• Python 3.9+
• Node.js 16+
• Git

git clone https://github.com/marvinoka4/sustainable-materials-platform
cd sustainable-materials-platform

# Install UI dependencies
./install_ui_deps.sh

# Start demo (no database required)
./start_demo.sh

# Backend (Terminal 1)
cd backend
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate
pip install Flask Flask-Cors
python demo_server.py

# Frontend (Terminal 2)
cd frontend
npm install
echo "REACT_APP_API_URL=http://localhost:5001" > .env
npm start

🎉 Open http://localhost:3000 to see the platform!

sustainable-materials-platform/
├── 📁 backend/
│   ├── demo_server.py          # Main Flask application with in-memory data
│   ├── requirements-demo.txt   # Minimal Python dependencies
│   └── venv/                   # Python virtual environment
├── 📁 frontend/
│   ├── 📁 src/
│   │   ├── App.js              # Main React application
│   │   ├── index.css           # Tailwind CSS styles
│   │   └── 📁 components/
│   │       ├── MaterialDatabase.js    # Material browsing & filtering
│   │       ├── MaterialCard.js        # Individual material cards
│   │       ├── MaterialComparison.js  # Side-by-side comparison
│   │       ├── CostForecasting.js     # Cost prediction charts
│   │       ├── SpecUpload.js          # Requirements upload
│   │       ├── LeafIcon.js            # Custom sustainability icon
│   │       └── WaterIcon.js           # Custom water usage icon
│   ├── package.json            # Node.js dependencies
│   ├── tailwind.config.js      # Tailwind CSS configuration
│   └── postcss.config.js       # PostCSS configuration
├── 📁 deployment/
│   ├── Dockerfile.backend      # Backend container configuration
│   ├── Dockerfile.frontend     # Frontend container configuration
│   └── cloudbuild.yaml         # Google Cloud Build configuration
├── 📄 DEPLOYMENT_GUIDE.md      # Google Cloud Run deployment
├── 📄 QUICK_START.md           # 5-minute setup guide
├── 📄 TROUBLESHOOTING.md       # Common issues and solutions
└── 📄 README.md                # This file

• Flask 2.3.3: Lightweight Python web framework
• Flask-CORS: Cross-origin resource sharing
• In-Memory Database: 10 sample materials with realistic data
• Rule-Based AI: Material matching and sustainability scoring

• React 18: Modern JavaScript framework
• Tailwind CSS 3.3: Utility-first CSS framework
• Framer Motion: Animation library
• Heroicons: Beautiful SVG icons
• Recharts: Interactive chart library
• Custom Icons: Sustainability-themed SVG components

• Google Cloud Run: Serverless container platform
• Docker: Containerization
• MongoDB Atlas: Cloud database (for production)
• 100% Renewable Energy: Carbon-neutral hosting

The platform includes 10 realistic materials:

• Material Discovery: Find sustainable alternatives to conventional materials
• Cost Planning: Forecast material costs for budget planning
• Sustainability Reporting: Get LCA data for ESG reporting
• Supplier Evaluation: Compare suppliers and certifications

• Requirements Matching: Upload specs and get AI recommendations
• Cost Optimization: Balance sustainability and cost constraints
• Risk Assessment: Understand supply chain volatility
• Compliance: Track certifications and regulations

• Impact Assessment: Quantify environmental benefits
• Goal Setting: Set science-based targets with data
• Progress Tracking: Monitor sustainability improvements
• Stakeholder Communication: Professional reports and visualizations

# In backend/demo_server.py, add to SAMPLE_MATERIALS array
{
    "_id": "11",
    "name": "Your Material Name",
    "type": "cotton|polyester|blend",
    "cost_per_kg": 2.50,
    "durability_cycles": 900,
    "lca_metrics": {
        "co2_kg_per_kg": 4.0,
        "water_l_per_kg": 800,
        "energy_mj_per_kg": 35.0
    },
    # ... other properties
}

// In frontend/tailwind.config.js
colors: {
  primary: {
    500: '#your-brand-color',
    600: '#your-brand-color-dark',
  }
}

// In frontend/src/components/MaterialCard.js
<div className="metric-card">
  <div className="metric-value">{material.your_metric}</div>
  <div className="metric-label">Your Label</div>
</div>

See DEPLOYMENT_GUIDE.md for complete Google Cloud Run deployment instructions.

# Setup Google Cloud
gcloud projects create your-project-id
gcloud config set project your-project-id

# Deploy backend
gcloud run deploy sustainable-materials-backend --source backend/

# Deploy frontend
gcloud run deploy sustainable-materials-frontend --source frontend/

# Test API endpoints
curl http://localhost:5001/health
curl http://localhost:5001/api/materials

# Run test script
./test_backend.sh

# Run React tests
cd frontend
npm test

# Build production version
npm run build

• Materials: 10 sample materials (easily expandable)
• Concurrent Users: 100+ (with Cloud Run scaling)
• Response Time: <200ms for material queries
• Database: In-memory (instant queries)

1. Database: Switch to MongoDB Atlas for persistence
2. Caching: Add Redis for improved performance
3. CDN: Use Cloud CDN for static assets
4. Load Balancing: Auto-scaling with Cloud Run

• Carbon Neutral Hosting: 100% renewable energy
• Sustainable Material Promotion: Encourages eco-friendly choices
• Waste Reduction: Better material planning reduces waste
• Transparency: Clear environmental impact data
• Circular Economy: Promotes recycled and bio-based materials

• CO₂ Emissions: kg CO₂ per kg material
• Water Usage: Liters per kg material
• Energy Consumption: Megajoules per kg material
• Recyclability Score: 0-100 scale
• Supply Chain Transparency: Supplier visibility score

# Fork the repository
git clone https://github.com/your-username/sustainable-materials-platform
cd sustainable-materials-platform

# Create feature branch
git checkout -b feature/your-feature-name

# Make changes and test
./start_demo.sh

# Submit pull request
git push origin feature/your-feature-name

• Code Style: Follow existing patterns
• Testing: Test all new features
• Documentation: Update README for new features
• Sustainability: Maintain focus on environmental impact

• Quick Start Guide - 5-minute setup
• Deployment Guide - Google Cloud deployment
• Troubleshooting - Common issues and solutions

• Issues: Report bugs and request features
• Discussions: Share ideas and use cases
• Wiki: Community-maintained documentation

• Custom Development: Tailored features for your organization
• Integration Services: Connect with your existing systems
• Training & Support: Team training and ongoing support

MIT License - see LICENSE file for details.

• Tailwind CSS: For the beautiful design system
• Heroicons: For the comprehensive icon library
• Google Cloud: For carbon-neutral hosting
• MongoDB: For flexible data storage
• React Community: For the amazing ecosystem

Built with ❤️ for a sustainable future 🌱

Promoting circular economy and sustainable material adoption through technology