Most of my websites were built during the peak of Nuxt 2, this include Signalicon. Now, as the time passed, Nuxt already on a brink of version 4. Started with Logoipsum that were upgraded to Nuxt 3 (from Nuxt 2) in 2023, now it's time for Signalicon. While more or less of the codes are adapted from the previous version, especially basic features like copy/download icons, but most of the features and UI are rewritten to not only make it "feel more like" Nuxt 3, but most importantly to make it better. Here are some of the development notes during the process of redesigning and upgrading signalicon.com

The Stack

For easiness and effortless development, I use Supabase for the database/backend (I already used Supabase on the previous Nuxt 2 version). Pairing Nuxt with Supabase is also a breeze, although is not always the case, especially at the time when Nuxt 3 first released. But now Nuxt/Supabase module is getting better and stable.

The purchase and signup process

For this new version, I disabled sign up on Supabase, as I don't want user to sign up directly on the website but rather get invited automatically upon purchasing a license on Gumroad. Since Signalicon uses a one-time payment model, so I thought it doesn't need a complex purchase and post-purchase flow as it would on subscription-based model. To simplify things, I utilize Gumroad Ping that notify the server every time a user purchase Signalicon and created an account based on that ping. On the user-side, all they need to do is wait for the email to arrive, confirming their account is ready, and that's it. This flow definitely way much simpler than what Signalicon had on the earlier version.

The UI

The new UI is inspired by Gmail, where the main content is contained at the center with a huge search bar at the top navigation bar. I always feel that this type of UI make the whole layout looks more compact, and I think it's a great fit for Signalicon. The new sidebar is now always visible to make it easier to filter the icons. Overall the UI is different than the previous version, but there's a resemblance and I kept the main branding the same, this include colors and fonts, among others.

The way it loads the data

There are many details, tweaks, and adjustments I made for this new version. It's really challenging and I love it. The previous version of Signalicon is really complex on how it handle the data (involving localStorage and and complex state management!), and it guilty of creating untangled and really mess data management. I try to avoid that on this new version.

As the icons number growing, so does the data that being fetched. I applied infinite scroll so it's more controlled and reduced the amount of data that being fetched on the first load. Nuxt 3 is also made it easier to watch whenever user state change. It easier to control which data is being fetched simply by watching user instance and refresh the fetch source with computed url for logged in and non-logged in user.

The watch trick is also applied on a case where, for example, initially user is not logged in, and let's say the user search for an icon, then the search result of filtered icons showed. At this point, the user decided to logging in and the nice thing is the UI is persist as it were before logging in, it just need to load the "logged in user" data in the background.

The other "trick" is when the user being showed the filtered icons based on search, and then navigate back to all icons, it does not refetched the data, it just get back to the earlier state of all icons. It really make a real difference on user experience.

It's rely more on the server

Thanks to Nuxt 3's server (Nitro!), I can watch Gumroad Ping webhook from the server. I also move all the data fetch to the server so it can perform complex conditional fetch and middleware. Switching between Supabase's admin and user role is also a breeze with server.

The icons

Minor tweak to all icon's SVG code: the id has been removed, and being replaced with data-name instead. This is useful when user just want to "Copy-and-go" the icon, and not worry about manually removing the id on repeat usage.

Some of the previous icon design also got revised and cleaned up. For the new icons update, I decided to focused on the stroke version, without the filled version. I also removed all duotone version icons, and so the custom color feature also has been removed. It does not add any real value for the user (For designer just edit the color in Figma and for the developer might just change the code), and it definitely stripped out unnecessary complexity to the Signalicon UI.

Last but not least, as per October 2024, Signalicon serves 1.176 icons!