DEV Community: Raphael Ramos

Meet MobiFit: My Fitness App and How It Works

Raphael Ramos — Wed, 22 Oct 2025 15:57:54 +0000

MobiFit is a fitness app that combines AI with multi-agent, local-first functionality, thoughtfully designed UX, groups with an internal social network, and Instagram integration—all so you can train anywhere.

Created by an independent developer, the project was born from the realization that many gym apps are bureaucratic: too many forms, confusing interfaces, and little focus on what matters—getting started with training. A discovery process with students and fitness professionals guided the feature decisions.

The available ready-made workouts were created by human professionals, specifically for the app and for various levels.

Available on: Google Play and App Store | Free

Languages: English, Portuguese, and Spanish

The Experience, Powered by AI

AI isn't an add-on: it's a central part of the architecture and can execute actions within the app, create dynamic content, and use user data to personalize recommendations.

What the AI Does

Personalized workout plans from natural language.
Answers to questions (execution, adaptations by level, goal, or equipment).
Assisted prompt ("Create Workout"): a guided flow that collects preferences and generates the ideal prompt for those who don't know where to start or how to create a good workout prompt. Part of the planning for better user experience.
Original content: exercise instructions and videos are human-made (not AI-generated), produced by the author with support from professionals. All execution videos were recorded exclusively for this app.


Page AI MobiFit	AI MobiFit Prompt Form	Exercise Block

Agent Architecture

The received message mixes text and structured data in blocks (e.g., exercises, diet, actions). These blocks feed dynamic cards and app actions. Each request is routed to a specific agent.

A request is received by an Edge Function, which executes an AI agent integrated with an LLM model, streaming the response.

For workouts, exercises are grouped by day, with options to save to "My Workouts," where you can create sessions, share with other users, or generate a custom photo for Instagram.

The agent is context-aware: in addition to chat history, it retrieves the user's progress and preferences (when authenticated).

Product Design and UX: Unblocked Journey

The proposition is simple: start training before signing up.

Unblocked journey: no login, no forms, and no permissions for most initial features.
Content by level: library for beginner, intermediate, and advanced, with video, image, and text instructions—all material is human-made and copyrighted by the author.
Meaningful gamification: coins, medals, and rankings that reward consistency.
Social: groups with internal feed for posts, workouts, and materials; useful space for anamnesis with students/clients.
Three languages from first access.
Design principle: reduce effort in the first minutes after installing.

Gamification and Group Challenges

Goals and Challenges

Goals: Individual with an end date; users check in daily by marking a workout as completed or in the goals menu.
Challenges: Group-based. Check-in is a post in the group (can include physical activity data and photo); the challenge period can be defined or continuous.

Coins, Medals, and Rankings

Coins: practically every relevant action earns coins.
Medals: mark specific achievements.
Ranking: in challenges, classification uses members' check-ins.

Groups

Highly configurable with administrators.
Allow making workouts available to everyone (each member can add to their personal list).
Members have "profiles."
Anamnesis sent by members is visible only to administrators (ideal for personal trainers and coaches).
Currently the only feature that requires authentication.


MobiFit Group	Group Post Feed

Local-First

Data is persisted locally and, when there's internet, synchronized with the cloud (if the user is authenticated). Otherwise, it remains only on the device.

Synchronization uses a simple last-sync strategy: the app stores local date/time and compares with cloud data to decide what prevails.

Result: exercise library and workouts fully usable offline, including edits, progress, and gamification.

Workouts

Hierarchy: Plan → Workouts → Exercises

Plans contain multiple workouts.
Workouts contain exercises and can be:
- MobiFit Workouts: ready-made, created by professionals for the app.
- My Workouts: User-exclusive, created by them, by AI, or received from someone else (like friends or professionals).
When opening a plan, the date of the last day on which training sessions were performed in the same week is displayed.

Social and Sharing (Groups + Instagram Stories)

Upon completing a workout or logging an individual activity, a sharing modal appears.

You can publish to the internal group and/or Instagram Stories—with sticker options.

Photos taken vertically are cropped internally to 4:5 for the group feed; on Stories, they go without cropping. The crop marking is displayed at the moment of capture.

Main Stack

Expo React Native
Supabase (with Edge Functions)
Cloudflare R2

About MobiFit

MobiFit is born from a design goal: enabling the first step without friction.

AI acts as a contextual copilot, local-first architecture ensures fluidity in the real world, and the social layer sustains motivation.

All of this in an app with curated original content, multilingual, designed for beginners and experienced trainers alike—in a human, creative, and accessible way.

Next Steps

In development:
wearable integration, such as watches, the Diet page, and new AI agents.

Expanding original media content.

Bun. Será o fim do node?

Raphael Ramos — Mon, 25 Sep 2023 22:31:47 +0000

Lembrando para os mais novos na área que o Node não é uma linguagem, e sim o runtime que executa o JavaScript.

E é apenas um deles, temos outros, mas nenhum conseguiu chegar perto de tirar o reinado do Node.

E o assunto recente é o Bun, que veio com a intensão mudar isso e ser um substituto superior.
Também é o primeiro que tem um emoji como logo…

