Presenting our new project: IS ! MY BUG

Presenting our new project: IS ! MY BUG

ยท

4 min read

After a couple of weeks working on the new project, my boyfriend and I would like to show the progress and decisions we have made.

The concept

The main idea came up from the necessity to have reliable opinions from other developers about a company. We would like to have a website where people can anonymously evaluate the companies they have worked for, as part of an average.

For that, we are now creating IS ! MY BUG (IsNotMyBug), we want to build a community of devs to help you find the company that suits you best.

Branding and resources

In this section we tell you about the resources we have chosen to bring our brand to life and the reasons for each decision.

1. Choosing a personality

As a brand we wanted to show a fun and fresh personality. Following the advice that TailwindCSS offers us in RefactoringUI, we started to define how our design would be and the resources we would use.

  • Font

    We looked for a font with rounded details, sans serif and that would remind you to be a game player.

    Then we found Apex Mk2, a font family that had everything we were looking for.

    https://a.storyblok.com/f/79165/747x172/340675ee84/fireshot-capture-143-find-the-company-of-your-dreams-is-my-bug-isnotmybug-com.png

  • Colors

    To choose the main colors we focused on finding a bright color that would give life to the page and another that could live together in harmony.

    That's why we chose pink-600 as the primary color of the TailwindCSS pink color palette, and we used the gray palette for the rest of the elements.

https://a.storyblok.com/f/79165/617x264/a4d0f175be/main-color-pink.png

https://a.storyblok.com/f/79165/609x258/f1290144c0/main-color-gray.png

  • Background pattern

    When we tested the font with the colors, we realized that the background, with a simple solid color, lost the feeling. So we looked for patterns to fill that gap and gave it another look.

    https://a.storyblok.com/f/79165/704x455/da3b058e70/pattern-gray.png

  • Illustrations

    When explaining a section or showing some text to the user, we wanted to give them a playable roll with some illustration. For this we have used the resources offered by LS Graphics, it has real wonders.

    https://a.storyblok.com/f/79165/1292x484/86c9bad56a/evaluate-cta.png

2. Creating our logo

Now that we were clear about the personality of our brand, we had to create a logo that represents the devs community. With the help of pages like Flaticon and Freepik and our super font we came up with this fun icon:

https://a.storyblok.com/f/79165/318x159/aa9ecc934c/logos-footer.png

Survey results

Just before we started the project, we created a small survey to know what was most important when choosing a company for developers today.

In case you missed it, but feel like participating, here's the link: https://isnotmybug.aidaform.com/how-would-you-describe-the-company-of-your-dreams

After reviewing all the answers and sharing the comments, in the following infographic I show you the results:

https://a.storyblok.com/f/79165/1040x693/0e94f3d0c1/survey-results.jpg

Do you identify with the results? You think there are things that are being overlooked, let us know in the comments or by contacting me at my twitter profile.

Tech stack

As you have seen, we want you to be aware of all the decisions we make. The reason for this is that apart from wanting to build a community with you, we plan to do it open source!

Right now we are working on having a minimum product to present and have everything well defined, and tested, so we can work together.

You may wonder which languages we are using, well, here goes!

1. FrontEnd

This is my field! Those of you who already know me will know that I will use my dear best friend NuxtJS in Full Static mode ๐Ÿ˜ and, in case it wasn't clear above, the style will go hand in hand with TailwindCSS. Nothing can go wrong with these two beasts!

NuxtJS v2.13.0 - Full static configuration

  • Programming language: JavaScript
  • Package manager: npm
  • UI Framework: TailwindCSS
  • Nuxt.js modules: Axios, PWA
  • Linting tools: ESLint, Prettier
  • Rendering mode: Universal (SSR)
  • Target: Static

To name my files, properties and components guidelines, I'm using the Vue Style Guide.

2. BackEnd

My guy is going to be responsible for creating the API on .NET Core 3.1, he is a passionate about C# and REST APIs. He's using clean architecture, Domain Driven Design (DDD) and SOLID principles.

To store data is using a relational DB, MySQL.

3. Cloud

To host the API on the one hand and the Front on the other, we have chosen DigitalOcean. Each one will have its droplet and will configure it to get the best performance, I will talk about that in the following post ๐Ÿค—