<h3 id="no-texto-anterior"><a href="#no-texto-anterior" class="anchor">No texto anterior…</a></h3>
<ul>
<li>Precisei me adaptar a um novo estilo de trabalho. Praticamente começar uma profissão do zero;</li>
<li>Aprendi que para empreender, não necessariamente precisa sair do seu emprego atual;</li>
<li>Trabalhe em um lugar que respeite a meritocracia.</li>
</ul>
<p>Caso queira ver o texto completo <a href="https://douglasporto.com.br/blog/mudan%C3%A7as-empreendedor-interno/">clique aqui</a></p>
<h3 id="conhecendo-mercado-financeiro"><a href="#conhecendo-mercado-financeiro" class="anchor">Conhecendo mercado financeiro</a></h3>
<p>Se você não veio por alguma rede social minha (procure por DgsApenas em qualquer rede social), provavelmente não sabe da minha paixão pelo mercado financeiro.</p>
<p>Conheci sobre já velho, admito. Foi só após os 26 anos que recomecei a poupar e investir meu dinheiro.</p>
<p>Aprendi muito sobre negócios lendo sobre o assunto. Mercado financeiro e empreendedorismo andam lado a lado. Não foi preciso muito para tomar gosto pelo assunto.</p>
<p>Com isso formamos os 3 pilares que procurava no meio profissional.</p>
<ul>
<li>Tecnologia</li>
<li>Empreendimento</li>
<li>Investimento</li>
</ul>
<p>Buscava um local onde não apenas trocasse meu trabalho por um salário. Meu alvo era um local que tivesse evolução em tecnologia, me desse autonomia para empreender internamente e por fim, que não fosse um funcionário para sempre.</p>
<h3 id="me-tornei-um-acionista-da-fabapp"><a href="#me-tornei-um-acionista-da-fabapp" class="anchor">Me tornei um acionista da Fabapp</a></h3>
<p>Não me recordo ao certo a data, mas recebi uma ligação do <a href="https://www.linkedin.com/in/hugobyang/">Hugo Yang</a>, CEO da <a href="http://fabricadeaplicativos.com.br/">Fabapp</a>, no segundo semestre de 2020.</p>
<p>Não foi uma surpresa a ligação, pois o mesmo me liga algumas vezes para tratar de diversos assuntos.</p>
<p>Porém, o assunto da ligação me surpreendeu muito, recebi este convite.</p>
<p>Foram alguns meses de conversa para fechar o acordo e o contrato. Muitas páginas a serem lidas, mudadas, adicionadas e etc.</p>
<p>Enfim, no dia 29 de Março de 2021 foi assinado o contrato e me tornava o mais novo acionista da Fábrica de Aplicativos.</p>
<h3 id="conclusão"><a href="#conclus%C3%A3o" class="anchor">Conclusão</a></h3>
<p>Não, esse não é o fim da história, é o começo. Um novo desafio me aguarda. Uma nova etapa me aguarda com muitas alegrias e decepções, porém ambos com muito aprendizado.</p>
<p>Agora meu recado é para você que leu esses 3 textos.</p>
<p>Não importa a dificuldade que esteja passando no meio profissional. Você, só você pode sair disso.</p>
<p>Só você poderá decidir acordar mais cedo, ir dormir até tarde, perder o sono, almoçar mal, para conseguir o seu objetivo. Acordar todo dia reclamando do emprego que tem e não fazer nada para mudar, não irá mudar nada.</p>
<p><strong>(MUDANÇA, se antecipar, MUDA, se esperar, DANÇA)</strong></p>


# Design System para React

Salve devs ✌🏾

Toda vez que iremos iniciar um novo projeto, surge as dúvidas referentes a qual pasta deve ficar cada arquivo, principalmente se você é júnior. Por conta disso hoje vou falar sobre Design System.

Já deixo claro aqui que este post não coloca aqui a melhor ou a pior forma de arquitetura de seu projeto. Apenas vou te mostrar a forma que estruturo.

