Creating a more than minor side-project: From planning to release
Tags: svelte, webdev, tutorial, beginners
Published: 2023-08-24 12:37:04

## 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 :+1:

If you just want to check what was the project made, you can check it [here](https://relicarium.vercel.app/).

## The first step: The IDEA
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vh2sduv1zeystbafxhvj.png)

This is where many of you can suffer a lot. I think we can divide the general programming public in 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 think of problems that impact my daily basis, all those problems require solutions and solving it for you can help others with the same problem too! Taking problems that exists 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 spent so much time thinking about the perfect idea that we end don't creating anything. Always remember: Not-perfect is better than inexistent.

## The second step: The planning
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9e7f4u4qgmvnjyxwjyx.jpg)
After defining the ideia, you should go to plan before the code (sometimes, when the project is really, REALLY small, you can skip this and go direct to code, but beware, if you skip this step when you should not, it's going to bite you later).

The planning stage is kinda simple, get a somewhat free tool like [Figma](https://www.figma.com), or [draw.io](https://app.diagrams.net/) and put your idea in 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](https://dribbble.com/shots) too, they can give you a lot of inspiration! 

## The third step: The refinement
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4kvcxi56o0sxhy21unc.jpg)
After you created 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 in order 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 this [Laws of UX](https://lawsofux.com/) and try to create a good consistent design.
If the project you are creating does not includes 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](https://refactoring.guru/design-patterns) to learn more)

## The fourth step: The code
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zpchs2m4tcqg05l9etk.png)
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
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tejq6kb5isa4kpfm1l3a.png)

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](https://umami.is/) 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. 

![Draw plan](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kzg6sxqf6rb36o0zl173.png)

After that, started playing around with the UI components that [Skeleton UI](https://www.skeleton.dev/) have until I was satisfied with the appearance of it.

![The final page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fx5rq0lxozrnbzn2z5nw.png)


- **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](https://www.reddit.com/r/Warframe/comments/13351fv/introducing_relicarium_your_ultimate_solution_for/):
![Reddit post](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rjc1dtrcn8o4f5w6afa.png)

The statistics:
![Visitors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zt7zb8033ksithsbv4he.png)

![Countries that were reached](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tauucwbowiwntd8oso3r.png)

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](https://relicarium.vercel.app/)