Inclusive a Vercel já disponibilizou suporte para o gerenciador de pacotes dele, que promete ser 25x mais rápido que o npm.

A Vercel utiliza outro runtime baseado em edge (que são aplicações serverless que rodam na região do cloud mais perto do usuário e com isso menor latência), e esse runtime usa menos recursos, tem o cold start, o tempo de inicialização, instantâneo, mas não suporta todas APIs do Node.

É essa busca por desempenho se torna maior até pelo recente crescimento das aplicações Server Side, aonde parte do código do front é executado no servidor e o cliente recebe menos JavaScript, já que muita já vem renderizada. Diferente das aplicações SPA, onde o cliente baixa e executa todo JavaScript. Então o Runtime passa a ser também importante para o front-end.

Ecossistema JavaScript

Antes de falar se haverá o fim do Node, quero fazer alguns comentários como anda a comunidade JavaScript.

Não há muito padrões, principalmente no front.
Quem nunca viu memes de que todo dia nasce uma biblioteca nova e de milhões de pacotes vindo ao executar npm install.

Isso é ruim porque traz uma fragmentação do ecossistema e é a maior crítica a linguagem, mas que não é um problema da linguagem e sim da comunidade.
Apesar disso, o JavaScript continua sendo uma boa linguagem e com nível de performance até melhor que outras grandes para algumas tarefas e com ótimas bibliotecas.
Segundo ranking do GitHub em 2022 tivemos o JavaScript como linguagem mais usada e TypeScript como quarta.

Typescript

É por falar de Typescript, vira e mexe alguém vem o criticar e defender o JavaScript puro. O DHH, criado do Ruby on Rails removeu o TypeScript do Turbo 8, mesmo a maioria da comunidade tendo votado contra, incluindo o segundo maior contribuidor, mas ele fez o merge e pronto.

Mais ou menos no estilo “não querem aprovar meu PR? Eu mesmo aprovo”.

Alguns ainda defendem seguir o caminho que o Svelte teve e substituir o TypeScript pelo JSDoc para tipagem, que é uma anotação, mas não tem o bloqueio de compilação.

Eu lembro quando o Angular 2 chegou forçando o TypeScript, pessoal falou que era loucura, mas no fim virou padrão de mercado. A maioria dos grandes projetos que eu tenho conhecimento hoje são nele.

O fim do Node chegou?

O bun não chega apenas querendo substituir o Node, mas traz uma DX (Experiência do desenvolvedor) melhor, vindo embutido várias ferramentas. Sendo não apenas um runtime, mas um toolkit de ferramentas, ajudando a eliminar um dos problemas que citei acima do ecossistema do JavaScript, que é a grande quantidade de bibliotecas necessárias para executar um projeto.

Além disso a Oven, empresa por trás do desenvolvimento do bun, recebeu um aporte de 7 milhões de dólares e está contratando desenvolvedores em Zig e C++ para trabalhar full time no Bun.

Apesar disso tudo, quando uma empresa vai escolher a stack de um novo projeto, ela não diz apenas, “vamos ver o que está no hype ou qual é a mais rápida?”. É também levado em consideração estabilidade e tamanho da comunidade.
Node tem mais de 12 anos e está na versão 20, o que passa confiança no mercado. Tem projetos que começam com tudo, mas acabam com pouca adoção e ficando sem suporte depois.

O Bun acabou de receber a sua primeira versão estável. Isso não quer dizer que ninguém vai usar, mas que não haverá, por agora, uma adoção em massa e nem matará o Node, que continua firme e forte, pelo menos por um tempo.

Inclusive foi questionado pelo Trev Norris, importante colaborador do Node, se o Bun irá conseguir manter toda essa performance ao implementar ferramentas de monitoramento.

Mas já podemos esperar vagas pedindo 5 anos de experiência em Bun. (Aviso de ironia)

Me siga para mais conteúdo desse tipo.
LinkedIn
YouTube
Instagram
X

Clean Code - O básico a se fazer

Raphael Ramos — Thu, 22 Jun 2023 02:38:55 +0000

Vamos falar sobre uma boa prática da programação, o Clean Code.
Eu não gosto de complicar muito o assunto e acho que alguns exageram (over-engineering). Claro que com o tempo e maior senioridade você vai muito além, mas quero demonstrar algumas coisas mínimas que eu acredito que todo Dev deve fazer.

Prática difundida devido ao livro do Robert C. Martin (Conhecido na comunidade como Uncle Bob). Ele percebeu que maior parte do tempo gasto em programação é para dar manutenção em código.

O objetivo do clean Code, ou código limpo, é ter o código simples, com uma leitura clara e objetiva.

Um código sujo pode ser um dos grandes problemas que causam todo esse tempo, considerando a dificuldade em entender o que foi feito por outro dev ou ter funções com várias responsabilidades, o que dificulta alterações.

Mas se você está começando na área agora, nem está procurando vagas, esquece isso. Foca em aprender o básico da programação, depois você vê sobre boas práticas.

Vou demostrar alguns exemplos em JavaScript, mas o conceito é aplicável em todas as linguagens.

Além desses que vou chamar de "Padrões de Mercado", há também os padrões definidos por times.

