Logo

Sistema Completo

Like a Boss

Sumário

Introdução

Aqui tem 3 estratégias diferentes para sua evolução e seu portfólio. Mas o ponto é: tenha um projeto principal forte, que se destaca.
Prefira ir pelo caminho Balanceado, mas se tiver com muita pressa, vá pelo MVP.
O que proponho aqui é realmente demorado. O caminho balanceado deve demorar alguns anos. Mas não significa que você precisa dominar tudo completamente. Eu mesmo não possuo todas as habilidades do perfil balanceado.
O mercado de desenvolvimento é difícil para iniciantes.

Marque na última seção todas as funcionalidades que você se sente confiante em implementar.

Use a última seção como inspiração de coisas a colocar na sua aplicação.
Busque crescer sua aplicação colocando coisas novas, melhore as existentes apenas após já ter muitas funcionalidades feitas.

Alternativamente, também recomendamos participar do nosso projeto Mural, que proporciona uma experiência real de desenvolvimento de software, conectando você com um projeto mais parecido com projetos que você vai encontrar no mercado de trabalho.
Repositório Mural

Pré-requisitos

Todos os módulos anteriores são pré-requisitos deste módulo.

Meta de tempo de estudos

  • TODO

Sugestão de recursos para estudo

  • TODO

MVP - Mínimo Produto Viável

Esse projeto é para quem quer adquirir as habilidades de desenvolvimento o mais rápido possível.
Grave sua jornada em vídeos ou textos para praticar a escrita técnica, mesmo que não vá publicar.

  1. Segunda linguagem

    2. Usar NodeJS para o backend é uma opção. Mas por que não aprender uma segunda? Melhora seu currículo. E o que você vai aprender com ela é um conhecimento que você vai carregar caso volte para o NodeJS no futuro.
    Escolha uma das linguagens a seguir: C#, Java, PHP ou Python.

    Tá em dúvida? Procure saber quais outras atividades essas linguagens são boas além de desenvolvimento web e veja com o que você se identifica mais. Por exemplo: C# é usado para jogos, Java é usado para desenvolver aplicativos Android, PHP é realmente focada em web e Python é usado para ciência de dados.

    Durante o processo de familiarização com a linguagem escolhida, você deve implementar testes unitários para os códigos que está escrevendo.
    Escolha uma ferramenta de teste unitário e utilize os projetos de aprofundamento 2 e 3 do terceiro módulo como conteúdo para o estudo da nova linguagem.

  2. Framework Backend

    3. Aprenda o framework indicado: .NET para C#, Spring Boot para Java, Laravel para PHP e Django para Python.
    Todos eles são altamentes produtivos e possuem a maior quantidade de vagas de trabalho.
    Todos eles possuem alguma desvantagem, mas apenas escolha um e vá até o fim.

    • Baixe o repositório correspondente ao seu framework em CodebaseShow e se ambiente minimamente ao código;
    • Entre na documentação oficial do framework e leia o máximo possível;
    • Reproduza alguns dos exemplos mostrados;
    • Reproduza algum tutorial;
    • Estude o código do próprio framework.
      Escolha algum conceito apresentado pela documentação (ex: o ciclo de vida de uma requisição) e procure no código do framework onde e como aquele comportamento foi programado.
  3. Framework Frontend

    4. Aprenda ReactJS. Essa tecnologia realmente domina o mercado.
    Apesar de outros frameworks também possuirem vagas e terem seus pontos positivos (ou simplesmente serem melhores que React), você tem mais chances com ele.
    A abordagem de estudos deve ser basicamente a mesma, exceto pela recomendação em aprender Typescript.
    Typescript basicamente é Javascript com algumas funcionalidades a mais.
    Ela está presente na maior parte dos projetos e depois de aprendê-lo com React, não será difícil usar somente Javascript se necessário.

    • Confira codebases de exemplo que selecionamos;
    • Aprenda Typescript;
    • Baixe um repositório ReactJS com Typescript em CodebaseShow e se ambiente minimamente ao código;
    • Entre na documentação oficial do framework e leia o máximo possível;
    • Reproduza alguns dos exemplos mostrados;
    • Reproduza algum tutorial.
  4. Adicionar novas funcionalidades a um software já existente:

    5. É aqui o ápice da Trilha de Estudos.
    Se você ainda não grava vídeos ou escreve sobre os seus estudos, fortemente recomendo que comece agora. Não apenas pessoas que podem te contratar saberão sobre você, mas também irá conseguir experiência para falar sobre assuntos técnicos.
    Quase como se você estivesse se preparando para uma entrevista.
    Em uma entrevista vão te fazer perguntas difíceis. Treine com pessoas reais nas redes sociais.
    Dê seu melhor criando um software que vá impressionar um recrutador.

    • Baixar repositórios em CodebaseShow;
    • frontend em ReactJS;
    • backend em um framework opinativo, como: .NET, Laravel, Django, Spring Boot;
    • melhorar a responsividade;
    • testes automatizados (se o projeto não tiver, começar do zero);
    • login social;
    • filtros, ordenação, paginação;
    • relatórios;
    • variáveis de ambiente e docker;
    • README detalhado e demo online;
    • níveis de acesso e preferências do administrador;
    • websockets - comunicação de duas vias;
    • notificações integradas e/ou por emails;
    • versão paga com período de testes.
  5. Pratique responder às perguntas comuns de entrevistas de emprego;
  6. Anuncie que está buscando um emprego e candidate-se;

