Hello there!

This post here is to go through (with you) my thought process when trying to create and release a side-project idea. It's really important to try to get around the chaos of the creative process and stablish a structured process for any project. After reading my thoughts on this, feel free to engage the discussion and comment something below 👍

If you just want to check what was the project made, you can check it here.

The first step: The IDEA

This is where many of you can suffer a lot. I think we can divide the general programming public into two segments: the more creative ones and the more pragmatic ones, generally, more pragmatic people will have difficulties having an idea while creative people will have difficulties taking it out of the paper.

My approach to this is generally to think of problems that impact my daily basis, all those problems require solutions and solving them for you can help others with the same problem too! Taking problems that exist within hobbies or trying to create solutions to problems that people you know have can be a great way to get your mind started.

The most important tip here is just to start creating. Sometimes we spend so much time thinking about the perfect idea that we end up not creating anything. Always remember: Not perfect is better than inexistent.

The second step: The planning

After defining the idea, you should go to plan before the code (sometimes, when the project is really, REALLY small, you can skip this and go directly to code, but beware, if you skip this step when you should not, it's going to bite you later).

The planning stage is kind of simple, get a somewhat free tool like Figma, or draw.io and put your idea on the white canvas. Don't worry too much if it does not make a lot of sense, the whole idea of this step is to achieve this.

Draw flows, databases, pages, start creating and don't have fear of making some mistakes. Don't forget to look into references too, they can give you a lot of inspiration!

The third step: The refinement

After you create the draft, it's time to create the definitive version of your project prototype. Define a scope and gather everything you think it's useful within that scope, refining the flows to have a good UX - this is majorly important, even with small projects (sometimes, we, as developers, can overlook the experience of the application, but whenever you'll need to show this project to someone, the UX that is what is going to be evaluated).

Since UX is really important, gather the Laws of UX and try to create a good consistent design. If the project you are creating does not include front-end and UX is not the problem, this doesn't mean you can create in the most chaotic way possible. Anytime you are creating something, spend some time to improve your skills and learn new things, unit and e2e testing, design patterns and architectural patterns can make a whole lot of difference and can be really fun to learn (you can check here to learn more)

The fourth step: The code

Code until it's done or until you are happy with the result (always remember, you can finish the project in another day)

The fifth step: The release

After you are done with the first version of the product, make a release plan! Where are you going to discuss about it? Never underestimate the power of organic conversion, many people can see your project even when you don't expect to.

Think of metrics that will gather good insights for creating more things for the product later and track them using analytics services like umami or others.

The practical case:

• The problem: I really did not like the experience of searching for specific items in the wiki of Warframe (a game that I enjoy). I would like to have a better experience when searching for items and where to get them.

• The idea: Create a website that would get data from Warframe's item API and would inform things that are useful for the user looking to get them (like price value, drop location, and things like that).

• The planning: Started to sketch the flow in draw.io until it looked reasonably nice.

After that, started playing around with the UI components that Skeleton UI have until I was satisfied with the appearance of it.

• The refinement: I defined a more ambitious scope, while started to research how I could get things from the API. After that, the whole project was already kinda structured and we could start to code for real

• The code: Decided to use Svelte and SvelteKit (since I'm learning both of them) and started to code! Created a git repo, initialized the dev environment and created things like I planned before.

• The release: Expected to release it in the reddit community of Warframe and see what kind of reactions I got! The sheer number of views and most visualized pages were interesting enough data for me to track.

The post:

The statistics:

And now, I'm posting it here (and probably will update this to reflect how other DEVs react to the post!

Thanks for reading! You can see the project live here