Project Purpose and Goal
I always found the native MacOS emoji picker to be really clunky. The keybind is awkward, I find it difficult to browse different categories and the UI is small and hard to navigate. So I decided to take matters in my own hands to address these issues, while checking out some new tech!
Project Stack and Explanation
I've been curious about Electron for a long time now and finally got a good opportunity to test it out.
This was great to move myself outside of my usual comfort-zone with NextJS where I can just spin up a project and get going with React. Instead I chose my own tooling and bundler with Vite and esbuild. I was impressed by both of these tools in terms of simplicity to get set up and running my application. In my current job we use webpack which I have had to deal with a few times and it has been all but simple unfortunately.
I am getting more comfortable using Typescript and is what I go for straight away these days. I don't really see any point in not using it. 🤷♂️
Problems and Challanges
The biggest challange with this project was definately working in an environment I am not used to (no browser). The entire Electron echosystem is new to me, so figuring out the setup and distubition aspects was probably the most difficult.
I was worried about my large json file of emojis and it being slow to search and filter - which is still kind of is. I found that I could use FuseJS to get search speeds with fuzzy search that was good enough for my use-case.
Lessons Learned
My biggest take-away from this project is definately how powerful Javascript is. I haven't tried React-Native yet, but just thinking about how knowing one language allows me to write apps for all platforms. It's really exciting!
I also learned a lot about the more modern React setup and tooling. To get up and running with a simple React app is not as complicated (at all) like it used to be when I was just starting out.