DEV Community: Felipe Austriaco

Construindo SaaS #1 – Meu primeiro dia com um SaaS no ar

Felipe Austriaco — Thu, 06 Feb 2025 14:43:15 +0000

Olá, pessoal! Como estão?

Estou iniciando uma série de artigos sobre SaaS, com o objetivo de trazer insights valiosos e conteúdos informativos.

Hoje quero compartilhar com vocês os resultados do primeiro dia do primeiro SaaS que desenvolvi!

Contexto

Criei a aplicação em um ritmo acelerado, movido tanto pela vontade de validar a ideia rapidamente quanto pela ansiedade de lançá-la. No entanto, essa pressa teve seu preço: um fucking bug em produção.

Mas calma! O bug foi sério, mas não trouxe nenhum prejuízo — na verdade, foi o oposto. E é exatamente isso que vou compartilhar neste artigo.

No dia 05/02/2025, lancei o SaaS em produção e fiz uma série de publicações em diversas redes sociais para anunciar sua disponibilidade.

Caso queira entender detalhes técnicos e mais informações sobre o SaaS, acesse aqui: https://dev.to/w1redl4in/zodiac-seu-mapa-astral-em-instantes-1d9m

Resultados

Acessos ao SaaS

Dessa vez, foi um descuido de iniciante: esqueci de configurar o <Analytics /> da @vercel/analytics antes do lançamento. O resultado? Só percebi horas depois das publicações. Estimo que o número real de acessos tenha sido pelo menos 30% maior do que o registrado no dashboard da Vercel.

Mas vamos aos números: 880~ visitantes únicos e 1000~ páginas carregadas (essa métrica inclui múltimos acessos do mesmo usuário à mesma página). Fiquei impressionado com o alcance que consegui já no primeiro dia do meu primeiro SaaS!

Contas criadas

No total, foram criadas 20 contas, além das 8 contas de teste já existentes—um resultado bem acima das minhas expectativas.

Pagamentos

Foram gerados 29 PIX e 2 foram pagos. E é aqui que o problema começa: um dos PIX pago foi hackeado. Isso mesmo! Cometi o erro de deixar o valor do PIX em um componente "use client", o que fez com que o código fonte ficasse acessível no navegador e facilmente manipulável pelo usuário.

Engajamento

O maior retorno ao lançar o SaaS e divulgar as publicações foi, sem dúvida, o engajamento no Twitter. Em apenas um dia no ar, ganhei cerca de 200 seguidores e alcancei 200 mil impressões (entre comentários, curtidas e reposts).

Insights valiosos

Seguir com o MVP: Apesar de ter cometido erros ao lançar o SaaS sem testar todas as frentes ou planejar todas as abordagens, essa ainda me parece a melhor estratégia. Construir um SaaS desde o início com um código impecável e uma pirâmide completa de testes, mas sem nenhum alcance, simplesmente não compensa o tempo investido.
Priorize Interfaces Responsivas: Segundo as métricas da Vercel, 74% dos usuários (aproximadamente 660 pessoas) acessaram o SaaS pelo celular. Embora eu já tenha o hábito de desenvolver interfaces responsivas, esse dado reforçou ainda mais a importância de garantir uma experiência fluida e otimizada para dispositivos móveis.
Configure Analytics antes do lançamento: Isso é essencial para avaliar se o SaaS tem potencial para crescer ou se está caminhando para o fracasso. Ter dados desde o primeiro momento permite ajustes rápidos e decisões mais estratégicas.
Conheça a bolha dos seus usuários: Publiquei o SaaS em várias redes sociais e cheguei a viralizar no Twitter, mas o retorno em pagamentos foi baixo. A maioria dos usuários eram desenvolvedores, mais curiosos sobre o projeto do que realmente interessados em adquirir o produto. Isso reforça a importância de entender o público-alvo e direcionar melhor a estratégia de monetização.

Reflexões e Próximos Passos

No geral, foi uma experiência incrível! Eu esperava alcançar esses números apenas no meu quarto ou quinto SaaS, então atingir esse resultado logo no primeiro foi surpreendente. Para 2025, meu objetivo é lançar cerca de 10 SaaS, e essa etapa marcou o primeiro passo nessa jornada.

Zodiac – Seu Mapa Astral em Instantes ✨🔮

Felipe Austriaco — Wed, 05 Feb 2025 21:58:30 +0000

💫 Meu Primeiro SaaS em Produção!

Fala, pessoal! Tudo certo?

Quero compartilhar com vocês a experiência de desenvolver e lançar meu primeiro SaaS em produção. Sempre tive vontade de entrar nesse universo, mas só recentemente tomei coragem para dar o pontapé inicial.

