Expense tracker built for an offline desktop user. In the first four-day sprint of this project, I tried to incorporate an all new technology stack (except for React) that I had not used before. So, I built an expense tracker modeled after an app I use, Monefy. The big takeaways:
- Desktop App powered by Electron JS - interprocess communication between main program and renderer (window)
- All functional components and managed state using React Hooks
- Views: itemized table (React-Bootstrap) or pie chart (Victory JS)
- Date Selection (Material-UI Calendar Component)
- Local Database provided by Electron-JSON-Storage library
I used all of these technologies or methods for the first time in this project, and was able to successfully implement them in the first four day sprint. For those curious about building a similar project, I created this video tutorial and this boilerplate repo for a React Electron project with a basic, local JSON database.
- Run
npm install
- Run
npm run devto start webpack-dev-server. Electron will launch automatically after compilation.
You have two options, an automatic build or two manual steps
- Run
npm run packageto have webpack compile your application intodist/bundle.jsanddist/index.html, and then an electron-packager run will be triggered for the current platform/arch, outputting tobuilds/
Recommendation: Update the "postpackage" script call in package.json to specify parameters as you choose and use the npm run package command instead of running these steps manually
- Run
npm run buildto have webpack compile and output your bundle todist/bundle.js - Then you can call electron-packager directly with any commands you choose
If you want to test the production build (In case you think Babili might be breaking something) after running npm run build you can then call npm run prod. This will cause electron to load off of the dist/ build instead of looking for the webpack-dev-server instance. Electron will launch automatically after compilation.