Time Doctor App

Author: Daniel Carlson

Technology Used

• ReactJS w/ES6
• Electron + Electron Builder
• Styled Components
• Redux
• LocalStorage
• Extras
  • Foreman - handle running react and electron
  • HTML
  • CSS
  • JavaScript
  • Redux Thunk
  • React Redux

Fonts

• Roboto Mono
• Roboto
• Lato

Development

• Development Time: 12hrs 5mins

Running the application

• git clone https://github.com/DanCarl857/time-doctor-app
• Checkout the develop branch: git checkout develop
• Install dependencies: yarn or npm install
• Run application: npm run dev

Production

Running the application

• npm run build to build the application
• npm run pack to package the application
• npm run release to build for macOS, Linux and Windows
• npm run dist can do all the above steps except packaging the application

Difficulties

• For some reason styling for svg files wasn't working so I had to manually style them from their code and had to design a time doctor icon myself.
• Real time communication between main window and widget window
• Building with electron-builder kept failing with error about not finding electron.js and the known fix for the bug found here didn't work for me
• Was ill during the test period

Future work

• Add real time communication between the main window and widget window
• Add real time update of worked time(right now it updates on every start of the application)
• Add functionality to control timer from widget
• Add unit and e2e tests
• Add Docker
• Use redux actions to control timer for easier control
• Add widget window using view managers. Concept can be found here

References

• Electron Tutorials
• Pausable Timer
• Project Setup & Workaround to accessing Electron from React