Balanceado

Esse projeto é para quem quer adquirir as habilidades forma balanceada, sabendo um pouco de tudo. Grave sua jornada em vídeos ou textos para praticar a escrita técnica, mesmo que não vá publicar.

  • Entendimento básico do que faz e pra que serve cada uma das tecnologias relacionadas com WEB;
  • Mais importante que aprender ferramentas, é estudar os fundamentos:
    • Depois de estudar os fundamentos, aprendar qualquer ferramenta ou tecnologia vai ser fácil.
  • Implementar o software Conduit (Real World) do zero:
    • no máximo um framework leve como Slim ou Flask no backend ou nenhum framework;
    • refaça o projeto agora usando um framework opinativo, como os citados acima;
    • todas as funcionalidades do MVP e mais algumas que escolher na última seção;
  • Pratique responder às perguntas comuns de entrevistas de emprego;
  • Anuncie que está buscando um emprego e candidate-se;
  • Implementar um Visualizador de Algoritmos e Estruturas de Dados;
  • Criar um Web Scrapper (dá pra colocar bastante complexidade);
  • Datatables, date/range picker, telephone picker, fullcalendar;
  • Escolher um software Open Source e adicionar novas funcionalidades, mesmo que não vá fazer um pull request;
  • Desenvolva plugins de softwares como: Wordpress, Magento, Jira, Odoo, Zoho, Salesforce;
  • Faça algum sistema com mais pessoas.

Expert

Você quer ser um expert, implementar e saber profundamente de tudo.
A pergunta que fica é: por que?

  • Fazer e aprimorar tudo do perfil balanceado;
  • Entrar na programação competitiva;
  • Construir softwares usando:
    • no frontend: ReactJS, Angular, VueJS, Svelte, HTMX, AlpineJS, jQuery, React Native, ElectronJS, Flutter, Swift, Kotlin;
    • mais 30 outros frameworks frontend;
    • no backend: C#, Java, Go, Python, PHP, Ruby, Rust, Node.JS, Elixir, Swift, Kotlin;
    • implementar utilizando frameworks lightweight e opinionated;
    • NextJS, SvelteKit e Remix;
  • Domínio da AWS, Azure, GCP, DigitalOcean, Firebase, Supabase;
  • Domínio de ferramentas e técnicas de infraestrutura, segurança, monitoramento e operações;
  • Construir plugins de softwares de todas as siglas como CRM, ERP, CMS;
  • Construir: linguagem de programação, compilador, runtime, virtual machine, kernel, shell, Git, http server e client, SQLite, interface gráfica, navegador, IDE, jogo, ecommerce, ERP, CRM, SaaS, integração com a SEFAZ (gerar e baixar);
  • Explorar outras linguagens: C, C++, Lua, Zig, Haskell, Erlang;
  • Mais linguagens: OCaml, Odin, Clojure, Lisp, Matlab, Visual Basic, Delphi, Assembly;
  • Isso tudo vai demorar uns 80 anos pra fazer, mas vale a pena.