Tudo começou no excalidraw, onde rabisquei uma arquitetura simples para estruturar o projeto. Escolhi next.js pela familiaridade com react, supabase pelo ótimo custo-benefício e facilidade de implementação, react-query para gerenciar estados no client-side, shadcn + tailwind para a UI, clerk.js para autenticação e Mercado Pago para pagamentos via Pix.

Segui a filosofia do MVP e foquei em apenas uma feature: Gerar mapas astrais! ✨

E QUE DESAFIO! 😵‍💫 Tentei várias abordagens, incluindo IAs do Hugging Face, mas nenhuma entregava a velocidade e consistência que eu precisava. No fim, optei pela biblioteca sweph, que realiza cálculos astrológicos complexos e gera os mapas com precisão. Foi um baita aprendizado entender esse universo!

No final, deu certo! Agora, estou pensando em formas de divulgar o projeto para mais pessoas. Se tiverem dicas e/ou críticas, comentem aí! 😃💜

Link do zodiac: https://zodiac.felipe-austriaco.dev/

Meu primeiro ano como desenvolvedor

Felipe Austriaco — Mon, 05 Apr 2021 01:29:39 +0000

Bom, aqui estou, um ano após conseguir um estágio, ser efetivado pra Júnior, trancar a faculdade e um mês depois ser promovido para “Pleno”.

O propósito deste artigo é melhorar minhas habilidades de escrita, me identificar com a plataforma para possíveis tutoriais no futuro, compartilhar experiências profissionais e me lembrar de tudo que já passei.

Vida antes de ser desenvolvedor

Começando pelo ensino médio, acredito que repeti umas 2 ou 3 vezes, talvez por falta de motivação ou interesse, nesse período da minha vida eu não tinha expectativa alguma de ter uma vida profissional acima da média salarial brasileira (por volta dos R$ 1.800) e passava boa parte do dia jogando. Por incentivo de um amigo de infância que teve e tem bastante influência na minha vida, vulgo Luquinhas, o anão, acabei ingressando em um curso técnico (ETEC — Técnico em Informática). Foi uma época de muita presença na minha vida, onde aprendi a lidar com diversos problemas que eu tinha/tenho, seja ignorando-os ou sendo mais forte do que eles. Em relação ao curso, com certeza eu aprendi uma coisa: Odeio programação!

Como alguém poderia gostar de passar horas escrevendo linhas e linhas em inglês que no final do dia não tinha utilidade alguma?

Foi o que pensei. Partindo desse pensamento, terminei o curso técnico com a vontade de prestar um ensino superior público na área de TI, já que era o assunto que eu mais tinha conhecimento, só tinha uma condição: ser o mais distante possível de programação. Acabei chegando na conclusão de cursar Redes, afinal, por quê não? quem nunca quis ser um hacker famoso?

Fiz o vestibular e acabei passando, e por enfim prestando faculdade. Mas quem diria!

1 ano de faculdade

Eu não aguentava mais participar de aulas tediosas ou de professores que se sentiam ofendidos com perguntas nas quais eles não saberiam responder. 10 minutos de Google era mais produtivo que um semestre inteiro! Em contrapartida, eu precisava de dinheiro. Já estava com 23 anos e nunca tinha trabalhado na vida. Nesse ponto tomei talvez a decisão mais importante da minha vida, sair da zona de conforto!

Acabei enviando diversos currículos com o que eu tinha de conhecimento na época (Linux/Redes) e aconteceu o que eu menos queria, fui aceito para estagiar como programador!

Lembro-me até hoje do primeiro dia, o Super-intendente da empresa me fez a seguinte pergunta:

Você tem mais conhecimentos de Java ou Ruby? pode escolher uma das duas para trabalhar.

Optei por Ruby por conta de experiências traumáticas passadas com Java.

Sou desenvolvedor?

Aqui começa o pesadelo, pelo menos era o que eu acreditava na época. Fui bombardeado com diversos conceitos e ferramentas do ecossistema de um desenvolvedor: Squads, Scrum, Sprint, JIRA, Back-End, Front-End, Frameworks, Ambientes, Cerimônias (Essa era a pior parte). Meu time contemplava quase que o Scrum por completo, então tínhamos cerca de 4 ou 5 reuniões semanais e em cada uma delas eu tinha que defender ou apresentar algo do qual eu não fazia a mínima ideia!

Até então eu já tinha trabalhado em equipe nos cursos e faculdades mas trabalhar com o conceito de Squad em uma empresa é totalmente diferente!

Quando eu me comparava com o resto do meu time em questões de habilidades (Soft Skills e Hard Skills) parecia uma distância de conhecimento sem fim.