Uma outra observação é que irei usar como exemplo em um projeto com [React.js](https://reactjs.org/), porém os conceitos podem ser utilizado em qualquer outro framework, até mesmo num projeto com Javascript puro (famoso vanilla js).

O design system que mais utilizo e gosto é o Atomic Design, desenvolvido por [Brad Frost](https://bradfrost.com/).

Não vou explicar muito sobre Atomic Design por meu objetivo é mostrar mesmo na prática.

Mas uma breve, muito breve mesmo, informação sobre é que essa arquitetura foi criada observando componentes químicos.

Onde encontramos 5 estágios: átomos, moléculas, organismos, modelos e paginas.

![Atomic Design](/assets/img/posts/atomic-design.png "Atomic Design")

Num exemplo prático, átomos poderia ser um botão. A molécula seria esse botão (átomo) com outro átomo, talvez um icone. E assim por diante até chegarmos na maior composição que é a página.

Caso queira mais detalhes, este artigo é perfeito para você <https://vidadeproduto.com.br/atomic-design/>

### Vamos para prática

Chegou a hora de aplicarmos tudo isso no nosso projeto.

Eu não gosto de usar as nomenclaturas oferecidas pelo atomic. Prefiro usar apenas a ideia de separação de componentes.

Primeira coisa que eu faço é deixar tudo dentro da pasta `src/`

Dentro de dela, as pastas importantes para nosso design system são:

```bash
  src/
    - Page
    - Template
    - DesignSystem
    - Components
```

### Page

Ficará apenas nossas páginas nada de styles ou coisas do tipo

```bash
  Page/
    - Index.tsx
    - About.tsx
    - Contact.tsx
```

### Template

Colocaremos os possíveis templates que teremos.

Como assim?

Num sistema, costumamos ter diferentes formas de apresentar a informação para o cliente. Como por exemplo, a estrutura de paginas do signIn e SignUp são diferentes da estrutura de páginas de uma Dashboard.

É justamente aqui que montaremos essas estruturas onde cada página irá dizer qual estrutura ela deverá ser montada.

Aqui poderemos ter styles, por isso gosto de separar por pastas os templates

```bash
  Template/
    - Auth/
      - Index.tsx
      - styles.scss
    - Dashboard/
      - Index.tsx
      - styles.scss
```

Nos próximos posts, estou querendo trazer de forma prática como fazer isso no [Next.js](https://nextjs.org/). Caso achar interessante, comenta aqui embaixo.

### DesignSystem

É aqui que a brincadeira fica cada vez mais interessante.

Dentro desta página, ficará nossos átomos e Moléculas.

Uma boa dica para ter ideias de como separar é olhar como é feito essa separação em design system como [Material-ui](http://material-ui.com/), [Chakra-ui](https://chakra-ui.com/) e etc.

```bash
  DesignSystem/
    - Form/
      - Button/
        - Index.tsx
        - styles.scss
      - Input/
        - Index.tsx
        - styles.scss
    - System/
      - Card/
        - Index.tsx
        - styles.scss
      - Tabs/
        - Index.tsx
        - styles.scss
```

Uma outra dica, da qual aprendi com a galera do [Quinto Andar](https://www.quintoandar.com.br/) neste [video do YouTube](https://www.youtube.com/watch?v=5fM4XuMxwkA), é que mesmo usando o componentes do material-ui (ou qualquer outro) é sempre implanta-los no seu design system, nunca no projeto direto.

Exemplo:

```js
  import {
    Button as MuiButton,
    ButtonProps as MuiButtonProps
  } from '@material-ui/core'

  import * as S from './styles'

  export type ButtonProps = {
    title: string
    className?: string
  } & Pick<MuiButtonProps, 'variant' | 'color'>

  export default function Button({
    title,
    className,
    variant = 'contained',
    color = 'primary'
  }: ButtonProps) {
    return (
      <S.Wrapper className={className}>
        <MuiButton color={color} variant={variant}>
          {title}
        </MuiButton>
      </S.Wrapper>
    )
  }
```

Caso futuramente o material mude alguma coisa no Button deles, basta você arrumar neste único componente seu, evitando aquela corrida de procurar em todos os lugares que colocou o Button do material-ui.

### Components

Por fim, mas não menos importante, são todos os componentes especifico de sua aplicação.

Digamos que você esta desenvolvendo um blog. Nele terá uma página mostrando os autores dele.

Então nesta página terá uma pasta especifica para os cartão do autor (AuthorCard).

```bash
  Components/
    - AuthorCard/
      - Index.tsx
      - styles.scss
```

Exemplo do nosso componente AuthorCard utilizando suas moléculas.

```js
  import { Card } from 'src/DesignSystem/System/Card'

  import * as S from './styles'

  export type AuthorCardProps = {
    name: string
    description?: string
  }

  export default function AuthorCard({
    title,
    description
    return (
      <Card>
        <S.Title>
          {title}
        </S.Title>
        <S.Description>
          {description}
        </S.Description>
      </Card>
    )
  }
```

Então é isso galera. Isso não é a melhor arquitetura do mundo, mas é a arquitetura que até o momento mais tem me agradado e me feito mais produtivo.



Arquitetura e Design System em React

Arquitetura na prática para aquele seu projeto em react

### No texto anterior…

* Depois de longos anos na mesma empresa, me desmotivei por não ver perspectiva de crescimento;
* Estudei por 3 anos seguidos para me atualizar tecnicamente;
* Consegui entrar na Fabapp através da indicação de um amigo.

Caso queira ver o texto completo [clique aqui](https://douglasporto.com.br/blog/mundan%C3%A7as-recoloca%C3%A7%C3%A3o-profissional/)

### Adaptando

Acabo de chegar num local novo, pessoas novas, cultura diferente. Me sinto deslocado, realmente um peixe fora do aquário.

Lembro que no meu primeiro dia já começou muito diferente do que tinha sido durante 10 anos.

Acordei cedo, por volta das 6 ou 7 hrs. Mandei mensagem para meu líder para saber qual horário deveria chegar no local de trabalho.

“Acho que umas 11h já deverá ter alguém lá”. Foi essa resposta que obtive.

Realmente, tudo novo. Atmosfera de startup.

Vi que não era apenas o fator técnico que deveria me atualizar, mas sim em tudo: horários, comportamento e etc.

Acostumado a receber novos funcionários e fazer o “onboarding” desta vez estava do outro lado da mesa.

Precisei de pelo menos 3 meses para me acostumar a essa nova realidade. Realidade que comecei a pensar: isso faz muito sentido, porque outras empresas não fazem o mesmo?

Enfim, quando você precisa se adaptar a coisas novas e essas coisas novas são prazerosas, a adaptação flui.

### Empreendedorismo Interno

Após perder o medo de falar e opinar, comecei a dar meus “pitacos” para coisas diferentes ou novas que poderíamos implantar e sempre fui muito bem ouvido.

Algumas das ideias não foram muito para frente e tudo bem. Outras foram implantadas e tenho orgulho. Mas nenhuma delas me deu mais orgulho e realização quanto essa que irei descrever.

Antes de contar, um breve relato sobre minha paixão pelo empreendedorismo.

Eu já montei uma agência de produtos gráficos, criando cartão de visita, banners, flyers e etc.

Depois fiz do meu quarto um home studio onde gravava e editava o som de alguns amigos.

Dentre todos nenhum me deu mais dinheiro que trabalhos freelas. Surgia a Brain&Mind (hoje pausado).

Comecei pegando sites simples e ganhando confiança. Depois comecei a pegar trabalhos mais robustos. Alguns projetos me possibilitavam contratar outros devs para me ajudar.

Todo trabalho entregue, me sentia mais e mais realizado. Em minhas leituras, entre um livro e outro, sempre encaixava algum sobre empreendedorismo.

Na [Fabapp](https://fabricadeaplicativos.com.br/) eu pude reacender novamente essa minha paixão. Onde eu ia, pensava num produto que poderia encaixar nos nossos produtos.

A cada nova ideia ligava para um dos meus líderes, explicava e passávamos horas conversando e analisando possibilidades. Não importava o dia, sábado, domingo ou feriado, surgia uma ideia, eu ligava.

Até que em uma dessas conversas, surgiu a ideia do [Fabapp delivery](https://fabricadeaplicativos.com.br/). Na época não era esse nome, ok, mas sei que mesmo sem nome o Fabapp Delivery nascera daquela conversa.

### Conclusão

Para encurtar a história, você que veio pelo instagram, ou qualquer outra rede social minha, sabe que gosto de falar sobre empreendedorismo e provavelmente você também goste.

Hoje no nosso case de produtos, temos um para você ter um aplicativo como o Ifood, seu e feito por você.

Um produto que vem ganhando muito espaço, o que me deixa orgulhoso e realizado.

Pude empreender utilizando recursos que antes eu não tinha, dentre eles: infraestrutura, funcionários e money é claro.

Eu pude ser um empreendedor interno.

Dos 3 requisitos para ser realizado profissionalmente, marquei um X no segundo.

\[X] Tecnologia

\[X] Empreendimento

\[ ] …



Você se sente realizado profissionalmente? Já fez uma lista do que te faria ser realizado?

No próximo texto contarei o último check da minha lista, nos vemos semana que vem.
