Let's try to hide the main application window on startup and show it only when it's invoked from the system tray menu:

1. The BrowserWindow class provides the show and hide methods, which we can use to control the visibility of the window instance. This means that we can call the hide method when building the window object at startup:

      function createWindow() {
        win = new BrowserWindow({
          transparent: true,
          frame: false,
          webPreferences: {
            nodeIntegration: true
          }
        });

        win.hide();
        win.loadURL(`http://localhost:3000`);
      
        win.on('closed', () => {
          win = null;
        });
      }

2. Finally, you can create an additional Show menu entry to invoke win.show and display the main application window to the user:

      function createTray() {
        const iconPath = path.join(__dirname, 'assets/icon.png');
        tray = new Tray(iconPath);
      
        const contextMenu = Menu.buildFromTemplate([
          {
            label: 'Show',
            type: 'normal',
            click() {
              win.show();
            }
          },
          {
            label: 'Quit',
            type: 'normal',
            click() {
              app.quit();
            }
          }
        ]);

        tray.setToolTip('Screenshot Snipping Tool');
        tray.setContextMenu(contextMenu);
      }

Don't start the application just yet. Let's register some global keyboard shortcuts while we're here.