Lista de funcionalidades

Utilize essa lista de funcionalidades como uma fonte de ideias e inspiração de funcionalidades a serem desenvolvidas para seu portfólio. Busque crescer a sua aplicação com novas funcionalidades em vez de novas entidades e cadastros.

Essa listagem também é útil para avaliar a maturidade como desenvolvedor que você possui. Marque os checkboxes de funcionalidades que você já implementou ou que se sente confiante de desenvolver.

De forma alguma você precisa dominar todas essas funcionalidades para ser um profissional viável ao mercado. Eu mesmo, com vários anos de experiência, não marco todas elas.

Um estagiário marca em torno de 7 funcionalidades.
Um junior marca em torno de 15 funcionalidades.
Um pleno marca em torno de 30 funcionalidades.
Um senior marca mais do que 45 funcionalidades.

0/57 funcionalidades selecionadas

Criar CRUDs geralmente é uma tarefa repetitiva. E fazer muitos deles em um só projeto te trará pouco conhecimento diverso. É possível construir uma aplicação interessante que possua tão poucas entidades quanto apenas cinco e que por consequência, você demorará menos tempo para executá-la.

Seu projeto deve ter um banco de dados. Se você não consegue trabalhar com um banco de dados, provavelmente não será visto nem como um "Júnior". Praticamente todos os projetos profissionais possuem algum tipo de banco de dados.

Ter a funcionalidade de Cadastro e Login é praticamente indispensável para qualquer aplicação. Seu sistema deve garantir que pessoas que não possuem cadastro não façam alterações em quaisquers dados que o sistema possua.

Faça uma interface bonita, limpa, amigável e responsiva. As pessoas compram o livro pela capa. Frequentemente pensarão que se a interface é boa, certamente o código também é. Frameworks CSS como Bootstrap, TailwindCSS, Materialize ou Bulma são boas o suficiente.

A maior parte do tráfego da internet é feita por dispositivos móveis. Tenha certeza de que sua interface está bem montada para smartphones.

Demonstra a sua capacidade técnica de exibir dados de maneira clara e concisa. Permita que o usuário possa filtrar o relatório de acordo com alguns dos dados ou por período de tempo.

Muitas vezes rodamos o nosso sistema em ambientes diferentes. Ter um arquivo de configuração de variáveis é muito útil para qualquer um poder alterar alguma configuração (como as credenciais de um banco de dados ou de uma API) sem ter que alterar o código diretamente.

É comum que as aplicações que construímos possuam vários passos de instalação. Além disso, ela depende de linguagens e bibliotecas em versões específicas para funcionar corretamente. Muitas das vezes, possuímos instalados uma versão diferente da correta e instalar mais de uma versão nem sempre é simples. Containerizar sua aplicação utilizando Docker, por exemplo, te auxilia em automatizar o passo a passo de configuração/instalação e também garante que as versões corretas sejam utilizadas, sem a necessidade de instalar ou alterar a versão de cada uma das dependências do código.

Além disso, você dificilmente achará uma empresa que não usa esse tipo de ferramenta e esse é o tipo de tecnologia do dia-a-dia das empresas que ninguém quer perder tempo te ensinando.

A primeira coisa que alguém interessado no seu código vai olhar é o README do repositório. Esse README deve conter informações sobre o projeto como o objetivo, as tecnologias usadas e como executá-lo.

