{"id":29141594,"url":"https://github.com/bforbilly24/folderingbyimagecaptioning-electron-frontend-desktop","last_synced_at":"2026-05-05T09:31:39.029Z","repository":{"id":301361494,"uuid":"1008962288","full_name":"bforbilly24/folderingbyimagecaptioning-electron-frontend-desktop","owner":"bforbilly24","description":"AI-powered image organizer built with React,TypeScript, Tailwind CSS, TanStack Router, and shadcn/ui for a modern desktop UI.","archived":false,"fork":false,"pushed_at":"2025-06-26T12:43:13.000Z","size":294,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-26T13:41:35.436Z","etag":null,"topics":["electron","react","shadcn-ui","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bforbilly24.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-26T11:08:23.000Z","updated_at":"2025-06-26T12:43:17.000Z","dependencies_parsed_at":"2025-06-26T13:41:37.315Z","dependency_job_id":"cc867981-7a39-41bc-b94d-519ecc4c9f39","html_url":"https://github.com/bforbilly24/folderingbyimagecaptioning-electron-frontend-desktop","commit_stats":null,"previous_names":["bforbilly24/folderingbyimagecaptioning-electron-frontend-desktop"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bforbilly24/folderingbyimagecaptioning-electron-frontend-desktop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bforbilly24%2Ffolderingbyimagecaptioning-electron-frontend-desktop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bforbilly24%2Ffolderingbyimagecaptioning-electron-frontend-desktop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bforbilly24%2Ffolderingbyimagecaptioning-electron-frontend-desktop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bforbilly24%2Ffolderingbyimagecaptioning-electron-frontend-desktop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bforbilly24","download_url":"https://codeload.github.com/bforbilly24/folderingbyimagecaptioning-electron-frontend-desktop/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bforbilly24%2Ffolderingbyimagecaptioning-electron-frontend-desktop/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32643524,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-04T10:08:07.713Z","status":"online","status_checked_at":"2026-05-05T02:00:06.033Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["electron","react","shadcn-ui","tailwindcss"],"created_at":"2025-06-30T19:00:52.467Z","updated_at":"2026-05-05T09:31:39.012Z","avatar_url":"https://github.com/bforbilly24.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AI Image Foldering Desktop App\n\nA modern Electron desktop application that uses AI to automatically organize images into folders based on their content. Built with React 19, TypeScript, Tailwind CSS v4, and TanStack Router for optimal performance and user experience.\n\n## 🚀 Features\n\n- **AI-Powered Image Organization**: Upload images and let AI analyze and organize them into logical folders\n- **Batch Folder Processing**: Upload entire folders and process multiple images at once\n- **Modern UI**: Beautiful, responsive interface with dock-style navigation\n- **Fast Performance**: Optimized for quick startup and smooth interactions\n- **Cross-Platform**: Works on Windows, macOS, and Linux\n- **Type Safety**: Full TypeScript support throughout the application\n\n## 🛠️ Prerequisites\n\nBefore you begin, ensure you have the following installed:\n\n- **Node.js** 18+ or **Bun** (recommended for better performance)\n- **Git** for cloning the repository\n\n## 📥 Installation \u0026 Setup\n\n### 1. Clone the Repository\n\n```bash\ngit clone https://github.com/bforbilly24/folderingbyimagecaptioning-electron-frontend-desktop.git\ncd folderingbyimagecaptioning-electron-frontend-desktop\n```\n\n### 2. Install Main Dependencies\n\n```bash\n# Install Electron and main process dependencies\nbun install\n\n# Or if using npm\nnpm install\n```\n\n### 3. Install Renderer Dependencies\n\n```bash\n# Navigate to the renderer directory\ncd renderer\n\n# Install React app dependencies\nbun install\n\n# Or if using npm\nnpm install\n```\n\n### 4. Return to Root Directory\n\n```bash\ncd ..\n```\n\n## 🚀 Running the Application\n\n### Development Mode\n\nStart the application in development mode with hot reloading:\n\n```bash\n# This will start both the Vite dev server and Electron\nbun run dev\n\n# Or if using npm\nnpm run dev\n```\n\nThis command will:\n- Start the Vite development server on `http://localhost:5173`\n- Launch the Electron app automatically\n- Enable hot reloading for both React and Electron\n\n### Production Build\n\nTo build and run the production version:\n\n```bash\n# Build the React app\nbun run build\n\n# Start the production Electron app\nbun run start\n\n# Or combine both\nnpm run build:prod\n```\n\n## 📁 Project Structure\n\n```\nfolderingbyimagecaptioning-electron-frontend-desktop/\n├── main.js                 # Electron main process\n├── preload.js             # Electron preload script\n├── renderer.js            # Electron renderer utilities\n├── package.json           # Main package configuration\n├── favicon.ico            # App icon (Windows)\n├── favicon.icns           # App icon (macOS)\n├── renderer/              # React frontend application\n│   ├── src/              # Source code\n│   ├── public/           # Static assets\n│   ├── build/            # Production build output\n│   └── package.json      # Renderer dependencies\n└── README.md             # This file\n```\n\n## 🖥️ Using the Application\n\n### 1. Home Page\n- Launch the app to see the main interface\n- Navigate between features using the top navigation (desktop) or bottom dock (mobile)\n\n### 2. Single Image Upload\n- Click \"Image Upload\" in the navigation\n- Drag and drop images or click to select files\n- Confirm the upload in the dialog that appears\n- Wait for AI processing and download the organized results\n\n### 3. Folder Upload\n- Click \"Folder Upload\" in the navigation\n- Select an entire folder containing images\n- Review the file list and confirm the upload\n- Monitor progress and download the ZIP file when complete\n\n## ⚙️ Configuration\n\n### Backend API Configuration\n\nThe app connects to a backend API for AI processing. Update the API URL in:\n\n```typescript\n// renderer/src/api/api-url.ts\nexport const API_BASE_URL = \"http://127.0.0.1:8000\"; // Change this to your API server\n```\n\n### Electron Settings\n\nMain Electron configuration is in `main.js`. Key settings:\n\n- **Window Size**: Default 1200x800, minimum 800x600\n- **Development**: Auto-opens DevTools in development mode\n- **Performance**: Optimized startup flags for better performance\n\n## 🔧 Development\n\n### Scripts Available\n\nFrom the root directory:\n\n```bash\n# Development\nbun run dev              # Start dev server + Electron\nbun run dev:renderer     # Start only Vite dev server\nbun run dev:electron     # Start only Electron (requires running renderer)\n\n# Production\nbun run build           # Build React app\nbun run start           # Start production Electron app\nbun run build:prod      # Build + start production\n\n# Distribution\nbun run dist            # Package for distribution\n```\n\nFrom the renderer directory:\n\n```bash\n# Development\nbun run dev             # Start Vite dev server\nbun run route-gen       # Generate TanStack Router routes\nbun run route-watch     # Watch and auto-generate routes\n\n# Production\nbun run build           # Build for production\nbun run preview         # Preview production build\nbun run lint            # Run ESLint\n```\n\n### Performance Optimizations\n\nThe app includes several performance optimizations:\n\n- **Fast Startup**: Optimized Electron launch with performance flags\n- **Lazy Loading**: Route-based code splitting for faster initial load\n- **Bundle Optimization**: Vendor chunk separation and tree shaking\n- **Memory Management**: Proper cleanup and error handling\n\n## 📦 Building for Distribution\n\n### Create Distributable Packages\n\n```bash\n# Package for current platform\nbun run dist\n\n# This creates platform-specific packages in the dist/ folder\n# - Windows: .exe installer\n# - macOS: .dmg file\n# - Linux: .AppImage file\n```\n\n### Manual Packaging\n\nFor more control over the packaging process:\n\n```bash\n# Install electron-builder globally if needed\nnpm install -g electron-builder\n\n# Build the React app first\nbun run build\n\n# Package for specific platforms\nelectron-builder --mac dmg          # macOS\nelectron-builder --win nsis         # Windows\nelectron-builder --linux AppImage   # Linux\n```\n\n## 🚨 Troubleshooting\n\n### Common Issues\n\n1. **Port 5173 already in use**\n   ```bash\n   # Kill the process using the port\n   lsof -ti:5173 | xargs kill -9\n   ```\n\n2. **Electron fails to start**\n   ```bash\n   # Clear node_modules and reinstall\n   rm -rf node_modules renderer/node_modules\n   bun install \u0026\u0026 cd renderer \u0026\u0026 bun install\n   ```\n\n3. **API connection errors**\n   - Ensure your backend API is running\n   - Check the API URL in `renderer/src/api/api-url.ts`\n   - Verify CORS settings on your backend\n\n4. **Build fails**\n   ```bash\n   # Clean build cache\n   cd renderer\n   rm -rf build/ node_modules/.vite/\n   bun run build\n   ```\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch: `git checkout -b feature-name`\n3. Make your changes and test thoroughly\n4. Commit with clear messages: `git commit -m \"Add feature description\"`\n5. Push to your fork: `git push origin feature-name`\n6. Create a Pull Request\n\n## 📄 License\n\nThis project is licensed under the MIT License. See the LICENSE file for details.\n\n## 🆘 Support\n\nIf you encounter any issues or need help:\n\n1. Check the troubleshooting section above\n2. Look for existing issues in the GitHub repository\n3. Create a new issue with detailed information about your problem\n4. Include your OS, Node.js/Bun version, and error messages\n\n---\n\n**Happy coding! 🎉**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbforbilly24%2Ffolderingbyimagecaptioning-electron-frontend-desktop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbforbilly24%2Ffolderingbyimagecaptioning-electron-frontend-desktop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbforbilly24%2Ffolderingbyimagecaptioning-electron-frontend-desktop/lists"}