With the start of the new year, I had an inkling to read up on some inspirational quotes and sayings to fire me up. I found it difficult to organize them into neat collections so I built a PWA to collect ones that inspire me. It's called Quoteful. Here's a look at its interface:
If you have been visiting my blog, you will notice that PWA is a repeating theme of mine. PWA stands for Progressive Web App. With so much advancement in Web API, it's become possible to provide near mobile app experience by making a web app.
The thing that really makes me passionate about PWA is that it's based on the most time-tested, universal runtime in the world - the web. And by utilizing service worker caching, you can also offer a great offline support as well.
I made a few interesting stack choices with Quoteful. Here's its tech stack:
Being a front-end focused developer, I've usually reached for services such as Firebase to quickly whip up my projects.
This time however, I wanted to build out the entire stack, because I wanted to get some practice at building out graphql endpoint and using mongoDB.
I used Svelte and Shoelace to piece together my frontend. Svelte is basically a frontend framework that readies your code at compile time. It doesn't ship any extra weight like other frameworks so it's much leaner and performant.
Shoelace is a UI library built out of web components.
Web components are a set of web platform APIs that allow you to create reusuable UI components. It works with any frontend frameworks or no framework at all. And because it's based on web standards, it's a great way to future-proof your components.
And lastly, I used snowpack as the build tool to bundle up my app.
Perhaps I can dig deeper into my experience with using these tools at a later post. But overall, I was really thrilled with the tech choices I had made.
Building the app took a little longer, but in the end, I ended up with an app that I think I will enjoy using. I hope you give it a try as well.