Disclaimer: Você não precisa fazer exatamente como eu demonstro, diferente pode não ser errado, se considerar os princípios de código limpo.

Nomes

// Bad
// Use explanatory variables

complete = true
elapsedTime = 5
date = moment().format('YYYY/MM/DD');
n = 'Raphael'

function addToDate(date, days) {
    console.log(date.getDate() + days)
}
const date = new Date();
addToDate(date, 1);

No exemplo acima vemos que os nomes das variáveis e da função não deixa muito claro qual o valor. Aqui tem apenas um trecho de código então é fácil identificar, mas imagina em um projeto grande.

No Clean Code comentários no código devem ser usados exclusivamente para documentar e não explicar a função do código, o nome dele deve ser claro o suficiente.

Um bom exemplo:

// Good

isComplete = true
elapsedTimeinDays = 5
currentDate = moment().format('YYYY/MM/DD');
userName =  'Raphael'

function addDaysToDate(todayDate, days) {
    console.log(todayDate.getDate() + days)
}
const todayDate = new Date();
addToDate(todayDate, 1);

Funções

O ideal seria que uma função não tivesse mais de 3 parâmetros. Para quem não a criou saber exatamente como os valores são esperados, quando há muitas, pode ser trabalhoso e também de gerar testes.

Uma função que tem mais de uma responsabilidade também não é considerada uma boa prática.

Primeiro princípio do SOLID, Single Responsability Principle, ou Princípio da Responsabilidade Única, diz que “uma classe deve ter apenas um motivo para mudar”, ou seja, deve ter uma única responsabilidade. No Código abaixo a função tem duas responsabilidades, criar usuário e enviar email.

// Bad
// Use 2 or fewer ideally arguments
// The function must have single responsibility

function createUserAndSendEmail(name, city, jobId, active) {
    console.log(name)
    console.log('email sent')
}
createUserAndSendEmail('Raphael', 'Uberlândia', 5, true);

Ao invés de vários parâmetros, você pode passar um objeto.
Também pode separar as responsabilidades, tornando a função com
responsabilidade única.

// Good

function createUser({name, city, jobId, active}) {
    console.log(name)
}
function sendEmail() {
    console.log('email sent')
}
createUser({
    name: 'Raphael',
    city: 'Uberlândia',
    jobId: 5,
    active: true
});
sendEmail();

Condicionais

Podemos evitar If Else aninhados usando a prática de early return, que consiste em você verificar o oposto do que deseja e retornar o mais rápido possível para encerrar a função.

// Bad

const checkShipping = (totalToFreeShipping) => {
    if (!isNaN(totalToFreeShipping)) {
        if (totalPrice> totalToFreeShipping) {
            setFreeShipping();
        } else {
            calculateShipping();
        }
    } else {
        console.log('Value is not valid!')
    }
}

checkShipping(80);

Agora com early return.

const checkShipping = (totalToFreeShipping) => {
    // Early return. Validate possible problems before the “happy path”
    if (isNaN(totalToFreeShipping)) return console.log('Value is not valid!');

    if (totalPrice > totalToFreeShipping) {
        setFreeShipping();
        return;
    }

    calculateShipping();
}

checkShippin(80);

Um exemplo com Object Literals, evitando um switch.

// Bad

const {role} = Subscriber

switch(role) {
  case ADMINISTRATOR:
    return <AdministratorUser />
  case EDITOR:
    return <EditorUser/>
  case Subscriber:
    return <SubscriberUser/>
}

// Good

const {role} = Subscriber

const components = {
  ADMINISTRATOR: AdministratorUser,
  EDITOR: EditorUser,
  Subscriber: SubscriberUser
};

const Component = components[role];

return <Componenent />;

Componentização no Front-end

Com componentes menores temos a reutilização de trechos de código, o isolamento de contexto e a melhor legibilidade.

Links

Repositório com os exemplos: https://github.com/raphaelramos/cleancode-examples/

Você também pode conferir em vídeo onde demostro em live coding:

Você deve usar tailwindcss!

Raphael Ramos — Tue, 16 May 2023 13:33:42 +0000

Claro, o uso é relativo, já que uma ferramenta que se encaixe em um projeto não significa ser a ideal em todos os outros. Mas agora que consegui sua atenção com o título, veja alguns motivos para considerar usar o tailwind no seu projeto.

Podemos dividir frameworks CSS nas categorias Components e Utility como veremos a seguir.

Diferente de outros populares frameworks de CSS, como o bootstrap, que traz o design pronto com estilização (components), o tailwind traz classes para você criar seu próprio design (utility).

Seu código vai ficar cheio de classes e parecer feio, o que mais incomoda alguns devs, porém isso vem com ganhos de velocidade no desenvolvimento após o domínio da ferramenta.

Lembre-se da letra S (Single Responsability Principle) do SOLID para que seu código não fique sujo. Então não crie componentes complexos e grandes, do contrário, use outra solução de CSS para seu HTML não ficar enorme.

Pontos que me fizeram optar pelo tailwind em meus projetos:

