I’ve been working on my side project called Quaffle, an app that helps people be more productive by utilizing ChatGPT. If you’re interested, you can take a look at it at https://www.quaffle.app/. Throughout the process of building this app, I’ve found great joy in both the building and learning aspects. Therefore, I’ve decided to start documenting my journey, so others can join me on this exciting journey of app building.

By the way, I’m a designer and I learned all the necessary tech skills to build this app by myself. I’m always open to learning and iterating, so feel free to point out anything that doesn’t make sense. However, please keep in mind that some of the methods I used may not be best practices, so use caution if you choose to follow them.

How I got started

I’ve always been passionate about AI and believe it can greatly enhance people’s productivity and creativity. Whenever I work on my design projects, I ask myself if the UI is a wizard what it could provide users. To me, AI can be that wizard. When ChatGPT was released, I was amazed at how powerful it was, and thought ChatGPT was the wizard! I started using ChatGPT for almost all my tasks, such as creating design docs, user stories, user journeys, emails, translation, and research (sorry Grammarly and Google). In fact, I would say that ChatGPT is the best software I have ever used!

While I find ChatGPT impressive, as a designer, I’ve noticed some small issues that could be improved upon. For example, the content generated is based on the prompt, and it’s best practice to include roles and examples in the prompt before asking the real question (some awesome prompt). Although I love using ChatGPT, I find it cumbersome to have to type a bunch of prompt text before asking my actual question.

Another issue is capacity problems. While it’s much better now, as ChatGPT has become very popular, there are times when it’s down, which can be frustrating. However, I’ve found that the playground is much more stable, and when I use the API in my code, it’s slow but stable.

Finally, I’ve had to sign in and refresh the page frequently, which slows me down. These are small issues, but as a designer, I believe they could be improved to make the user experience even better.

To address these issues, I’ve decided to create an app that allows users to quickly insert their prompt and is always online. Here’s what I’ve planned for the MVP:

• The app will stay in the system tray so that users don’t need to open a browser, type a URL, and sign in every time they want to use ChatGPT.
• It will store the API key on users’ local machines, so they feel safe entering the key.
• The app will help users find their API key easily and get the $5 credit from OpenAI. (To be honest, I feel that the OpenAI website is not well organized, although it looks good and is artsy.)
• I will start with a Mac app because I don’t have a PC.
• The app will not track any usage or telemetry data, as I want to ship it quickly.

Technology I used

After considering my previous projects and skills in React , I initially decided to use Electron to build the app. However, after doing some research, I came across another technology called Tauri. Tauri offers similar functionalities to Electron but is smaller and quicker. Additionally, Tauri also has a Tauri Mobile package in beta, which I could potentially use in the future.

I also came across another popular front-end framework called Svelte during my research, and I found that Tauri has a pre-built template for Svelte. After trying it out, I fell in love with Svelte’s ease of use, and I found it much easier to code than React.

Learn the tech

When it comes to learning a new technology, I usually search for tutorials on YouTube, follow along to build something, and then apply my newfound knowledge to my actual project. For Svelte, I found two playlists on YouTube that were extremely useful. One is from lihautan and the other is from The Net Ninja.

For Tauri, I followed this playlist from elibro, which although is about React, was enough for me to understand how Tauri works.

Retro and learning

I believe that when building an app, it is beneficial to use a technology that is well-established and widely adopted. This is because such technology tends to be more mature and feature-rich, and it benefits from a larger community that offers access to existing solutions and support. Additionally, there are often more tutorials available, making it easier to learn and troubleshoot. By using a popular technology, there is also a higher likelihood that others will appreciate and enjoy your app due to its familiar technology stack.

What’s next

Next, I will delve into the design, engineering, and launching challenges I encountered while building the app, and share the solutions I came up with. Stay tuned for more updates, and feel free to let me know if there’s anything else you’d like to learn about. Best regards!