Introduction

const handleDrop = (e: React.DragEvent) => {
  e.preventDefault();
  setIsDragOver(false);
  if (e.dataTransfer.files) {
    onFilesSelected(e.dataTransfer.files);
  }
};

const progressInterval = setInterval(() => {
  setProgress(prev => {
    const newProgress = prev + Math.random() * 15;
    return newProgress >= 90 ? 90 : newProgress;
  });
}, 200);

const fileName = files.length === 1 ? 
  `${files[0].name.split('.')[0]}.md` : 
  'converted_files.zip';

src/
├── components/          # Modularized React components
│   ├── UploadArea/     # Drag & drop upload interface
│   ├── FileList/       # Selected files display
│   ├── Header/         # App header and branding
│   ├── SupportedFormats/ # Format information
│   ├── Container/      # Layout container (internal)
│   └── Switch/         # Toggle switch UI (internal)
├── hooks/              # Custom React hooks
│   ├── useFileUpload.ts # File handling logic
│   └── useConversionMode.ts # Conversion mode toggle (unused)
├── services/           # API communication
│   └── api.ts         # Backend integration
├── App.tsx            # Main converter (any format → Markdown)
├── PandocConverter.tsx # Markdown → Word converter
└── main.tsx           # Entry point with routing

const response = await fetch(`${API_BASE_URL}/upload`, {
  method: 'POST',
  body: formData, // 'files' key with multiple files
});

const response = await fetch(`${API_BASE_URL}/md-to-word`, {
  method: 'POST',
  body: formData, // 'file' key with single .md file
});