Maior controle na linguagem visual, mais leve por usar apenas as classes necessárias e vai melhorar seu conhecimento de estilos CSS em comparação a um framework de componentes.
Curva de aprendizagem não muito alta. As classes utilitárias de tamanho são abreviações de estilos CSS. Por exemplo, padding-bottom: 10px é a classe pb-10 e definir a classe apenas para um tamanho de tela também é simples com um prefixo. Para dispositivos de tamanho médio seria md:pb-10;
Tudo pode ser personalizado. Use o arquivo tailwind.config.js para criar seu próprio Design System. Você pode levar seus tokens de UI para lá;
Traz padronização desde o início do seu projeto, como múltiplos de 8 e unidade rem;
Adotado por grandes empresas;
Exibido na documentação do Next.js;

Dica: Extensão Tailwind CSS IntelliSense para VS Code.

Crie um tema no arquivo de configurações para definir as cores, fontes e espaços, os design tokens. Se houver uma modificação, você não vai precisar trocar todas as classes do código.

Além do já citado bootstrap, temos outras atraentes, como o styled components, Chakra UI e Material Design.
É necessário analisar qual se enquadra melhor no seu projeto. Eu defendo mais CSS puro ou tailwind pelos motivos já listados.

Esse artigo é sobre frameworks e não Tailwind vs CSS. Há quem prefira o CSS puro e ter menos classes no HTML, o que também é válido.

Único caso que não recomendaria qualquer tipo de framework é na criação de libs. Aliás, quando menos dependências em libs melhor.

Se você é iniciante recomendo estudar bootstrap, que possui curva de aprendizagem baixa e é usada também no mercado e depois partir para estudar uma solução de utilitários como o tailwind e aprender CSS. Todos Devs front-end tem que saber no mínimo o básico de CSS!

Bootstrap venceria em um cenário
em que você precise desenvolver um produto rápido e já estilizado, já o tailwind onde você já tem um Design System próprio.

Confira o ranking dos frameworks CSS em 2022

https://2022.stateofcss.com/en-US/css-frameworks/

Melhorias de performance recentes no ecossistema JavaScript

Raphael Ramos — Mon, 24 Apr 2023 19:39:04 +0000

Houve muitas melhorias recentes nas principais ferramentas JS.
Vamos focar aqui apenas nas voltadas a performance nas versões recentes do Angular 16, Next.js 13 e Node.js 20.

Angular 16

Servidor de desenvolvimento baseado no vite

Com a performance muito superior ao Webpack, a ferramenta aproveita duas melhorias feitas recentemente no ecossistema JavaScript: a disponibilidade de ES Modules no navegador e as ferramentas de empacotamento de compilação para nativo, como esbuild.
Teremos uma execução e atualização mais rápida no ng serve ao usar a configuração abaixo ou no angular 16.1 ng serve --force-esbuild.

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "forceEsbuild": true,
  }
},

Hidratação não destrutiva

Já disponível há algum tempo no Next.js, a hidratação no desenvolvimento da Web refere-se ao processo de conversão de conteúdo HTML renderizado do lado do servidor em uma página da Web totalmente interativa e funcional no lado do cliente, anexando comportamento JavaScript e ouvintes de evento. Isso reduz o tempo de interação. Documentação para implementação.

Signals

São uma nova maneira de gerenciar mudanças de estado em aplicativos Angular, inspirados no Solid.js.

É poderoso como o RxJS, mas com uma sintaxe mais simples. As assinaturas são criadas e destruídas automaticamente, então ao contrário do RxJS, não precisamos inscrever e cancelar a inscrição.

Graças ao Signals, podemos usar o Angular sem zone.js, que não possui uma boa performance.

const counter = signal(0);

counter.set(2);
counter.update(count => count + 1);

Testes

Por padrão o Angular sempre utilizou o framework de testes Jasmine com o executor Karma, que utiliza um navegador real. Agora há o suporte experimental para o Jest, que possui execução direta no Node sem usar um navegador real e por isso tem um desempenho melhor. É necessário uma modificação do arquivo angular.json para substituir o framework de testes para Jest.

{ 
  "projects" :  { 
    "my-app" :  { 
      "architect" :  { 
        "test" :  { 
          "builder" :  "@angular-devkit/build-angular:jest" , 
          "options" :  { 
            "tsConfig" :  " tsconfig.spec.json " , 
            "polyfills" :  [ "zone.js" ,  "zone.js/testing" ] 
          }
        } 
      } 
    }
  } 
}

A equipe do Angular ainda vê valor em testes baseados em navegador (como o Jasmine). Foi adicionado o Web Test Runner para substituir o executor de testes Karma, integrado com o Jasmine. Você pode executar ng update para migrar os testes Karma existentes para o Web Test Runner.

NgOptimizedImage

Do Angular 15, mas inclui por ainda não ser tão conhecido.
Essa diretiva é responsável por implementar as melhores práticas de desempenho ao carregar imagens.

import { NgOptimizedImage } from '@angular/common'

<img ngSrc="cat.jpg">

Observação

Temos visto nas últimas versões do Angular uma buscar em diminuir a curva de aprendizagem e grandes melhorias de performance. Pontos que eram muito mais fortes no React.

Confira também meu artigo sobre componentes autônomos.