Se você está demonstrando o seu projeto a um recrutador, certamente quer facilitar a vida dele. Faça o seu sistema estar disponível em algum endereço na internet e inclua o link no seu README.

Organize seu código usando os princípios de design e arquitetura. Empresas possuem padrões de estilo e estrutura baseado no conhecimento acumulado da indústria. Assim, garantem que não importa que alguns desenvolvedores saiam ou entrem, eles possuem uma base de código consistente e fácil de expandir, debugar ou consultar. Se seu código não possui uma estrutura clara e organizada, você irá passar a impressão de que é mais "Júnior" do que realmente é.

Felizmente, o oposto é verdade, se seu projeto segue um bom padrão de design e arquitetura, ele passará a impressão de que você é mais "Senior" do que realmente é. Grande parte dos projetos modernos usam o MVC e mesmo que a empresa em particular use uma arquitetura diferente, eles irão estar confiantes que você poderá se adaptar.

Crie um sistema que apenas pessoas autorizadas tenham acesso a ele. E mais, faça que algumas funções sejam acessíveis apenas por um grupo, como Administradores.

Seu software deve possuir uma página em que os usuários possam personalizar o comportamento da aplicação. Caso seja uma configuração do Admin, deve refletir a todos os usuários. Por outro lado, as configurações do usuário, devem ser aplicadas apenas aquele único usuário.

Tenha um sistema de notificações dentro do seu sistema, semelhante a notificações de redes sociais. Mas também envie e-mails de notificação. Possibilite o usuário personalizar as notificações que deseje receber.

Multi-tenancy é a capacidade do seu sistema de separar os dados de forma de que cada usuário possa ler e alterar apenas os dados referentes à sua própria conta. Isso pode acontecer não apenas no nível de usuário, mas também em um nível acima, como empresas ou projetos, onde os usuários poderão ver informações apenas da empresa que ele está associado.

A multi-tenancy ser "shared" significa que os dados estão todos em um mesmo banco de dados. Uma outra forma de atingir esse isolamento de dados é colocá-los em bancos de dados separados. Isso é chamado de "isolated multi-tenancy". É possível ainda fazer de forma híbrida, tendo alguns dados compartilhado no mesmo banco de dados, enquanto outros estão em outro banco de dados.

O envio de arquivo para um sistema é muito comum e pode ser a parte central do modelo de negócios. É possível fazer essa funcionalidade utilizando o seu próprio servidor. Contudo, é comum usar um serviço apropriado para a tarefa, já que fazer upload no mesmo servidor da aplicação pode comprometer seu desempenho. Podemos usar serviço de hospedagem de arquivos como o AWS S3 para fazer o upload diretamente a ele.

Crie testes unitários no front-end e no back-end. De preferência, também testes de integração. Mesmo que os testes automatizados possam parecer um obstáculo ou um peso na progressão do projeto, eles aumentam a qualidade geral do sistema e você irá ganhar pontos pelo profissionalismo. Melhor ainda: a empresa contratante estará tranquila de que você entende a importância dos testes e como escrevê-los.

Faça seu sistema se comunicar com alguma API externa, mesmo que simples, como uma previsão do tempo. Você pode encontrar uma lista de APIs públicas em: https://github.com/public-apis/public-apis.

Uma landing page é o primeiro contato de um cliente em potencial com o seu sistema. Ela deve ser estruturada para convencer o usuário a adquirir ou assinar o seu produto.

Isso demonstra que você pode integrar com um sistema de pagamentos. E é bem comum ter uma integração de pagamentos em softwares corporativos. Além disso, isso pode te servir como um grande argumento no momento da entrevista. Todo mundo gosta de dinheiro.

Além da integração de pagamentos, ter um período de testes demonstra sua competência em executar scripts agendados (crontab por exemplo).

