As a UX designer, I am always learning how to design and build better products to help people in their everyday lives. As I design and develop websites, I am always creating digital projects to keep abreast of the new tools and technology that go into making digital products. One such project is Typepost, a simple tool to create rich image and text posts for social media.
I made Typepost as a solution to a problem I often see on Instagram. Whenever people want to write text for an Instagram post, they tend to take a screenshot of something they wrote in their device’s notes app and post it. This has led to the phenomenon known as the “notes app apology”. While Instagram does have some native authoring tools, they are mostly geared towards making stories and reels. As a designer, I feel that people would like a product that allows for creativity in their social media posts without the complexity of Canva or Adobe.
So after doing some research on existing products and tools, I arrived at the idea for Typepost. The general functionality of the app was to allow users simple design authoring in a web app. They can write text, change the background and text colors, add a background photo, as well as manipulate filters and blend modes. When the user is ready, they can export their design into a PNG image to share on social media. You can also use it for playlist and album covers, digital flyers, or quick slideshows.
Defining features and building wireframes for the app was easy. However, to build the app, I needed to use a Javascript framework to enable the reactivity I needed. I am a designer first and a developer second, so I needed a library that’s more robust than jQuery but not as involved as ReactJS. Fortunately, I stumbled on Svelte, the Javascript non-framework. It’s similar to HTMX language which allows for JS, HTML, and CSS all in a single file. You can build scoped reusable components and connect them to your main app to build powerful single-page applications.
Svelte was essential in building Typepost as the UI required a lot of complex interactions to make designing easy and familiar for users. Svelte is focused on reactivity and avoids verbosity. This was very helpful in turning existing HTML elements into hyper-performative, easy-to-style components, like this color picker.
Svelte was pretty easy to learn, almost as easy as learning Javascript. And since it’s a compiler, it just turns the Svelte and Javascript components into a single, lightweight Javascript file that runs super fast. And one of the best parts of the app is that it’s entirely client-side. Nothing gets sent to a server to process, so no waiting for anything except the initial app load and the rendering of the image.
Building Typepost taught me a lot more about modern web app development. Component architecture, state management, and even DRY code were concepts I read but not yet implemented until I built Typepost. And the result is a beautiful, responsive, user-friendly app that I use almost every day. Now, just to get more people to use it.