Quantos cursos eles já fizeram?
Quantas vezes eles já passaram por isso?
Quantas vezes eles já erraram?
Eu ainda tenho esse tempo para errar?
Eu ainda tenho esse tempo para aprender?
Eu sou capaz?

Ser iniciante em um mundo como o dos desenvolvedores pode ser sufocante, é tanta informação, tantos meios diferentes de chegar no mesmo lugar, você com certeza precisa ser calmo e pensar a longo prazo.

Depois de alguns meses eu consegui entender que não precisava ser bom em tudo, não tinha por quê. Com isso comecei a evoluir de acordo com o tempo e esforço, eu já não precisava pedir ajuda para resolver aquele conflito no Git. Testes unitários estavam finalmente entrando na minha cabeça. O fluxo das aplicações estavam ficando cada vez mais claros.

Será que sou desenvolvedor mesmo?

Após desenvolver com Ruby On Rails por 5 meses, recebi a proposta de mudar de Squad, era o que eu queria na época. Na minha visão Ruby estava morrendo.

Um mês depois, fui encaixado em um Squad de JavaScript! ~hehe

Nesse momento, tive um grande choque de realidade em relação as tecnologias, estava tão acostumado com o modelo de Model, View e Controller que não conseguia imaginar como uma aplicação poderia funcionar sem isso.

Comecei em Node JS, lá pela versão 10? não lembro. Minha principal dificuldade foi lidar com Promises, não lembro como Ruby lidava com isso mas foi uma das coisas que mais estudei na vida. Nesse mês cheguei a ter uma rotina de 13 á 14 horas de trabalho + estudo (não da faculdade).

Percebi algumas características minha interessantes, eu só aprendo escrevendo. E por mais que eu empurre informações para o meu cérebro sem parar, não sou capaz de absorver tudo depois de algumas horas.

Este Squad, vulgo Compromisso com o Cliente provavelmente será a melhor equipe com qual eu venha a trabalhar. Eu tinha suporte de todos os lados, feedbacks de todos os membros e mais importante, respeito de todos.

Talvez eu seja desenvolvedor mesmo…

Nesse período eu já tinha sido efetivado como “Desenvolvedor”, acredito que seja Jr. Depois de algum tempo desenvolvendo em Node migrei para o Front-End com React.JS, foi onde conheci uma das pessoas que mais me ajudou/ajuda na vida profissional. Praticamente me ensinou tudo o que eu sei de React hoje.

A caminhada pra aprender React e de fato ser produtivo foi longa, cerca de 3 meses (Quando você vê isso todo dia da sua vida, pode ter certeza que 3 meses é muita coisa)

Tudo estava bom, eu tinha sido efetivado e reconhecido, estava aprendendo coisas novas muito rápido mas de repente…

Por conta da crise e da pandemia, boa parte do meu querido time Compromisso com o Cliente foi desligado da empresa.

Foi um momento muito difícil, tive que assumir responsabilidades nas quais eu não soube lidar no começo. Mas o tempo e esforço dão um jeito em tudo.

Eu sou desenvolvedor!

A pandemia só foi um gatilho para algo que eu estava planejando há muito tempo, trancar a faculdade. Com isso, tive muito mais tempo para estudar e hoje participo de diversos projetos, todos atuando como React Developer.

Aqui eu já tive muitas mudanças por conta das dificuldades que passei. Era apenas um garoto desenvolvendo Botões em uma Sprint e na outra Sprint tive que desenvolver e manter aplicações React, desde criação de telas até integração.

Hoje estou desenvolvendo um banco digital WhiteLabel para minha empresa, a mesma empresa de quando eu era estagiário. O mesmo cara que era Jr. um mês atrás! Pensar isso me dá arrepios mas ao mesmo tempo vejo como um desafio e mais espaço parar melhorar profissionalmente.

Criando seu próprio tema com styled-components

Felipe Austriaco — Mon, 05 Apr 2021 01:18:28 +0000

O que é tema

Tema são as cores, tamanhos de fontes, espaçamento entre elementos da aplicação e o que mais você quiser.

Porquê perder tempo com isso, não posso só aplicar tudo isso pelo css?

Pode sim, o problema é que pode virar uma bola de neve. A cada componente novo você usa medidas diferentes para margins e paddings, cores mais claras ou escuras e tamanhos de fontes divergentes, fazendo com que a aplicação não tenha nenhum padrão de estilização.

Quais os pontos positivos ao usar um tema?

A aplicação seguirá um padrão de cores, tamanhos e medidas.
Menos CSS redundante, mantendo um código mais limpo.
Alterações como cores, tamanho de fontes e etc são triviais, já que toda aplicação busca informações do tema.