Colocar um software em produção envolve muitas etapas que podem falhar se realizadas de forma errada. Portanto, ter esse processo automatizado é fundamental em qualquer produto para evitar que ele esteja fora do ar e por diminuir o tempo que este processo demora.

Caches melhoram a experiência do usuário e economizam recursos. Caches podem existir em locais diferentes: no client, no server ou ainda ser distribuído (CDN).

É comum que clientes desejem consultar ou manipular seus dados utilizando um software de planilha.

É possível gerar PDFs no front ou no back e esta é uma funcionalidade comum e desejada pelos usuários.

Também conhecido como SPA, é um site que não realiza uma atualização completa do seu conteúdo. Após carregado pela primeira vez, o conteúdo é alterado dinamicamente sem a necessidade de mudar de página. Apesar de ser possível atingir esse objetivo utilizando apenas Javascript, em geral usamos frameworks para tal, como React, Angular, etc. SPAs proporcionam uma melhor experiência ao usuário e são a escolha comum na maior parte do sistemas corporativos.

É comum que o Javascript faça o trabalho de renderizar os elementos da interface. Porém esse trabalho também pode ser feito pelo backend que retornará ao frontend o que deverá ser exibido na tela, diminuindo o processamento dentro do navegador. Essa abordagem trás benefícios como uma performance maior e facilita o trabalho dos serviços de busca como o Google.

O jeito mais comum de desenvolver um sistema web é fazendo requisições HTTP. Porém este modelo é unidirecional, ou seja, o client deve enviar um pedido para que o servidor responda com algum dado, e o servidor não pode enviar dados sem que o client faça essa requisição.

Para possibilitar aplicações como chats, notificações e outros, deve usar um protocolo que permita a comunicação de duas vias. A forma mais utilizada é chamada de Websockets.

Faça uma aplicação que utilize desse protocolo. Uma outra ideia é atualizar os dados de uma tabela em qualquer client aberto assim que um registro for adicionado, removido ou alterado.

Crie uma documentação dos endpoints da sua API. Essa documentação deve conter as informações necessárias para um desenvolvedor utilizar a API para criar seu próprio client.

Exemplo: https://realworld-docs.netlify.app/docs/specs/backend-specs/endpoints.

Acessibilidade refere-se à capacidade do conteúdo de um website ser consumido por pessoas com deficiência.

Utilize ferramentas como o accessibilitychecker.org que avaliam o nível de acessibilidade da sua aplicação.

PWA te permite adicionar funcionalidades como instalação, acesso a arquivos do computador, suporte para funcionar offline e outros.

Possibilite que o seu site seja utilizado de forma eficaz por qualquer pessoa independentemente de seu fuso horário.

Possibilite que o seu site seja utilizado de forma eficaz por qualquer pessoa independentemente de seu idioma.

Tenha uma funcionalidade de busca inteligente: ela deve encontrar os recursos mesmo que o usuário não digite corretamente o termo a ser encontrado. Também deve retornar recursos relacionados. Exemplo: Elasticsearch.

Com o OAuth2, sites podem compartilhar os dados de seus clientes com aplicações de terceiros mediante a aprovação do usuário.

Um exemplo comum dessa tecnologia é o Social Authentication, que é o login pela Google (e outros sites), que tornam desnecessária a implementação de uma página de cadastro e de login. Também como exemplo comum, tem-se o Google Calendar.

De forma inversa à sugerida anteriormente, crie um serviço de OAuth2, em vez de apenas consumir uma API. Você deve fazer uma API que permita acessar os dados de seus usuários que concordaram em compartilhar esses dados com o serviço de terceiros.

Enquanto no shared multi-tenancy os dados dos usuários estão todos agrupados em um mesmo banco de dados, no modelo isolated os dados estão separados em bancos de dados distintos. Podem inclusive estar em países diferentes. O modelo híbrido mescla ambas abordagens, assim é possível, por exemplo, ter um banco de dados para cada região com os dados de seus respectivos clientes.