Next 13

React Server Components

O Next 13 possui a pasta /app, que diferente da /pages, os componentes dentro dela são React Server Components por padrão.
Combinando a interatividade dos aplicativos do lado do cliente com o desempenho aprimorado da renderização tradicional do servidor.
Os layouts nessa pasta permanecem interativos e não são renderizados novamente ao navegar entre várias páginas. Estável a partir da versão 13.4.
Doc migração pages para app.

Turbopack

A Vercel, mantenedora do Next.js, afirmou que, em aplicativos de grande escala, o Turbopack, escrito em Rust, atualiza 10 vezes mais rápido que o Vite e 700 vezes mais rápido que o Webpack.
Ainda na versão beta, é necessário iniciar o servidor com a flag next dev --turbo

Componente de imagem
Agora o componente usa carregamento lento em vez de hidratação, tornando os tempos de carregamento mais rápidos e envia menos JavaScript do lado do cliente.

import Image from 'next/image'

const Example = () => (
  <div className="grid-element">
    <Image
      src="/example.png"
      fill
    />
  </div>
)

Otimização de fontes

Otimizará automaticamente suas fontes (incluindo fontes personalizadas) e removerá solicitações de rede externa para melhorar a privacidade e o desempenho.

// pages/index.js
import { Inter } from 'next/font/google'
import styles from '../styles/component.module.css'

const inter = Inter({
  variable: '--inter-font',
})

/* styles/component.module.css */
.text {
  font-family: var(--inter-font);
  font-weight: 200;
  font-style: italic;
}

Node 20

Atualização da engine V8 para 11.3, parte do Chromium 113, trazendo melhor desempenho e novos recursos de linguagem.
Melhorias no tempo de tempo de execução em URL, fetch()e EventTarget. Além disso, o pacote inclui o lançamento de um analisador de URL de alto desempenho: Ada 2.0, escrito em C++.

Angular standalone components

Raphael Ramos — Fri, 14 Apr 2023 21:15:57 +0000

Vídeo desenvolvendo na prática:

A estrutura do Angular é baseada em componentes.
Os Componentes são partes de interface. Blocos compostos por um template, um estilo e uma classe.

Antes do Angular 14 era necessário um módulo, que é um mecanismo para agrupar components, directives, pipes e services relacionados.

Mas agora com as APIs do standalone components, pode ser totalmente independente, deixando NgModule opcional, o que torna a criação de aplicativos Angular mais simplificada.

Os módulos não foram descontinuados e ainda podem ser usados. Inclusive é possível usar componentes com módulos e sem na mesma aplicação.
Eu tenho criados novos componentes das aplicações com essa API, mas ainda não migrei as anteriores.

Etapas executas no vídeo:

Criamos o projeto

ng new angular-standalone

Criamos o componente verses passando a flag --standalone

ng generate component verses --standalone

Ao usar a flag, foi criado nosso componente sem o arquivo de módulos e com o sinalizador standalone: true e imports dentro do arquivo de componente.

@Component({
  selector: 'app-verses',
  standalone: true,
  imports: [CommonModule],
  providers: [],
  templateUrl: './verses.component.html',
  styleUrls: ['./verses.component.css']
})

Também criamos o serviço chamado verses na mesma pasta para consumo da API

ng generate service verses/verses

@Injectable({
  providedIn: 'root'
})
export class VersesService {

  constructor(private httpClient: HttpClient) { }

  getVerse(): Observable<Verse> {
    return this.httpClient.get<Verse>('https://www.abibliadigital.com.br/api/verses/nvi/sl/23').pipe(take(1));
  }
}

Vamos adicionar o serviço e modulo HttpClientModule no nosso componente

@Component({
  selector: 'app-verses',
  standalone: true,
  imports: [CommonModule, HttpClientModule],
  providers: [VersesService],
  templateUrl: './verses.component.html',
  styleUrls: ['./verses.component.css']
})

Para carregar a rota desse componente em lazy loading, o que faz carregar apenas ao acessar a rota, usamos o loadComponent;

{
    path: '',
    title: 'Verses',
    loadComponent: () => import('./verses/verses.component')
    .then(c => c.VersesComponent)
  }

Se você está em uma versão do Angular anterior a 13, recomendo o upgrade devido a ganhos de performance que essa versão traz.
Na versão 14 foi introduzido principalmente o standalone components, e se tornou estável na versão 15.

GitHub Projeto

Como se tornar um desenvolvedor

Raphael Ramos — Fri, 14 Apr 2023 19:55:39 +0000

O desenvolvedor é um profissional programador, que escreve softwares, envolvido com o projeto do início ao fim.

Confira algumas dicas para você que está iniciando na área.

Estudos - Vagas - Dúvidas Frequentes

Estudos

Aprenda a diferença entre as carreiras
Qual a diferença entre Front-end e Back-end? E o que são DevOps e Cientista de dados?

Você precisa, antes de tudo, saber responder essas perguntas e é possível encontrar artigos na internet e vídeos no YouTube sobre isso.

Há também os profissionais de UI/UX e QA, que não estão tão ligados à programação e não iremos falar sobre eles, mas podem fazer parte dos projetos e você precisa conhecer suas funções.

