Presenting our new project: IS ! MY BUG
Tags: project, tailwindcss, nuxt, branding
Published: 2020-07-19 20:32:29

{% tweet 1284946057227653121 %}

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](https://refactoringui.com/), 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](https://fontsrepo.com/apex-mk2-free-font/), a font family that had everything we were looking for.

  ![Font Family Apex Mk2 - IsNotMyBug](https://dev-to-uploads.s3.amazonaws.com/i/muuzaxxuazxytf1v58xb.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](https://tailwindcss.com/docs/customizing-colors/#default-color-palette), and we used the **gray palette** for the rest of the elements.

![Pink palette used in IS ! MY BUG](https://dev-to-uploads.s3.amazonaws.com/i/vr2p45mhyrmwdh9cngp6.png)

![Gray palette used in IS ! MY BUG](https://dev-to-uploads.s3.amazonaws.com/i/idi4ki6i8hhf3s3r64us.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.

  ![Backgound pattern used at IS ! MY BUG](https://dev-to-uploads.s3.amazonaws.com/i/t7hprc8oekp3ujxtvl1o.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](https://www.ls.graphics/), it has real wonders.

  ![Example illustration used at IS ! MY BUG](https://dev-to-uploads.s3.amazonaws.com/i/ctskjlt5s5s341spnlvp.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](https://www.flaticon.com/) and [Freepik](http://www.freepik.com/) and our super font we came up with this fun icon:

<img class="mx-auto" title="Logo IS ! MY BUG" src="https://dev-to-uploads.s3.amazonaws.com/i/s51e0t2s1fxwlshklrli.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](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:

![What do devs value most in a company](https://dev-to-uploads.s3.amazonaws.com/i/fh2na355lelytfeiauci.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](https://twitter.com/dawntraoz).



## 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](https://nuxtjs.org/)** in **Full Static** mode 😍 and, in case it wasn't clear above, the style will go hand in hand with **[TailwindCSS](https://tailwindcss.com/)**.
Nothing can go wrong with these two beasts!

**NuxtJS v2.13.0** - *[Full static](https://nuxtjs.org/blog/going-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](https://vuejs.org/v2/style-guide/).

### **2. BackEnd**

My guy is going to be responsible for creating the *API* on **[.NET Core](https://docs.microsoft.com/en-us/dotnet/core/)** 3.1, he is a passionate about **C#** and **REST API**s. 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](https://www.digitalocean.com/). Each one will have its [droplet](https://www.digitalocean.com/products/droplets/) and will configure it to get the best performance, I will talk about that in the following post 🤗