Mac Menu Bar Application with React, TypeScript and Electron
Altrim Beqiri /
Several years ago, I developed an Android app named Routines Plus. I aimed to complete and publish on the PlayStore over a weekend. The app's functionality is simple: users can create various routines, and for each routine, specify tasks to accomplish. Once the tasks are completed, users have the option to reset the list, allowing them to start afresh.
This weekend I wanted to do something similar. I wanted to start and finish building the application over the weekend. I knew I wanted to build a Menu Bar application but I couldn't think of an idea that I can build over the weekend. So to not waste any time I thought why not build something similar to Routines Plus?
And that's what I did, I built a clone of Routines Plus called Routines Mini as a Mac Menu Bar application. You can watch the video below to see the app in action.
Creating this application was a highly enjoyable experience for me. In these kinds of personal projects, I often take the opportunity to experiment with various libraries, even though it may be somewhat overkill for an application of this scale.
The following libraries were used to build the application:
- React with TypeScript
- Electron - used to package it as Menu Bar application
- Dexie - used to store the data in IndexedDB
- Chakra - used to build the UI
- React Hook Form - for the forms
- Framer Motion - for the animations
- React Color - for the color picker
- emoji-picker-react - for the emoji picker
As the end of the weekend was approaching I had to wrap it up. However, there are several appealing features that could be considered for future additions, including:
- Updating and Deleting
- Reminders: Implement a feature to set reminders that trigger system notifications
- Statistics: how often you finish a routine? how long it takes to finish a routine?
- Nested Routines: Introduce the concept of sub-routines, where a primary routine can encompass multiple smaller routines, such as grouping tasks by days (e.g., Monday routine).
- ...
For those interested in exploring the implementation of these features, or simply curious about the application's inner workings, the complete source code is available on GitHub. Feel free to delve in, whether to contribute to its development or to gain insights into its construction.
Happy Coding!