Certo, então como crio um Tema?

Bom, vamos lá então. Nesse artigo estamos usando styled-components e irei supor que você está usando Typescript (por favor, esteja :D) para ter o type-checking do nosso tema.

Criação do tema em si

Podemos criar um arquivo chamado theme.ts para definir nosso tema:

export const theme = {
  colors: {
    primary: '#000000',
    secondary: '#FFFFFF',
  }
}

No mesmo arquivo exportaremos também um type do nosso tema para ter o type-checking:

export type ITheme = typeof theme;

Type-checking do tema para o styled-components

De acordo com a documentação do styled-components, devemos extender a interface de Tema original com o nosso type, para isso precisaremos de um arquivo .d.ts, no qual irá se chamar styled.d.ts

import 'styled-components';
import { ITheme } from './theme';

declare module 'styled-components' {
  export interface DefaultTheme extends ITheme {}
}

ThemeProvider, a parte mais fácil!

Agora que já temos nosso tema criado e com typechecking, só precisamos fazer nossa aplicação inteira conhecer ele. o styled-components faz isso através do componente <ThemeProvider /> utilizando Context API por debaixo dos panos.
No nosso App.tsx:

import { ThemeProvider} from 'styled-components';
import { theme } from '../theme.ts';

export default function App() {
 <ThemeProvider theme={theme}>
  ...resto da aplicação
 </ThemeProvider>
}

Utilizando o tema

Com o nosso tema configurado, conseguimos usá-lo em qualquer componente styled-components, exemplo:

 import styled from 'styled-components';

export const Container = styled.main`
  background: ${({ theme }) => theme.colors.primary} // aqui vai ter typechecking!!
`;

Flexbox

Felipe Austriaco — Sun, 04 Apr 2021 22:01:09 +0000

O que é FlexBox

O CSS Flexible Box Layout, conhecido como Flexbox, é um modelo de layout da Web CSS3. Está no estágio de recomendação de candidatos (CR) do W3C. O layout flexível permite que os elementos responsivos dentro de um contêiner sejam organizados automaticamente, dependendo do tamanho da tela (ou dispositivo).

Como a própria Wikipedia diz, facilita nossa vida na hora de criar layouts, e como facilita... Criar layouts complexos com linhas e colunas parece brincadeira de criança com FlexBox.

Como funciona o Flexbox

Seu uso e conceito são bem simples, normalmente aplicamos o Flexbox em elementos que possuem filhos para ajustá-los da forma que queremos. Como assim?

<div class="container">
 <h1>Eu sou o filho 1</h1>
 <h2>Eu sou o filho 2</h2>
</div>

Podemos dizer que a nossa div com a classe container é a candidata perfeita para ser display: flex

Propriedades do Flexbox

A partir do momento que definimos um elemento com display: flex, podemos usar as propriedades align-items, justify-content e flex-direction, além de outras.

flex-direction

Por padrão a propriedade flex-direction vem com o valor padrão de row, isso significa que o posicionamento será sempre na horizontal. Podemos modifica-lo para flex-direction: column que muda o comportamento para colunas, ou seja, na vertical. Isso influencia diretamente nas outras propriedades do Flexbox, caso o flex-direction seja column, align-items e o justify-content vão inverter as direções.

align-items

A propriedade align-items possui a função de alinhar os filhos na horizontal/vertical e tem como principais valores: center, flex-start e flex-end.

center como o próprio nome diz, posiciona os elementos horizontalmente/verticalmente ao centro.

flex-start posiciona os elementos horizontalmente/verticalmente ao inicio.

flex-end posiciona os elementos horizontalmente/verticalmente no final.

justify-content

A propriedade justify-content possui a função de alinhar os filhos na horizontal/vertical e tem como principais valores os mesmo do align-items com a adição de space-between e space-around.

space-between posiciona todos os elementos horizontalmente/verticalmente com o máximo de espaço entre eles

space-around posiciona os elementos horizontalmente/verticalmente com o máximo de espaço ao redor deles.

Agora um exemplo com Flexbox

Vamos construir a barra de navegação do próprio Dev.to. Com apenas 3 linhas de CSS conseguimos ter o posicionamento idêntico, mostrando o poder do Flex box.

HTML

<nav>
  <div>
    logo
    <input type="search">
  </div>

  <div>
    <button>Write a post</button>
    <span>Icone 1</span>
    <span>Icone 2</span>
    <span>Imagem</span>
  </div>
</nav>

CSS

nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

Claro, estamos olhando apenas para o posicionamento dos elementos e não para a estilização.

Resultado