ApplyAI - CV Parser & Profile Manager

A modern desktop application built with Electron + React for AI-powered CV parsing and profile management.

Features

• 🖥️ Desktop App: Native desktop experience with Electron
• 📁 Drag & Drop: Easy CV file upload with drag-and-drop support
• 🤖 AI Integration: Ready for integration with your existing AI parser API
• 🎨 Modern UI: Beautiful, responsive React-based interface
• 📱 Cross-Platform: Works on Windows, macOS, and Linux
• 🔒 Secure: Context isolation and secure IPC communication

Tech Stack

• Frontend: React 18 + TypeScript + Vite
• Desktop: Electron 28
• Styling: Modern CSS with responsive design
• Build: Electron Builder for distribution

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository

   git clone <your-repo-url>
   cd ApplyAI

2. Install dependencies

   npm install

Development

Start Development Server

npm run electron-dev

This will:

• Start the Vite dev server on port 5173
• Launch the Electron app in development mode
• Enable hot reload for both React and Electron

Build for Production

npm run dist

This creates distributable packages in the release/ folder.

Project Structure

ApplyAI/
├── electron/                 # Electron main process
│   ├── main.ts              # Main process entry point
│   └── preload.ts           # Preload script for secure IPC
├── src/                     # React application
│   ├── components/          # React components
│   │   ├── CVUploader.tsx  # CV upload component
│   │   └── ProfileDisplay.tsx # Profile display component
│   ├── types.ts             # TypeScript type definitions
│   ├── App.tsx              # Main app component
│   ├── main.tsx             # React entry point
│   └── index.css            # Global styles
├── dist/                    # Built React app (generated)
├── dist-electron/           # Built Electron files (generated)
├── release/                 # Distribution packages (generated)
├── package.json             # Project configuration
├── vite.config.ts           # Vite configuration
├── tsconfig.json            # TypeScript configuration
├── electron-builder.config.js # Electron Builder configuration
└── build-electron.js        # Electron build script

Integration with Your AI Parser

The app is designed to integrate with your existing AI parser API. To connect it:

1. Update the upload handler in src/App.tsx:

   const handleCVUpload = useCallback(async (files: File[]) => {
     setIsProcessing(true)
     
     try {
       for (const file of files) {
         // Send file to your AI parser API
         const formData = new FormData()
         formData.append('cv', file)
         
         const response = await fetch('YOUR_API_ENDPOINT', {
           method: 'POST',
           body: formData
         })
         
         const parsedData = await response.json()
         
         // Create profile from parsed data
         const profile: CVProfile = {
           // Map your API response to CVProfile structure
         }
         
         setProfiles(prev => [...prev, profile])
       }
     } catch (error) {
       console.error('Error processing CV:', error)
     } finally {
       setIsProcessing(false)
     }
   }, [])

2. Update types in src/types.ts to match your API response structure

Available Scripts

• npm run dev - Start Vite dev server only
• npm run build - Build React app for production
• npm run electron-dev - Start Electron app in development mode
• npm run build:electron - Build Electron TypeScript files
• npm run electron-build - Build complete Electron app
• npm run dist - Create distributable packages

Building for Distribution

macOS

npm run dist
# Creates .dmg file in release/ folder

Windows

npm run dist
# Creates .exe installer in release/ folder

Linux

npm run dist
# Creates AppImage in release/ folder

Security Features

• Context Isolation: Renderer process cannot access Node.js APIs directly
• Secure IPC: Communication between processes through preload script
• File Dialog Security: File operations handled securely through main process

Customization

Styling

• Modify CSS files in src/components/ for component-specific styles
• Update src/App.css for global app styling
• The app uses a modern gradient design that can be easily customized

Features

• Add new profile fields in src/types.ts
• Extend the UI components in src/components/
• Add new Electron features in electron/main.ts

Troubleshooting

Common Issues

1. Port 5173 already in use

   • Kill the process using the port or change it in vite.config.ts

2. Electron build fails

   • Ensure all dependencies are installed: npm install
   • Check TypeScript compilation: npm run build:electron

3. App doesn't start

   • Check console for errors
   • Ensure both Vite dev server and Electron are running

Development Tips

• Use npm run electron-dev for development with hot reload
• Check Electron DevTools for debugging
• Monitor the terminal for build and runtime errors

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is licensed under the ISC License.

Support

For issues and questions:

• Check the troubleshooting section
• Review the console logs
• Open an issue on GitHub

---

Built with ❤️ using Electron + React