Links:
Diferença Front-end e Back-end
DevOps
Cientista de dados

Escolha uma carreira
Agora que você sabe as diferenças, deve escolher em qual vai começar a sua carreira.
Dica: Confira se você se empolga mais com a parte visual, com a parte funcional ou como tudo isso consegue ficar na nuvem.

Aprenda lógica de programação
Mais uma vez, há muito conteúdo na internet sobre isso. Sem entender a lógica, você não vai conseguir codificar.

Links:
Fundamentos para Desenvolvimento de Software
Como Funcionam as linguagens
Como melhorar minha lógica de programação?
Algoritmos e lógica de programação

Defina sua stack principal baseado na carreira que vai seguir
Agora que você entende sobre as carreiras e também tem noção de lógica de programação, vamos para as linguagens.

É importante essa definição para saber onde começar seus estudos, já que há várias linguagens. Dentro da sua Stack, escolha quais linguagens que irá aprender primeiro, que serão suas hard skills.

Desenvolvedores não são todos iguais e não sabem tudo. Há várias stacks. Assim como, por exemplo, temos médicos ortopedistas, cardiologistas, pediátricos...

Para front-end, você deve saber a linguaguem JavaScript / Typescript.
No caso do front-end é necessário aprender também HTML e CSS para fazer a parte visual (HTML e CSS não são linguagens de programação).

Obs: JavaScript e Java são linguagens diferentes e não tem ligação.

Mobile, você pode escolher entre Java/Kotlin (Android), Swift (iOS) e as multi-plataforma ou híbridas como Flutter/Dart, React Native e Ionic.

Back-end pode ser entre JavaScript, Java, C#, PHP, Go, Rust (e várias outras existentes). Também inclui bancos de dados como MySQL, postgreSQL, Oracle...

Vou deixar o link para o ranking das principais usadas em 2022 segundo o GitHub. Dê preferência às que são mais usadas ou as que estão em crescimento.

Listei alguns exemplos aqui, mas pesquise, passe tempo no Google, Youtube e converse com conhecidos da área.

Obs: Posições somente front-end tem se tornado menores, devido uma buscar maior para full-stack, mas no começo foque em aprender apenas um e depois você amplia seu escopo de estudos.

Mais importante que a linguagem é a implementação. Em certas coisas não há grande diferença de performance, depende mais do que o projeto precisa.

Links:
Ranking GitHub linguagens
Stack Tecnológico

Ainda não sei com o que começar
Se você chegou nessa parte sem saber com qual Stack começar, eu sempre digo, apenas comece e não demore.
Depois que você aprendeu o mínimo de lógica e uma linguagem, é mais fácil mudar para outra.

As escolha da sua linguagem principal depende muito da área que você deseja trabalhar, como front-end, back-end, mobile, devops, dados.
Você pode começar com JavaScript, se ainda não sabe o que quer e migrar depois.

Links:
Comece do 0 com JavaScript - Rocketseat discovery gratuito
Curso gratuito HTML5, CSS3 e JavaScript
Outros cursos gratuitos na Udemy

Procure um roadmap de estudos ou um curso completo do básico ao avançado
Não saia estudando aleatoriamente, tenha um plano de estudos. Não adianta você ter apenas um pouco de conhecimento de várias coisas, você precisa ser bom em algo. Tenha em mente que se você não está disposto a estudar algumas horas por dia, entrar na área a curto prazo não é para você.

Exemplos de plataformas de cursos: rocketseat, alura, dio e udemy.
Exemplos de faculdades EAD: descomplica, fiap.

Crie projetos com o que você aprendeu e coloque-os no GitHub
O GitHub será o seu portfólio, principalmente para você que está começando e não tem experiência em empresas para contar. Além disso, é requisito saber git para trabalhar como desenvolvedor.

Crie um bom README para eles, pois isso é muito importante e é a primeira coisa que vemos assim que abrimos o repositório. Informe o que o projeto faz, as stacks usadas e como executar.

Obs: Faculdade sozinha não te prepara para o mercado atual.
Você precisa estudar além.

Links:
Guia extenso de informações
Curso de Git & GitHub para completos iniciantes

Procure saber sobre o Scrum
Scrum é uma metodologia de trabalho ágil muito utilizada. Conhecer dará a você vantagem na entrevista e não deixará você perdido nas cerimônias quando começar a trabalhar.

Links:
Resumo sobre Scrum
Processo desenvolvimento de software

Vagas

Crie seu perfil no LinkedIn
O LinkedIn é uma rede social profissional onde as pessoas compartilham informações profissionais e relacionadas ao seu trabalho, permitindo também que você siga colegas de trabalho e pessoas influentes em sua área.

O perfil do LinkedIn funciona como um currículo, onde você pode indicar a empresa em que trabalha, suas experiências anteriores, sua formação, seus certificados e suas habilidades.

Dicas para o seu perfil:
Crie sua URL personalizada com algo próximo ao seu nome.

Evite selfies e escolha uma foto com boa iluminação e fundo clean.

Em Sobre, coloque suas habilidades e quanto tempo trabalha com elas.

Currículo
Atualmente o LinkedIn é a ferramenta mais importante para currículo de Devs, mas algumas empresas podem solicitar um PDF, então é importante tê-lo também.

Descreva detalhado as tecnologias em que já atuou, por exemplo, ao invés de colocar apenas Javascript, insira se foi com Angular, React ou outro. E nas experiências profissionais também descreva o setor do produto em que trabalhou, como logística, finanças, varejo...

Na seção pessoal do seu PDF, as únicas informações necessárias são seu nome completo, e-mail, telefone, cidade e os links para seu perfil do LinkedIn e GitHub.

Links:
Como exportar o LinkedIn em PDF

Candidate-se a vagas
Há alguns sites para procurar vagas, como o LinkedIn, portal de vagas do Gupy e o próprio da empresa.

Pesquise as vagas por sua principal stack, por exemplo, Java. Confirme a senioridade no título da vaga se é compatível com a sua: JR, PL, SR e confirme também se possui os requisitos obrigatórios.

Porém sites de candidatura rápida, como LinkedIn e Gupy você concorre com muitas candidaturas e seu curriculo pode nem ser visualizado. Conseguindo uma indicação interna de um funcionário ou contato direto com o recrutador, suas chances são muito maiores.

É esperado que o júnior já tenha um bom conhecimento, mesmo que precise de ajuda em algumas coisas. Quem não tem é estagiário.

Dica extra: Glassdoor é um site onde você encontra avaliações de empresas informadas de forma anônima por funcionários e seus salários.

Processo de entrevistas
O processo varia entre empresas, mas geralmente são 3 etapas.

O recrutador entrará em contato para uma entrevista para verificar se você realmente possui todos os requisitos e falar sobre a vaga e a empresa. Nessa etapa, você pode tirar dúvidas sobre a empresa e a faixa salarial.

Se continuar, agora é o momento da entrevista técnica ou teste. Na entrevista técnica um profissional da área fará perguntas técnicas dentro da vaga. Você não precisa saber tudo o que ele perguntar, pois será avaliado no geral. Vá sem medo, mesmo que você não passe, terá mais noção do que estudar.

Quando há um teste técnico, pode ser por desafio, onde você desenvolve e envia depois o repositório no github ou o menos comum que é live coding, onde sua tela é compartilhada e vai desenvolvendo ao vivo o que é proposto.

Se der continuidade, agora é o momento de entrevista com o gestor do time. O gestor irá te fazer perguntas sobre sua experiência e como lida com algumas situações.

Em empresas como consultorias, você não vai trabalhar em um produto dela e sim no de um cliente que é outra empresa. Você será um consultor de uma empresa dentro de outra.

Para cada etapa o recrutador irá te mandar um invite por email, onde haverá a data/horário e um link para você participar. O atraso pode acabar com a sua chance, por isso, entre antes.

Use uma ferramenta de anotações para te ajudar a estudar e decorar os conceitos das linguagens e ferramentas.
Como usar o Notion.

Dicas Extras:
Digas na entrevista os cursos que você está fazendo e os projetos que já desenvolveu, mesmo que em estudos.

Saiba se virar e pesquisar! Você não precisa saber tudo, nem os sênior sabem tudo. Mas não conte com a empresa para te treinar, no máximo te oferecem acesso a uma plataforma de cursos. Apesar de poder contar com a ajuda dos seus colegas, eles têm as tarefas deles e não podem ser chamados a todo instante.

Candidate no máximo de vagas que conseguir da sua senioridade e skills.

Informações do Mercado

Dúvidas Frequentes

Todos pedem experiencia
Se você não tem experiência ou portfólio, dificilmente vai conseguir o primeiro emprego.
Gestores técnicos não estão muito interessados na sua faculdade e cursos, mas no que você já desenvolveu.
Algumas empresas podem considerar o portfólio para quem não tem experiencia.

Em 2023 o mercado passou ser mais exigente e ter menos vagas para Júnior.

Pare de apenas estudar e crie algo!

Como vou saber se já estou preparado para procurar uma vaga como júnior?
Uma maneira de você saber é se já conseguiu criar algo, mesmo que simples, mas funcional e publicou em um repositório git.
Também saber os conceitos básicos da linguagem da vaga, já que vão te perguntar na entrevista técnica. É possível encontrar exemplos dessas perguntas de entrevistas na internet.

Qual o salário de um Júnior?
Salários variam levando em consideração stacks (tecnologias), empresas, cidade, experiência.

Encontramos a média salarial de um júnior entre R$3.000 a R$4.000 e pleno entre R$6.500 a R$8.000. Sênior R$10.000 a R$12.000, porém o sênior pode ter um salário maior ainda, se tiver muitos anos de experiência comprovada, trabalhar com linguagens mais complexas, conhecimento em devops, inglês avançado, liderança, etc.

Cada empresa possui sua política salarial, podendo esses valores serem menores.
Pesquisa de salários do canal Código Fonte

Consigo entrar no mercado em 6 meses?
Eu diria que para o que o mercado atual espera, não. Se você tiver um plano de estudos organizado e dispor de tempo considerável diariamente, deve ser possível em menos de um ano. Mas é necessário disciplina, pois é muito conteúdo em pouco tempo e você precisa ter colocado em prática, mesmo que em projetos pessoais para estudos.

