Artigo original escrito por Reed Barger
Artigo original: 7 React Projects You Should Build in 2021
Traduzido e adaptado por Daniel Rosa

O React é uma biblioteca do JavaScript ideal para a criação de aplicações incríveis. Existem incontáveis projetos que podem ser feitos em React, mas sete deles estão na minha lista do que criar neste ano.

Por que eu selecionei estes sete projetos específicos? Eu os escolhi, pois eles têm uns aos outros como base. Eles exigem que você conheça conceitos essenciais e semelhantes, como autenticação, trabalhar com uma API e um banco de dados, usar um roteador para o React para adicionar páginas à sua aplicação, além de executar mídias de áudio ou de vídeo.

Além disso, muitas aplicações podem ser (e geralmente são) integradas umas às outras. Aplicações de mídias sociais podem incluir aplicações de bate-papo, música ou vídeo, podendo incluir também aplicações de comércio eletrônico e assim por diante.

Em outras palavras, criar qualquer um desses projetos dará a você a capacidade e o conhecimento para criar o resto das aplicações da lista, incluindo seus projetos pessoais.

Juntamente com cada projeto, coloquei vários exemplos da vida real que você pode utilizar para encontrar inspiração, além de umas ideias sobre quais ferramentas eu possivelmente usaria para criar cada um.

Se quiser ver como construir cada uma dessas aplicações por conta própria, confira a série do meu curso, onde você aprenderá como criar um projeto incrível em React ao final de cada mês.

1. Aplicação de bate-papo em tempo real

Exemplos da vida real: Slack, Messenger, Discord, Crisp Chat

Virtualmente, todos nós usamos algum tipo de aplicação de bate-papo em tempo real, seja uma para dispositivos móveis, como o WhatsApp ou o Viber, seja uma ferramenta de produtividade, como o Slack ou o Discord. Ela também pode ser parte de um widget de bate-papo em um site da web, onde os clientes podem falar diretamente com os proprietários do site.

Todas as aplicações de bate-papo permitem que os usuários enviem mensagens entre eles em tempo real, que reajam às mensagens e mostram se os usuários estão on-line ou off-line.

Como criar uma aplicação de bate-papo em tempo real:

  • Crie seu projeto com create-react-app ou com o Next.js.
  • Use um serviço como, assinaturas do Firebase ou do GraphQL, para criar e obter as mensagens dos usuários em tempo real.
  • Adicione reações às mensagens com emojis, usando o pacote do npm emoji-mart
  • Lance na web usando as Firebase Tools

2. Aplicação de redes sociais

Exemplos da vida real: Facebook, Twitter, Instagram

A aplicação com a qual você, provavelmente, está mais familiarizado é a aplicação de redes sociais. De muitas maneiras, ela se assemelha a uma aplicação de bate-papo, mas expandida para uma comunidade de usuários maior.

Esses usuários podem interagir uns com os outros de diversas maneiras: eles podem seguir uns aos outros para receberem suas publicações, adicionar mídia, como imagens e vídeos para fins de compartilhamento e permitir que os usuários interajam com suas publicações, curtindo-as ou comentando-as.

Como criar uma aplicação de redes sociais:

  • Crie seu front-end com o create-react-app e o back-end usando uma API do Node
  • Use um banco de dados, como o Postgres ou o MongoDB, juntamente com um ORM, como o Prisma (Postgres) ou o Mongoose (MongoDB)
  • Use a autenticação social com o Google, Facebook ou Twitter, usando o Passport ou algum serviço mais simples, como o Auth0
  • Lance o back-end no Heroku e o front-end no Netlify

3. Aplicação de comércio eletrônico

Exemplos da vida real: Shopify, Etsy, Dev.to Storefront

Lojas onde podemos comprar produtos digitais ou físicos on-line estão em todo lugar. Aplicações de comércio eletrônico dão aos usuários a capacidade de adicionar e remover itens de um carrinho de compras, de visualizar esse carrinho e de fazer o pagamento com um cartão de crédito, ou ainda usar outras opções de pagamento, como o Google Pay e o Apple Pay.

Se estiver buscando inspiração, confira algumas lojas mais simples, como a do Shopify, em vez de olhar para conglomerados maiores, como a Amazon ou a Walmart.

Como criar uma aplicação de comércio eletrônico:

  • Crie uma aplicação com o create-react-app ou o Next.js
  • Adicione os pacotes stripe e use-shopping-cart do npm para lidar com pagamentos facilmente usando o Stripe Checkout
  • Crie uma API do Node para lidar com a criação de sessões com o Stripe
  • Lance o back-end no Heroku e o front-end no Netlify (ou ambos no Heroku)

