A new chapter for MyArtverse (previously MyFursona)
A soon-to-be social art platform to cater to artists and users to manage their characters and keep track of commissions and character adoptables
2024 Update: Before the new name of the project, "MyArtverse", it will be referred to as "MyFursona" for this blog post before the name change.
It’s been a year and a half now since this project's initial inception and for the past few months or so, there has been a lot of substantial progress this year!
In this lengthy blog post, I'll discuss key points throughout the development of the project, including the inner workings of the design and all the black magic behind it all!
The problem when taking commissions from artists
Art commissions and trades can be rewarding and fulfilling when you’ve got someone to draw your fluffy characters; the only major downside with this is that you’ll have to jump from website to website.
While some artists exclusively share their commission status, prices only on Twitter/X and all that, others go for the extra mile and set up either a generated website from Caard, or even buy a domain name, use a site builder such as WordPress, Wix, Squarespace, etc. as a place to showcase their prices, and also Trello, for the queues as well—it can get very tedious and can get out of hand if not handled properly.
Meanwhile, some artists are offering their commission services on Etsy, and to me, in terms of user experience, it has been very pleasant, specifically not having to jump from another platform as Etsy has its messaging feature to either consult with the seller for an issue about the package and other requests, stuff like that.
There isn't a platform that has a primary focus on this, but if only there was a way to take that problem and turn it into a platform... Luckily, as a college dropout and virgin web developer—I can!
“But FurAffinity has this commission feature too!”, I know, but correct me if I’m wrong but the Commissions feature is not utilized correctly as far as I know. Weasyl nailed this with their Marketplace feature, both FurAffinity and Weasyl have the commission and trades status on their user profiles with the exception that only Weasyl has the status of the requests, while FA doesn’t.
Not to mention their commission listing tutorial on FurAffinity which is linked on a Google Drive link, in my opinion, is somewhat of a hassle to set up—probably because their systems are so old and they’ve been running it since 2005 or something; I can’t say any more about Weasyl since I don’t have an account there, and usually lurk around for something specific.
So what is MyFursona exactly?
Jason created MyFursona in March 2022, an open-source social media platform where, initially, users can have a way to share their fictional characters' reference sheets and commissions from artists. I joined the project to improve the UI, performance, and overall design and to suggest backend improvements. To compare, in terms of what technology they use:
FurAffinity is most likely written in PHP and it probably uses MySQL for its database and is entirely self-hosted (I'm not certain if it's self-hosted entirely or hosted from a cloud vendor like Google Cloud or Amazon Web Services)
Weasyl is an open-source project and is written in Python entirely from scratch and hosted on a Docker container, they use Postgres as their database, and their source code can be found on GitHub; licensed under Apache-2.0
Toyhou.se is a proprietary, invite-only platform written in Laravel and Vue.js
MyFursona is written in Next.js and hosted on Vercel for the site itself (heck, even this site is hosted on Vercel too!), the majority of the backend, which includes user authentication and database, is written from scratch with the Go programming language, as well as a dedicated desktop client written in Tauri and Next.js
Most of the features on MyFursona have taken inspiration from almost any social media, notably from Amino, FurAffinity, Weasyl, Toyhouse, and refsheet.net in terms of features.
Design-wise, its UI is heavily inspired by Geist, Vercel’s design system; as well as Mastodon, Discord, YouTube, Facebook, and Steam’s new UI update—with the help of Tailwind CSS, a UI framework we use, makes the design process much faster to scaffold.
From the beginning
Before MyFursona became a thing, Jason’s reason for starting the project in the first place was to have "an excuse to make a project together” with someone else; and he thought of an idea to create an app where the artist could display their artworks from platforms like FurAffinity.
MyFursona, back then, was previously called “Artistically”, starting work by mid-2021; but unfortunately, he didn’t have the motivation to continue working on the project since then, until he expanded on the idea to storing art of their characters or “fursonas” by 2022.
[...] so this was a project between me and someone else just for "we have an excuse to make a project together" so we was like we should build an app where artist can display their artworks similar to e621, furaffinity; Sadly I have no clue what happened to the person and I didn't have motivation to complete the project until an I had an idea about a way where people can store art of their characters so I kinda went back to that
—ozzythedev (Jason), Discord
Behind the "MyFursona" name
I asked where the “MyFursona” name came about since I know most people would assume “MySpace” was the possible inspiration for it.
But, no, apparently Jason said he was thinking of a suitable domain name for the platform, and hence, MyFursona was born!
Initial design
Its initial design was simplistic, designed by Jason, Jaker, and myself; at this time I was fairly new to Figma and worked on the website and transformed the design on Figma into code.
My first proposal for the design is to change the “Hot Fursonas” to “Popular Fursonas”, as it has some connotations to something that is not age-appropriate. So far, Jason’s implementation has not been bad, but there is room for improvement; as I have edit access to the MyFursona Figma file, I redesigned certain necessary parts, adding more details for the character page.
As months passed by, progress was slowly put to a halt as I was focused on other projects at the time, and Jason was busy with not just his other projects, but with school assignments. My final addition to the initial design was adding the profile dropdown.
Revamped design and branding
In November 2022, Jason presented me with the new MyFursona logo designed by Nebula Animations; and it looked amazing!
Sadly, he didn’t provide me with an SVG version of the logo; so I had no choice and used Photoshop to extract the logo and Adobe Express to convert the image into SVG. A very big-brain moment.
Applying a new coat of paint
Reflecting on the initial design tells me that there is a lack of things to add, both in terms of the given concept and design. Concept-wise, yeah, we can store characters, and… now what?
As for design, there are no rules set in place to have a clear and consistent design; Jason’s initial design didn’t have any variety and every part of the UI is huge, but this can be forgiven as it’s merely just a concept.
But then I had a recurring idea that I had when I was still learning web development: I was looking at KoolioKota’s Caard page in late 2021, and I had the obligation to recreate it and show it to him once I was finished with it, but while in the middle of recreating it, I had this random idea where users can keep track of their artist’s commission queues! Having this in mind, this would’ve been a smart move to implement this idea into the platform!
So, by April, I started to revamp the entire design and started to look for inspiration; I mostly took designs from Vercel, a cloud deployment platform that Jason and I use to get our websites online!
The first thing I did for the huge redesign was make a design language as a base reference for consistency and a modern UI approach.
I also added subtle color tints for the design just to make it pop a bit instead of going straight blacks and whites as the default colors. I also considered adding high-contrast colors to the design but implementing it on the actual web app will have to double the effort, as adding the toggle theme feature is already time-consuming to implement from scratch.
Some of you are like, "There are identical color palettes, why couldn't you combine them as one?", the truth is, I would've done exactly that! But when I did figure that out and all of each component was assigned their light/dark counterparts; it can be confusing and using the separation-of-concerns method might be ideal and keep things organized and explicit.
Sure, it can minimize the CSS bundle a little bit, but it's not much of a big deal in my opinion.
I also decided to change the font face since it’s not in line with the design language; the design’s font faces are Inter for the headers and Open Sans for the body contents.
Onto the technical part
From the technical side, MyFursona is written in Next.js, version 12 initially. Jason has worked with the black magic stuff, he worked with user authentication, and in general the backend stuff -- I worked on the front end and made my best effort to convert the designs from Figma to the web app. (Keep in mind there wasn't the "Dev Mode" feature on Figma back then!)
At this time, I was only familiar with the Vue framework, and I had no React skills whatsoever, thankfully, I managed to learn React relatively quickly when working on Searchpets!, another project I worked on with a friend of mine.
The backend was entirely written from scratch previously by staxthefoxxo, written entirely in Go; but for whatever reason was kicked out of the team, as I asked Stax on this he's probably dealing with internal management at Puroto. But Jason brought him back again to work on the backend just this month.
Fast forward to several months later, Jason decided to rewrite the platform into a different framework, Nuxt, as a way to "try something new"; I saw this as a gold mine as the Nuxt 3 was officially released in November 2022! And Vue.js was the first JS framework that I learned and loved it for its syntax!
Issues with the Vue ecosystem
However, the biggest downside when working with the Vue ecosystem; is when there wasn't a library for something we don't need, one of them was Stripe, which is vital to the web app, but there's only full support for Nuxt 2.
I admit that the React ecosystem is more huge than Vue's. So if I go around looking for a specific library, I have to go to that library's issue tracker if there is any "Vue 3" or "Nuxt 3" support.
When previously rewriting MyFursona in Nuxt 3, Framer Motion is a React-only animation framework, and there are libraries like @vueuse/motion that are heavily inspired by Framer Motion, but because I hate myself—I forced myself to learn GSAP instead!
But the worst part is that some of them have no TypeScript support, which is a deal breaker for me, as I have a love-hate relationship with TypeScript, but I still need TypeScript for almost anything to yell at for my garbage code. So we went back to Next.js for this reason.
Now with a rock-solid foundation; clear and concise UI, and passionate developers willing to work on the project, it seems like the MyFursona project is finally taking shape once again!
Infrastructure
Jason seems to be vague in terms of what the infrastructure of the project will be, he said from time to time again during a call with him, that someone will do the DevOps and the backend—which is great, however, I didn't get the answer I expected.
I know he mentioned that he'll buy servers once we get everything ready, some of my questions are, what VPS platform is MyFursona gonna utilize? Is it Akamai Linode? DigitalOcean? Firebase?
Fortunately, when I finally got around to asking this question, he said that he'll host the backend through a Contabo database, which is a platform I've never heard of, and they claim such cheap prices compared to something like Linode and DigitalOcean!
Wrapping things up
In conclusion, the first year of development was very rocky, but with the team we have currently, it certainly has potential!
I noticed that there's also a project called FurInk, which focuses on the commission part of the project, and I'm probably looking forward and helping them out in the future, as they have the same project structure as we have here at MyFursona!