Hoje as empresas exigem mais conhecimento do que há alguns anos, sendo necessário mais estudo inicial.

Disclaimer: É uma área geralmente com bons salários, mas alto salário no primeiro emprego, sem experiência e com poucos meses de estudos, não existe atualmente. Há uma falsa divulgação sobre isso, colocando salário de pleno como sendo para júnior iniciante.

Altos salários para Júnior seria em vagas internacionais, mas mesmo já possuindo um bom inglês, eles procuram um Júnior que já tenha experiência.

Preciso de faculdade?
Resumindo: Depende.

Para ser desenvolvedor não é necessário graduação na área, então depende de a empresa exigir ou não. Há vagas que não exigem, apenas conhecimento equivalente, mas há empresas que colocam como requisito obrigatório completo ou cursando.
Conheço excelentes desenvolvedores que nunca estiveram em uma faculdade, então é mais pelo requisito da vaga e seu plano de carreira. Já para cargos de gestão vai ser mais difícil fugir da faculdade.

A faculdade não é algo supervalorizado, até porque diploma não comprova conhecimento, mas isso não torna ela desnecessária. Você vai aprender fundamentos da computação que não verá em cursos de linguagens. Para quem me pede meu conselho eu respondo: faça. Mas também escolha uma tecnologia e aprenda simultâneo. Você não vai sair da faculdade codando bem somente com ela. E também não espere a faculdade concluir para procurar sua primeira vaga.

O que são as certificações?
Há também as certificações que você obtém realizando uma prova elaborada pela empresa desenvolvedora da tecnologia.

Você não precisa ter feito faculdade para realizar essas provas, que são na maioria pagas e avançadas, e é um incremento muito alto para seu currículo.

Essas certificações demonstram que a pessoa tem conhecimento avançado naquela Stack.
Ex: AWS Certified Solutions Architect – Professional

Preciso saber inglês?
Para ser um desenvolvedor você precisa de inglês básico, já que as linguagens de programação e suas documentações são em inglês.

Já para vagas em que parte do time ou o cliente está no exterior, o inglês avançado será necessário, já que há conversação.

Mas claro, há relatos de vagas que pediram inglês e o profissional nunca usou. Há empresas que enchem muito os requisitos.

Posso ser Full Stack?
O desenvolvedor full Stack é o profissional que cobre várias áreas por trabalhar com mais tecnologias, desenvolvendo a aplicação de ponta a ponta, podendo ser front-end e back-end ao mesmo tempo.

O full stack é um dos cargos mais procurados por empresas no Brasil.

Porém, não indico no começo, por ter um escopo muito maior para estudos e experiências.

Um canal para você
Estou começando um canal no Youtube sobre a área e mercado. Inscrever

Diferença entre PJ e Cooperado
Como PJ você vai precisar ter um CPNJ ME para emitir uma nota fiscal para os pagamentos e pagar os impostos (depende do faturamento, mas cerca de 10%).
Sem emitir nota fiscal, não te pagam.

Como cooperado você não tem essa responsabilidade, a empresa faz todo tramite e cobra de você uma porcentagem para isso. Fora isso é como ser um PJ.

Obs: A atividade de desenvolvedor não se enquadra como MEI e a empresa pode não aceitar. Nesse caso pode ser que você precise de um contador para abrir um ME.

PJ ganha mais que CLT?
A remuneração das vagas, mesmo que tenha os mesmos requisitos, tem variação entre empresas e o PJ de uma pode ficar próximo ao CLT de outra, em alguns casos.
Deveria ser maior, mas não vemos muito isso.

Vale destacar que em muitas é pago por hora, ao invés de valor fechado. Quando é por hora, há meses que você irá receber menos, por haver menos dias e feriados.

Como me preparar para um layoff?
As demissões em massa têm sido comuns em empresas de tecnologias e apesar da recolocação não ser muito demorada, pode acontecer. É importante que você tenha uma reserva em dinheiro para sobreviver um tempo, principalmente se for PJ ou cooperado, onde você recebe apenas as horas que já trabalhou. Pode ser um erro gastar totalmente o que ganha sem uma reserva.

Trabalhe também na sua marca pessoal, estudando coisas novas, criando projetos pessoais, escrevendo artigos e participando de comunidades.

Qualidades de um Dev
Você não precisa saber tudo, mas precisa saber se virar!
Além do conhecimento técnico precisamos falar das soft skills. Ter uma boa comunicação e ir atrás de conhecimento quando não souber, ao invés de ficar parado ou esperar que alguém com senioridade maior resolva.

Se manter na área
Na área de programação não é só complicado entrar, também é se manter.

Novas tecnologias surgem sempre e você vai pegar projetos em que há ferramentas que não conhece, mesmo com anos de experiência.
Ou seja, terá que estudar para sempre para se manter.

Siga pessoas da área que falem sobre o assunto nas suas redes sociais, é uma maneira de ficar conectado também. Comece me acompanhando.
LinkedIn
YouTube
Instagram
Twitter
GitHub