4. Aplicação de compartilhamento de vídeos

Exemplos da vida real: YouTube, TikTok, Snapchat

Uma aplicação de compartilhamento de vídeos é, provavelmente, a categoria mais ampla, já que o vídeo é usado em várias aplicações diferentes e de modos muito diferentes.

Existem aplicações de compartilhamento de vídeo como o YouTube, que permitem pesquisar e buscar o vídeo que você puder imaginar que os usuários já tenham criado. O TikTok e o Snapchat também nos dão a capacidade de assistir aos vídeos de outros usuários e que são gravados em um formato muito mais curto e acessível, sendo mais orientados às interações, como curtidas e visualizações.

Como criar uma aplicação de compartilhamento de vídeos:

  • Crie a aplicação com o create-react-app e o back-end com Node/Express
  • Use o Cloudinary para uploads de imagens e vídeos para a API do Cloudinary
  • Use um banco de dados como o Postgres ou o MongoDB, juntamente com um ORM como o Prisma (Postgres) ou o Mongoose (MongoDB)
  • Lance o back-end no Heroku e o front-end no Netlify (ou ambos no Heroku)

5. Aplicação de blog/portfólio

Exemplos da vida real: Medium, Dev.to, HashNode

Este exemplo de aplicação é, talvez, a mais prática. A escolha mais prática em termos imediatos para você é criar uma aplicação de blog ou de portfólio para exibir suas habilidades. Ela permite que você exiba aquilo que você pode fazer como desenvolvedor, ao mesmo tempo em que permite que você inclua publicações e conteúdo que reflita tudo o que você sabe.

Se fizer essas aplicações com ferramentas como o Gatsby ou o Nextjs (ambos sendo frameworks do React), o trabalho fica mais fácil do que nunca.

Como criar uma aplicação de blog ou portfólio:

  • Crie a aplicação com o Gatsby ou o Next.js
  • Use markdown para as publicações do blog com um plug-in especial de transformação de markdown, como o remark
  • Lance o site no Netlify ou no Vercel

6. Aplicação de fórum

Exemplos da vida real: Reddit, StackOverflow, fórum do freeCodeCamp

Uma aplicação de fórum é onde vamos quando queremos obter ajuda. Como programadores, visitamos fóruns como o Reddit e Stack Overflow para acharmos respostas às nossas perguntas sobre programação.

Os fóruns também combinam elementos de bate-papo e mídias sociais por meio de publicações, comentários e reações. Um fórum parece mais uma versão mais organizada de uma aplicação de redes sociais, onde os usuários podem encontrar mais facilmente respostas que eles procuram para as suas perguntas.

Como criar uma aplicação de fórum:

  • Crie o front-end com create-react-app e o back-end usando uma API do Node
  • Use um banco de dados como o Postgres ou o MongoDB, juntamente com um ORM, como o Prisma (Postgres) ou o Mongoose (MongoDB)
  • Use a autenticação social com o Google, Facebook ou Twitter, usando o Passport ou algum serviço mais simples, como o Auth0
  • Lance o back-end no Heroku e o front-end no Netlify

7. Aplicação de streaming de músicas

Exemplos da vida real: Spotify, Soundcloud, Pandora

Da mesma forma que as aplicações em React são perfeitas para entregar conteúdo em vídeo, elas também são ótimas para streaming de mídia, como músicas.

As aplicações de músicas têm uma estrutura semelhante à das aplicações de compartilhamento de vídeos e podem ou não permitir que os usuários façam o upload de suas próprias músicas. Elas permitem que os usuários ouçam as músicas, curtam as canções, façam comentários e, quem sabe, até comprar as músicas.

Desse modo, uma aplicação de streaming de músicas pode combinar elementos de uma aplicação de compartilhamento de vídeos e de uma aplicação de comércio eletrônico.

Como criar uma aplicação de streaming de músicas:

  • Crie a aplicação com o create-react-app e crie o back-end com Node/Express
  • Use o Cloudinary para o upload de imagens e de vídeo com a API do Cloudinary
  • Use um banco de dados, como o Postgres ou o MongoDB, juntamente com um ORM, como o Prisma (Postgres) ou o Mongoose (MongoDB)
  • Lance o back-end no Heroku e o front-end no Netlify (ou ambos no Heroku)

Quer criar aplicações da vida real, como o YouTube, o Instagram e o Twitter com React? Esse é o lugar.

Ao final de cada mês, o autor lançará um curso exclusivo, mostrando exatamente como criar um clone completo de uma dessas aplicações com React do início ao fim.

Quer receber as notificações de quando será o próximo curso? Faça parte da lista de espera se inscrevendo aqui.