Building a Mac Menu Bar Application with React, TypeScript and Electron
Altrim Beqiri /
A few years ago I built this Android application called Routines Plus. The idea was to build something really simple over the weekend that I can publish in the PlayStore. The application is pretty simple -- you create a set of routines and for each routine you define the tasks you want to complete. When you are done with the tasks you can reset the list so you start from scratch.
I remember I started on Friday and by Sunday evening the app was ready to be published. You might have noticed the PlayStore is filled with hundreds of todo/task based applications, so I was pretty sure no one was going to notice it. I just wanted to have the application published in the PlayStore. Fast forward to today and Routines Plus has over 12000 downloads, a total of 165 ratings with an average rating of 4.2 stars, and a lot of comments from people that are actually using the app. Although it's a pretty simple app and hasn't been updated since it was initially released, a lot of people still use it and find it useful which is really awesome.
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.
I had a lot of fun building this application and usually when I build these toy projects I like to try out a bunch of libraries, although it can be excessive for an application of this size.
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, although nice features we could add in the future include
- Updating and Deleting
- Reminders - set a reminder to get a system notification
- Statistics - how often you finish a routine? how long it takes to finish a routine?
- Nested Routines - you could have a routine that is composed of other routines (e.g group by day Monday)
If you want to have a go at implementing some of these features or just take a look how the application is build under the hood you can find the full source code on GitHub