Building a Complete PWA Application: An Experience Report
Developing a PWA (Progressive Web App) remains an interesting challenge, especially when I consider that it offers a more practical and accessible solution compared to the traditional model of app stores like Google Play and Apple Store. I don’t really understand why this technology doesn’t get more attention, as PWAs can be easily accessed from any mobile device, without the complexity of going through platforms—unless there are cases requiring more security or payment for downloading the app =).
Recently, I finished the alpha version of my project Accounting Overview, a tool focused on financial management. Although I initially started with Svelte, I decided to rewrite the app in Vue 3. Here’s a bit about my experience during this process, working with these technologies. If you like it or find it interesting, leave a like =)
Moleculer: An Amazing Framework
If you work with microservices in NodeJS, you’ve probably heard of Moleculer. This framework is, without exaggeration, amazing. It makes development easier, from security to full application control. While there’s a learning curve, once you overcome it, what it delivers is so impressive that it’s hard to describe everything here.
In addition to being extremely robust, Moleculer provides incredible tools that streamline the work and make the process more organized and efficient. I want to give a big shoutout to the creator of the project for their phenomenal contribution to the development community.
Svelte vs Vue 3: Why I Changed?
My first version used Svelte, as I mentioned in my previous article. The earlier versions—wow, what a framework! However, with the recent release of Svelte 5, I found that the reactivity lost its simplicity—and, in my opinion, became much worse!
It’s actually a shame, because what made it stand out was its simplicity, and now it’s become too similar to React.
When I switched to Vue 3, which I had programmed with on other occasions, I realized how robust and consistent it is, serving both small projects and complex applications well. Rewriting a good portion of the code was work, but it was worth the effort. Today, Accounting Overview is more stable, faster, and ready for future growth.
WebAuthn: Potential and Complexity
Implementing authentication with WebAuthn was, without a doubt, one of the biggest challenges during the development of Accounting Overview. Although the technology is excellent, it still lacks more accessible documentation and practical examples that make its application easier. This can cause confusion, especially for those trying to integrate it for the first time—like me =).
After an intense period of research and experimentation, I managed to set up the system reliably, ensuring security and providing a great user experience. To simplify and optimize this process, I developed a library NPM - Misc Helpers, available on NPM. This library not only offers some conveniences but also abstracts some of the complexities of WebAuthn integration, making it more accessible to explore this technology without facing so many initial barriers.
Donation System with Stripe
For monetization, I chose Stripe, implementing a donation system. While it’s relatively simple, I was surprised to learn that 55% of the donations would go to the platform—based on my initial tests 😁. Still, the system works perfectly, and I hope it helps keep the project active. (What’s five bucks, folks? Donate and let’s go!)
Internationalization: 10 Languages Available
From the beginning, I wanted to make Accounting Overview accessible to a global audience. That’s why the app was launched in 10 languages. If you can share it, it would be a huge help in reaching more people!
Here are the languages available as of this article:
- English (USA)
- Portuguese (Brazil)
- Italian (Italy)
- Spanish (Spain)
- French (France)
- German (Germany)
- Esperanto (Esperanto)
- Chinese (China)
- Japanese (Japan)
- Hindi (India)
By any chance, does anyone know a cool way to promote this to other languages? It would be great to get feedback from someone who speaks Japanese, Chinese, or Hindi.
Why Did I Create This Project?
This is a free project, focused on showcasing practical skills and building my portfolio. I’ve also created other libraries and projects, such as Function Point Counter, which I describe in more detail in this article.
How You Can Help?
This project has costs to maintain, and I don’t charge anything—just remember that I’ll continue to add more features over time, so any form of support is welcome!
Whether by sharing it with friends, commenting, or even leaving a small Tip/☕, it would be greatly appreciated.
Additionally, I’m looking for freelance projects to supplement my income—if you need someone for work outside of business hours, feel free to reach out.
Leave your like, suggestion, or comment. Every piece of feedback is very valuable. Let’s create connections and share ideas. God bless you! 😊
Top comments (0)