💡 Idea
An desktop app that take screenshot every specified minutes and upload to the server so your manager can track your work progress (read micro management).
📝 Requirements
- Not electron
- Cross platform
- Fun to develop
🛠️ Tech Stack
Wails with Golang for OS level’s tasks
Vue for frontend (UI will be simple, so Vue, React, Angular, whatsoever is fine)
💅 Design
I found the Linear design system is very cool and it has a community version in Figma https://www.figma.com/community/file/1222872653732371433/linear-design-system, so let’s use it.
🚀 Development
Wails doc is good enough, so I will just write down some notes here.
wails init -n myproject -t vue-ts
Ok we got this, basically a Go application with Vue inside the frontend directory
.
├── README.md
├── app.go
├── build
│ ├── README.md
│ ├── appicon.png
│ ├── bin
│ │ └── myproject.app
│ │ └── Contents
│ │ ├── Info.plist
│ │ ├── MacOS
│ │ │ └── myproject
│ │ └── Resources
│ │ └── iconfile.icns
│ ├── darwin
│ │ ├── Info.dev.plist
│ │ └── Info.plist
│ └── windows
│ ├── icon.ico
│ ├── info.json
│ ├── installer
│ │ ├── project.nsi
│ │ └── wails_tools.nsh
│ └── wails.exe.manifest
├── frontend
│ ├── READ-THIS.md
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src
│ │ ├── App.vue
│ │ ├── assets
│ │ │ ├── fonts
│ │ │ │ ├── OFL.txt
│ │ │ │ └── nunito-v16-latin-regular.woff2
│ │ │ └── images
│ │ │ └── logo-universal.png
│ │ ├── components
│ │ │ └── HelloWorld.vue
│ │ ├── main.ts
│ │ ├── style.css
│ │ └── vite-env.d.ts
│ ├── tsconfig.json
│ ├── tsconfig.node.json
│ ├── vite.config.ts
│ └── wailsjs
│ ├── go
│ │ └── main
│ │ ├── App.d.ts
│ │ └── App.js
│ └── runtime
│ ├── package.json
│ ├── runtime.d.ts
│ └── runtime.js
├── go.mod
├── go.sum
├── main.go
└── wails.json
Install Tailwinds
cd myproject/frontend
# More here 👉 https://v2.tailwindcss.com/docs/guides/vue-3-vite
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p
Wails will bind Go code to Window and generate corresponding Typescript for us, so we can use it in frontend.
Ok let’s implement the UI first. It’s all about me, Tailwind classes and Vue components, nothing fancy here. It took me about 1 hours Sunday afternoon to get this screen.
(To be continue…)