É um ambiente pareado com o ambiente de produção que é usado para testar novas funcionalidades ou correções de bugs em condições similares ao que o usuário tem.

Simule o recebimento de uma grande quantidade de acessos simultâneos na sua aplicação para determinar a capacidade de seus servidores ou para identificar gargalos.

Útil, principalmente, para arquiteturas de microsserviços. Esta ferramenta te auxilia a integrar as diferentes partes do seu sistema, mesmo que tenham sido construídas em linguagens e tecnologias diferentes, garante a entrega de mensagens entre os componentes e dá suporte à comunicação assíncrona entre eles.

Suponha que o sistema recebeu um inesperado número de acessos simultâneos e seu servidor não pode atender a todas requisições. O processo de autoscaling faz com que novos servidores sejam iniciados para ajudar a atender a demanda extra.

O autoscaling pode ser horizontal (adiciona máquinas iguais à máquina original) ou diagonal (adiciona máquinas com maior poder de processamento do que a original).

É importante, também, finalizar as máquinas extras assim que a demanda diminuir.

Sua aplicação pode receber acessos de diferentes partes do mundo. Quanto mais longe o usuário estiver do servidor, maior o tempo necessário para receber uma resposta do servidor, diminuindo, portanto, a performance do sistema para aquele usuário.

Seu sistema deve possuir servidores em locais geográficos diferentes para possibilitar um tempo de resposta baixo independente do lugar que o usuário esteja.

Faça uma funcionalidade que seja drag and drop, como: arrastar arquivos do computador para fazer upload no site ou mudar a ordem dos elementos dentro de uma tabela.

Faça uma aplicação que possa ser acessada sem internet e que as alterações feitas sejam efetuadas assim que a conexão for reestabelecida.

Nem tudo precisa ser construído do zero, caso precise colocar no ar aplicações como blogs ou lojas virtuais, utilize sistemas prontos como esses que ainda lhe permitem customizá-los utilizando linguagens de programação.

Softwares como esses possuem grande demanda de personalização. Você pode atuar como freelance construindo extensões e plugins nesse tipo de sistema.

Suponha que você possua vários servidores para atender as requisições dos usuários. Você necessita de um software (Load Balancer) para encaminhar cada requisição feita a um servidor disponível, de forma a balancear a quantidade de recursos usados nos servidores.

Também pode ser usado quando a máquina do servidor possuir múltiplos núcleos, assim a aplicação pode ser rodada mais de uma vez ao mesmo tempo na mesma máquina, usufruindo de todos os núcleos do seu processador.

Throttling garante que o servidor processe uma quantidade pré-definida de requisições em um período de tempo e recuse novas requisições.

Rate limit previne que um mesmo usuário faça requisições excessivas à sua API, respondendo apenas a uma quantidade X de requisições em um intervalo de tempo Y.

Ao identificar que um usuário está tentando utilizar seu software de maneira indevida, sua aplicação deve recusar novas requisições dele.

Nas páginas de exibição dos registros cadastrados, possibilite que o usuário filtre os registros conforme um critério, bem como os ordene em ordem alfabética crescente ou decrescente, de acordo com a coluna escolhida. Por sua vez, a paginação é a funcionalidade que define quantos registros serão exibidos em uma única página (alguns sites possibilitam que o próprio usuário defina o número de registros por página).

É uma propriedade do software que indica a possibilidade de extrair dados e informações para identificar a raiz de problemas, bem como gargalos e métricas de negócio e uso.

É uma fila de tarefas que devem ser executadas. É usado principalmente para executar tarefas pesadas de forma assíncrona, garantindo que o site possa continuar servindo outros clientes enquanto a tarefa está sendo processada pelo "trabalhador" ou enquanto está à espera de um "trabalhador" disponível.

É um processo que torna o acesso à conta do usuário mais segura ao demandar, além de usuário e senha, uma combinação de caracteres enviada por SMS, email ou aplicativo de autenticação.