Zero Waste, Zero Stress: Building ReMake with AI-Assisted Github Copilot Development

How do I create an image upload component in React that shows a preview 
and converts the image to base64 for API submission?

const ImageUploader = () => {
  const [preview, setPreview] = useState(null);
  const [base64, setBase64] = useState(null);

  const handleImageUpload = (e) => {
    const file = e.target.files[0];
    if (!file) return;

    // Preview
    const reader = new FileReader();
    reader.onloadend = () => {
      setPreview(reader.result);
      setBase64(reader.result.split(',')[1]); // Extract base64
    };
    reader.readAsDataURL(file);
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleImageUpload} />
      {preview && <img src={preview} alt="Preview" />}
    </div>
  );
};

Create a function that sends an uploaded image to the Anthropic Claude API, 
analyzes the material composition, and returns structured JSON with:
- item name
- primary materials (array)
- condition score (1-10)
- recyclability rating

export async function analyzeMaterial(base64Image) {
  const response = await fetch("https://api.anthropic.com/v1/messages", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      model: "claude-sonnet-4-20250514",
      max_tokens: 1000,
      messages: [
        {
          role: "user",
          content: [
            {
              type: "image",
              source: {
                type: "base64",
                media_type: "image/jpeg",
                data: base64Image
              }
            },
            {
              type: "text",
              text: `Analyze this item for upcycling potential. Return ONLY a JSON object with:
              {
                "itemName": "string",
                "materials": ["material1", "material2"],
                "conditionScore": number (1-10),
                "recyclabilityRating": "Low/Medium/High"
              }`
            }
          ]
        }
      ]
    })
  });

  const data = await response.json();
  const rawText = data.content.find(c => c.type === "text")?.text || "{}";

  // Strip markdown fences if present
  const cleanJson = rawText.replace(/```
{% endraw %}
json|
{% raw %}
```/g, "").trim();
  return JSON.parse(cleanJson);
}

import { useState } from 'react';
import { analyzeMaterial } from '../api/materialAnalysis';

export default function AnalysisResults({ imageBase64 }) {
  const [analysis, setAnalysis] = useState(null);
  const [loading, setLoading] = useState(false);

  const runAnalysis = async () => {
    setLoading(true);
    try {
      const result = await analyzeMaterial(imageBase64);
      setAnalysis(result);
    } catch (error) {
      console.error("Analysis failed:", error);
    }
    setLoading(false);
  };

  return (
    <div>
      <button onClick={runAnalysis} disabled={loading}>
        {loading ? "Analyzing..." : "Analyze Material"}
      </button>

      {analysis && (
        <div className="results">
          <h3>{analysis.itemName}</h3>
          <p>Materials: {analysis.materials.join(", ")}</p>
          <p>Condition: {analysis.conditionScore}/10</p>
          <p>Recyclability: {analysis.recyclabilityRating}</p>
        </div>
      )}
    </div>
  );
}

// Generate 5-8 unique DIY upcycling projects for the analyzed item
async function generateUpcyclingProjects(itemAnalysis) {

async function generateUpcyclingProjects(itemAnalysis) {
  const response = await fetch("https://api.anthropic.com/v1/messages", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      model: "claude-sonnet-4-20250514",
      max_tokens: 2000,
      messages: [
        {
          role: "user",
          content: `Given this item analysis:
          ${JSON.stringify(itemAnalysis)}

          Generate 5-8 creative DIY upcycling projects. For each project, provide:
          - Project name
          - Difficulty (Easy/Medium/Hard)
          - Materials needed (array)
          - Estimated time (string)
          - Step-by-step instructions (array)
          - Waste diverted (kg)

          Return as JSON array.`
        }
      ]
    })
  });

  const data = await response.json();
  const rawText = data.content.find(c => c.type === "text")?.text || "[]";
  const cleanJson = rawText.replace(/```
{% endraw %}
json|
{% raw %}
```/g, "").trim();
  return JSON.parse(cleanJson);
}

You're mutating state directly in your useEffect. React won't detect the change.

Change this:
  userData.projectsCompleted += 1;

To this:
  setUserData(prev => ({
    ...prev,
    projectsCompleted: prev.projectsCompleted + 1
  }));

Frontend:  React + Tailwind CSS
Backend:   Firebase
Auth:      Google Sign-In
Storage:   LocalStorage (expandable to Firebase)
Hosting:   Vercel
AI Tools:  GitHub Copilot (Chat + Agent + Inline)