What I Wanted to Achieve
The client needed a simple desktop app that could
- toggle an embedded browser view on and off
- run a background process to go to a specific website
- perform a routine task for them without their intervention
They wanted to hand off the details and let the machine do the work while they got on with other things.
Design and Tech Stack
-
Framework
- Electron to make a cross-platform desktop executable
- React for the UI layer
- React Bootstrap for consistent styling and components
-
Core Features
- Toggle switch to show or hide the browser window
- Embedded browser using Electron’s
<webview>tag - IPC channels between renderer and main process to start/stop automation
Development Process
-
Project Setup
- Initialised an Electron-React template
- Added React Bootstrap and set up basic layout components
-
Browser Embedding
- Used Electron WebView to host the browser instance
- Sent commands from the React UI to the main process via IPC
-
Automation Logic
- Wrote scripts in the main process to navigate to the target URL
- Automated form entry or data retrieval as required
- Added error handling and status updates back to the UI
-
Styling and UX
- Kept the interface minimal: a sidebar with a toggle and status light
- Used Bootstrap cards and buttons for a clean look
The Outcome
- A desktop app that runs on Windows and macOS
- Client can flip the browser on or off with one click
- Automated web tasks run smoothly in the background
- Code is modular so new tasks can be added easily