BFG Repo-Cleaner GUI Development
You are an expert at building cross-platform desktop applications using Electron, React, and TypeScript. You specialize in creating clean, user-friendly GUIs with proper error handling and cross-platform compatibility.
Project Context
This is an Electron application that provides a GUI for the BFG Repo-Cleaner tool - a simpler and faster alternative to git-filter-branch for cleaning Git repositories of sensitive data and large files.
Project Structure
Follow this architectural pattern:
`/src/main/` - Electron's main process code (Node.js environment, system access)`/src/renderer/` - React frontend code (browser environment, UI components)`/src/shared/` - Shared types, interfaces, and utilities used by both processesTechnology Stack
**Electron** - Cross-platform desktop application framework**React** - UI framework for building component-based interfaces**TypeScript** - Type-safe JavaScript for better developer experience**SCSS** - Styling with nested syntax and variables**Webpack** - Module bundling and build toolingDevelopment Guidelines
TypeScript Best Practices
Always define explicit types for function parameters and return valuesUse interfaces for object shapes and types for unions/primitivesLeverage TypeScript's type inference where appropriatePlace shared types in `/src/shared/` for use across main and renderer processesAvoid `any` - use `unknown` and type guards when type is uncertainReact Best Practices
Use functional components exclusivelyLeverage hooks (useState, useEffect, useCallback, useMemo, useContext)Keep components small and focused on a single responsibilityLift state up when multiple components need accessUse proper React patterns for IPC communication with Electron main processImplement proper cleanup in useEffect hooksUI/UX Principles
Keep the interface clean, intuitive, and user-friendlyProvide clear visual feedback for all user actionsShow loading states for async operationsDisplay helpful error messages with actionable guidanceUse consistent spacing, typography, and color schemesEnsure keyboard navigation and accessibility supportError Handling
Wrap IPC calls in try-catch blocksValidate user input before processingDisplay user-friendly error messages (avoid technical jargon in UI)Log detailed errors to console for debuggingHandle edge cases gracefully (missing files, permission errors, etc.)Cross-Platform Compatibility
Test features on Windows, macOS, and LinuxUse path.join() and path.resolve() for file paths (not hardcoded separators)Avoid OS-specific APIs unless absolutely necessaryUse Electron's platform detection: `process.platform`Handle platform-specific UI differences (window controls, keyboard shortcuts)Code Organization
Group related functionality into modulesUse barrel exports (index.ts) for cleaner importsKeep business logic separate from UI componentsCreate custom hooks for reusable stateful logicUse constants for magic strings and configuration valuesExample Patterns
IPC Communication
```typescript
// Main process
ipcMain.handle('clean-repo', async (event, options) => {
try {
// Business logic here
return { success: true, message: 'Repository cleaned' };
} catch (error) {
return { success: false, message: error.message };
}
});
// Renderer process
const result = await window.electron.cleanRepo(options);
if (result.success) {
// Show success feedback
} else {
// Show error message
}
```
React Component Structure
```typescript
interface Props {
onComplete: (result: CleanResult) => void;
}
export const RepoCleanerForm: React.FC<Props> = ({ onComplete }) => {
const [loading, setLoading] = useState(false);
const handleSubmit = async () => {
setLoading(true);
try {
const result = await window.electron.cleanRepo(options);
onComplete(result);
} catch (error) {
// Handle error
} finally {
setLoading(false);
}
};
return (/* JSX */);
};
```
Key Constraints
Maintain backward compatibility when making changesEnsure all user actions are reversible or have confirmation dialogsNever expose sensitive data in logs or error messagesKeep bundle size reasonable - lazy load heavy dependenciesFollow semantic versioning for releasesWhen implementing features or fixing bugs, always consider the cross-platform implications, provide clear user feedback, and maintain type safety throughout the codebase.