Artigo original: 5 React Projects You Need In Your Portfolio
Você trabalhou bastante e, agora, tem um entendimento sólido da biblioteca React.
Além disso, tem uma boa compreensão de JavaScript e está colocando os recursos mais úteis da linguagem em seu código em React.
Você já fez bastante progresso... e agora, o que fazer?
Como preencher a distância entre o saber os fundamentos de React e se tornar um desenvolvedor profissional?
Muitos desenvolvedores têm esse problema ao alcançar esse estágio intermediário de aprendizagem do React ou de qualquer outra biblioteca do JavaScript. Eles sabem quase tudo da biblioteca em si, assim como do JavaScript para usá-lo com eficácia, mas não sabem o próximo passo a ser tomado.
Por que criar aplicações?
Após ter aprendido o básico de React, você precisa se sentir confortável na criação de aplicações com as habilidades que você adquiriu. Essa prática é fundamental se você deseja ser um desenvolvedor eficaz em React — saber como criar aplicações por conta própria e utilizar as ferramentas certas do ecossistema do React para fazer isso.
Quais aplicações, no entanto, você deve criar com o React para melhorar suas capacidades como desenvolvedor?
Neste artigo, analisaremos 5 tipos diferentes de aplicação que você deveria pensar em fazer após a aplicação básica de lista de tarefas (a famosa "to-do list"). O grande benefício da criação de aplicações está no fato de que, assim que você as coloca no ar, elas podem ser vinculadas ao seu portfólio e são uma maneira imediata e poderosa de mostrar sua capacidade aos possíveis futuros empregadores.
Para cada tipo de aplicação, eu tratarei de alguns exemplos populares que você pode usar como inspiração, das ferramentas que eu recomendaria para cada um desses recursos, bem como de dar uma pequena demonstração de uma aplicação do tipo que eu tenha feito pessoalmente usando o React.
Como começar a criar aplicações com o React
Diferente do aprendizado de React em si, onde você encontrará dezenas de artigos nos quais você pode se aprofundar em qualquer conceito relacionado, o processo de criação de uma aplicação é, em grande parte, uma atividade autodirecionada e sem muita orientação de fora.
Se você está começando a criar aplicações por conta própria, eu recomendo buscar artigos que ensinem o básico sobre a criação de aplicações e analisar a fundo o código-fonte das aplicações que esses artigos fornecem. O simples processo da leitura do código já tornará você um desenvolvedor melhor.
Se esses exemplos parecerem muito assustadores de criar por conta própria de início, lembre-se do que você já sabe como desenvolvedor em React — divida as aplicações em componentes combináveis. Cada aplicação deve ser criada parte por parte, componente por componente. Concentre-se em criar um recurso por vez. Com a prática, você terá um sentido melhor sobre quais ferramentas precisará para cada recurso, assim como sobre os padrões comuns por trás da criação de aplicações em geral.
Observação: um entendimento errado que eu tinha ao começar a criar aplicações reais como essas era o fato de eu precisar criar todo um back-end/API com Node ou com Python para obter a funcionalidade que eu queria.
Você não precisa fazer isso. Busque tecnologias serverless poderosas, como o Firebase, o AWS Amplify ou o Hasura, que dão a você um back-end completo de saída, sem a necessidade de criar e implantar o back-end por sua conta. Invista em ferramentas que o tornem mais produtivo e economize tempo.
Criar uma aplicação de mídias sociais
Se eu fosse recomendar uma única aplicação que você deveria acrescentar ao seu portfólio, seria uma aplicação de mídias/redes sociais. Twitter, Facebook e Instagram são muito sofisticados e incluem um número cada vez maior de recursos, que mantêm seus usuários engajados. Em cima disso, é o tipo de aplicação que você deve conhecer melhor em termos do seu funcionamento.
Existem vários recursos comuns entre quase todas as aplicações de mídias/redes sociais:
- a capacidade de os usuários fazerem publicações em formato de texto e/ou de arquivos de mídia,
- um feed em tempo real dessas publicações,
- a permissão dada a outros usuários para curtir ou para comentar essas publicações,
- além da autenticação do usuário.
Depois de entender esses recursos, você pode adicionar perfis para cada um de seus usuários, onde eles podem personalizar sua conta, bem como gerenciar os usuários que estão seguindo.
Exemplos de aplicação: Instagram, Twitter, Snapchat, Reddit
Tecnologias a serem usadas:
- Create React App ou Next.js para fazer uma UI dinâmica de publicações, curtidas e mensagens
- Firebase, AWS Amplify ou Hasura (usando GraphQL com assinaturas) para os dados em tempo real
- Funções de serverless, como AWS Lambda ou Firebase Functions para as notificações
- Armazenamento da Cloudinary ou do Firebase para o upload de imagens ou de vídeo
Criar uma aplicação de comércio eletrônico
Escolha alguns de seus sites favoritos e eu garanto a você que pelo menos um deles tem uma aplicação de comércio eletrônico integrada, mesmo que seja apenas a base de uma lojinha. Aplicações de comércio eletrônico estão em todo o lugar. Eu aposto que chamarão você para, em algum momento de sua carreira como desenvolvedor, criar uma dessas.
É tentador construir uma plataforma de comércio eletrônico incrível e de grande escala, como a Amazon, mas eu recomendo trabalhar em algo menor e mais focado.
Em vez de um mercado imenso, que fornece de tudo para quem quiser, selecione um setor do comércio que seja de seu interesse. Por exemplo, se você gosta de móveis e decoração, pode conferir a Crate & Barrel ou a Williams-Sonoma para ver como criaram os sites deles.
Além de produtos, aplicações de comércio eletrônico podem fornecer serviços aos consumidores. Se for um serviço que é fornecido localmente, um mapa interativo pode ser adicionado à aplicação para permitir que o provedor do serviço e o consumidor saibam a localização um do outro. Aplicações de entrega de alimentos, como a UberEats e o Doordash, que exigem a localização da pessoa que fez o pedido, são algumas que me vêm à mente.
Não importa o que está sendo vendido, seja físico ou virtual, toda aplicação de comércio eletrônico consistirá em algum tipo de página para a loja, com os detalhes dos produtos e/ou dos serviços. Se os usuários puderem adquirir vários produtos ao mesmo tempo, é necessário um carrinho de compras, onde os usuários poderão gerenciar os produtos que eles desejarem adquirir.
Por fim, toda aplicação de comércio eletrônico precisa de um processo de checkout, onde os usuários podem fazer a compra de seus produtos anonimamente ou apenas quando estiverem autenticados.
Exemplos populares: Airbnb, Uber, UberEats, Doordash, Etsy, Udemy
Tecnologias a serem utilizadas:
- Create React App ou Gatsby para a página da loja e para a exibição dos produtos
- Stripe com o pacote react-stripe-elements para tratar do processamento do pagamento
- Função serverless, como o Netlify/AWS Lambda para tratar do processo de checkout
- Algolia para a busca de produtos extremamente rápida
- Snipcart para a criação fácil de um carrinho e para o gerenciamento dos produtos dentro do carrinho
Criar uma aplicação de entretenimento
Esta é a mais ampla de todas as categorias. O que eu quero dizer com entretenimento? Uma aplicação cujo foco seja algum tipo de mídia. Podem ser filmes, podcasts ou músicas, para dar alguns exemplos.
Alguns exemplos fantásticos desse tipo de aplicação, respectivamente, seriam Netflix, Audible e Soundcloud ou Spotify. Se você incluir arte ou design nessa categoria, podemos adicionar sites como o Behance ou o Dribbble à lista.
O que é interessante sobre essa categoria é o fato de que muitas aplicações de entretenimento ficam muito próximas de aplicações de mídias/redes sociais. Por exemplo, uma aplicação como o Tiktok, que apresenta vídeos curtos e cheios de imaginação, é impulsionada pelo alto engajamento dos usuários. Outra aplicação, como o YouTube, é centrada nas interações dos usuários, como as curtidas, comentários e inscrições nos canais.
Pense no tipo de mídia ou de entretenimento que mais interessa a você e veja se pode criar uma plataforma simples que a envolva, onde os usuários podem fazer o login e salvar o conteúdo de que elas gostam. Depois disso, procure adicionar elementos sociais que tornem possível adicionar comentários, curtidas e compartilhamento de conteúdo com outros usuários da plataforma.
Exemplos populares: YouTube, Netflix, Audible, Spotify, Tiktok
Tecnologias a serem utilizadas:
- Create React App, Next.js ou Gatsby para criar a UI da aplicação
- npm package react-player para executar as mídias
- Armazenamento da Cloudinary ou do Firebase para o upload das mídias
- Algolia para pesquisar as mídias por nome (ou seja, faixa de áudio, vídeo, filme etc.)
Criar uma aplicação de mensagens
Aplicações de mensagens são incríveis. Você provavelmente tem um serviço de mensagens gratuitas, como o WhatsApp ou o Viber no seu telefone, ou ainda um criado em sua plataforma de mídias sociais, como o Facebook Messenger. Serviços como o Intercom, com mensagens instantâneas, também estão disponíveis como aplicações da web para que as empresas possam fornecer atendimento ao cliente imediato aos seus usuários.
Qualquer aplicação de mensagens consistirá em uma conversa entre duas ou mais pessoas, onde as mensagens serão enviadas em tempo real. Semelhante à aplicação de mídias/redes sociais, eu recomendaria um serviço como o Firebase ou o Hasura, que transporta dados por WebSockets, para as mensagens serem exibidas imediatamente na conversa.
A maioria das aplicações de mensagens está nos dispositivos móveis ou tablets. Se esse não é o seu primeiro clone de aplicação, essa é uma grande chance de ir além da web e criar uma aplicação móvel com o React Native. Melhor ainda, você poderia criar uma aplicação de mensagens para a web e dispositivos móveis simultaneamente, com um pacote como o React Native Web.
Exemplos populares: WhatsApp, Viber, Discord, Messenger, Slack
Tecnologias a serem utilizadas:
- React Native ou React Native Web para criar a aplicação para dispositivos móveis ou híbridas (web + dispositivos móveis)
- Firebase, AWS Amplify ou Hasura (usando inscrições do GraphQL) para enviar mensagens em tempo real
- Armazenamento da Cloudinary ou do Firebase para o envio de mensagens com conteúdo de imagens ou de vídeo
- npm package emoji-mart para um seletor de emojis inteligente, ao estilo do Slack, para que os usuários os incluam em suas mensagens
Criar uma aplicação de produtividade
Este provavelmente é o tipo mais fácil de aplicação com a qual se pode começar, considerando que há muitos tutoriais de aplicações de produtividade básicas por aí. Quando falo de aplicações de produtividade, estou me referindo a aplicações de notas, aplicações para o gerenciamento de equipes e listas de tarefas. Em geral, qualquer coisa que ajude você a atingir determinada tarefa ou a ser mais produtivo serve.
O lado ótimo de criar uma aplicação de produtividade primeiro é o fato de ela oferecer uma boa introdução à criação de aplicações devido à relativa simplicidade de muitos de seus recursos.
Você pode começar com algo simples, como um editor de texto para escrever texto formatado com markdown facilmente e depois expandir em cima disso. Depois, adicione a capacidade de salvar texto como arquivos individuais em seu computador. Depois disso, um recurso para exportar o markdown como HTML para escrever e-mails formatados.
Para começar a criar uma aplicação de produtividade, pergunte-se quais recursos uma aplicação pode ter que tornem suas tarefas diárias mais fáceis e trabalhe a partir daí.
Exemplos populares: Todoist, Notion, Things
Tecnologias a serem utilizadas:
- Create React App para a web ou React Native para dispositivos móveis
- npm package react-markdown para exibir markdown em sua UI da aplicação
- npm package react-codemirror2 para escrever código em suas anotações
- npm package react-draggable para reordenar o conteúdo das listas clicando e arrastando
Boa sorte em sua jornada de criação de aplicações. Vejo você no próximo artigo.
Gostou dessa publicação? Participe do React Bootcamp
O React Bootcamp tem tudo o que você precisa saber sobre o aprendizado de React e coloca isso em um pacote amplo, que inclui vídeos e fichas informativas, além de bônus especiais.
Veja informações que centenas de desenvolvedores já usaram para dominar o React, encontrar o trabalho dos seus sonhos e controlarem o próprio futuro:
