Uma das melhores maneiras de aprender é fazendo. Mas muitas vezes os desenvolvedores lutam com a grande questão “o que devo construir?”.

Aqui estão 8 idéias de projetos, completas com resumos de projetos e idéias de layout, para você começar a aprender fazendo.

• Negócios &Mundo Real: Map Statistics Dashboard
• Fun &Interessante: Instrumento Musical
• Pessoal &Portfolio: Blog
• Produtividade: Caderno
• Puzzles &Jogos: Space Invaders

>

• Ferramentas&Bibliotecas: Tema da estrutura

>

• Add-Ons do projecto: Webmentions

>

• Clones: Product Hunt

Esta é uma pré-visualização do ebook gratuito 50 Projects for React & the Static Web. Você pode encontrar as 50 idéias completas de projetos incluindo estas 8 em 50reactprojects.com.

Map Statistics Dashboard

Category: Negócios &Mundo Real

Criar um painel de mapas que mostra estatísticas e informações geográficas sobre COVID-19.

Brief

Lidar com uma pandemia global significa que vírus como o Coronavirus impactam o mundo de forma diferente com base na localização geográfica.

Disponibilizar um mapa com uma repartição das estatísticas de cada país é uma forma útil de se poder determinar coisas como quais os países que mais foram afectados.

Nível 1

A maneira mais fácil de ver as estatísticas de país para país é ter um mapa que você pode navegar com as estatísticas de cada país disponível ao lado desse país.
Criar um aplicativo de mapeamento que usa o API do Coronavirus.sh para adicionar marcadores ao mapa de cada país junto com o número de casos COVID-19.

Nível 2

Embora ter as estatísticas para cada país seja útil, pode ser útil poder comparar essas estatísticas com o número de casos no mundo inteiro.
Adicionar um painel de estatísticas que mostre o número de casos COVID-19 ao redor do mundo, assim como qualquer outra estatística útil da API.

Nível 3

A obtenção de estatísticas atuais é uma boa maneira de entender o estado atual do mundo, mas como isso se compara historicamente?
Utilizar a API de dados históricos para mostrar gráficos no painel que fornecem contexto para o crescimento e propagação do vírus.

>

Para fazer

• Criar uma nova aplicação de mapa

>

• Vai buscar dados dos países API

>

• Adicionar marcadores ao mapa

>

• Adicionar estatísticas aos marcadores

>

• Vai buscar dados globais API
• Criar um painel de estatísticas
• Adicionar estatísticas globais
• Incuperar dados históricos API
• Adicionar gráficos para mapear

Toolbox

• Aberto dados de doenças API (doença.sh)
• Folheto de Reacção (react-leaflet.js.org)
• Gatsby Leaflet Starter (github.com)

Tutoriais

• Como criar um Dashboard Coronavirus (COVID-19) & Map App in React with Gatsby and Leaflet (freecodecamp.org)
• Como adicionar estatísticas de casos do Coronavirus (COVID-19) ao seu painel de mapas React com Gatsby (freecodecamp.org)
• Mapeamento com o Folheto React (cabeça de ovo.io)

Inspiração

• Painel COVID-19 do Centro de Ciência e Engenharia de Sistemas (CSSE) da Universidade Johns Hopkins (JHU) (coronavírus.jhu.ed)
• Coronavirus (COVID-19) Dashboard Demo (coronavirus-map-dashboard.netlify.app)

Layout Idea

Instrumento Musical

Categoria: Diversão &Interessante

Criar um piano interativo que você pode usar para tocar música com o teclado.

Brief

Nem todos têm o luxo de possuir um instrumento musical, mas talvez essas pessoas tenham um laptop, telefone, ou tablet. Ter um piano é uma maneira poderosa de deixar as pessoas tocarem música mesmo que não tenham tido a oportunidade antes.

Nível 1

Utilizando o navegador e APIs de áudio da web, podemos criar sons que, quando colocados juntos, podem realmente soar como música.
Criar um conjunto de botões que tocam notas de uma escala quando clicados.

Nível 2

Embora nem todos tenham tocado um instrumento antes, o conceito e interface de um instrumento como um piano é geralmente mais intuitivo que um monte de botões.
Criar um layout de piano usando botões que funcionam ou clicando no botão ou usando o teclado físico.

Nível 3

Podemos ter espaço limitado no navegador, mas há uma grande variedade de notas, escalas e sons que um teclado elétrico pode ser capaz de fazer com alguns efeitos adicionados.
Criar alternâncias de efeitos que alteram o som das notas quando alternadas.

Fazer

• Criar botões
• Tocar som quando clicado
• Arrancar notas numa escala
• Criar layout de piano
• Definir eventos de teclado
• Criar layout de efeitos
• Alterar efeitos de áudio

Toolbox

• Reagir HotKeys (github.com)

Tutoriais

• Construindo um Piano com Ganchos de Reacção (dev.to)
• Como Construir um Teclado de Piano Usando Vanilla JavaScript (freecodecamp.org)
• Construindo um piano com tone.js! (dev.to)
• Como eu fiz um piano em apenas 1kb de JavaScript (frankforce.com)

Inspiração

• Guitarra de Reacção (react-guitarra.com)

Layout Idea

Blog

Categoria: Pessoal &Portfolio

Criar um blog que você pode usar para compartilhar suas experiências e projetos de carreira.

Brief

Com qualquer carreira, ter um blog para compartilhar suas experiências é uma boa maneira de deixar as pessoas saberem no que você está trabalhando e ajudar os outros a aprenderem com suas experiências.

É também uma maneira de reforçar o que você aprendeu para que você possa referenciá-lo no futuro.

Level 1

Para poder compartilhar suas experiências, você precisa de uma estrutura de website que lhe permita criar novos conteúdos e gerenciar os conteúdos existentes.

Uma maneira de fazer isso é criando arquivos markdown que o seu website fontes para criar novas páginas e exibir os posts.
Criar um blog usando arquivos markdown como fonte de conteúdo.

Level 2

Gravar seu conteúdo em arquivos markdown é uma boa maneira de gerenciar conteúdo estático, mas você pode não querer ter que editar código toda vez que você escrever ou editar um post.
Integra um sistema de gerenciamento de conteúdo que permite que você adicione novo conteúdo ou edite o existente com uma boa interface de usuário.

Level 3

Se você estiver compartilhando código no seu blog, o HTML suporta nativamente o código e pré tags que ajudam a formatar o código de uma forma legível. Mas isso não inclui destaque de sintaxe que ajuda a melhorar a legibilidade.
Integra um marcador de sintaxe que torna os blocos de código mais legíveis.

A Fazer

• Criar um blog
• Adicionar primeiro conteúdo estático
• Conteúdo estático da fonte
• Integrar CMS
• Adicionar código ao conteúdo
• Adicionar destaque de sintaxe

Toolbox

• Netlify CMS (netlifycms.org)
• Prisma.js (prismjs.com)

Tutorials

• Fazendo um Blog Gatsby com Netlify CMS (gatsbyjs.org)
• Como construir seu Blog de Codificação a partir do zero usando Gatsby e MDX (freecodecamp.org)

Inspiração

• Gatsby Netlify CMS Starter (gatsby-netlify-cms.netlify.app)

Layout Idea

Notebook

Categoria: Produtividade

Criar uma aplicação para adicionar, gerir e organizar um grupo de notas.

Brief

Tirar notas é uma óptima forma de nos certificarmos de que acompanhamos os nossos pensamentos ou de que nos lembramos das importantes tomadas de uma reunião. Ser capaz de os gerir facilmente e organizá-los é importante para os encontrar mais tarde!

Nível 1

O primeiro requisito de um caderno é ser capaz de tomar notas. Isto pode ser bastante simples de começar, onde realmente precisa de algum tipo de input que recolha o que escreve e o armazene algures para mais tarde.
Criar um formulário para adicionar novas notas e vê-las numa lista.

Nível 2

A fim de encontrar as suas notas mais tarde, você quer alguma forma de organizar essas notas e uma forma de as procurar. Isso inclui a adição de categorias ou um sistema de marcação, bem como uma IU para fazer pesquisas a partir de.
Adicionar a capacidade de marcar ou categorizar notas e uma entrada para pesquisar através delas.

Nível 3

Se nos apercebemos ou não, podemos encontrar conexões entre os nossos pensamentos e, mais importante, as nossas notas, onde podemos tirar partido dessa rede de pensamentos para o nosso caderno.
Adicionar Pesquisa de Roam -introduzindo conexões de notas para criar uma rede de pensamentos.

>

Para Fazer

>
• Criar uma forma

>

• Adicionar novas notas
• Listar notas
• Adicionar tags ou categorias
• Adicionar pesquisa de notas
• Adicionar rede de notas

Toolbox

• Tema Gatsby Brain (github.com)
• Fuse.js (fusejs.io)

Tutoriais

• Como Adicionar Pesquisa a uma Aplicação de Reacção com Fusível.js (freecodecamp.org)

Inspiração

• Espuma (foambubble.github.io)
• Pesquisa de Vagabundos (roamresearch.com)
• Tema Gatsby Garden (github.com)

Layout Idea

Space Invaders

Categoria: Puzzles & Jogos

Criar um jogo de tiro espacial de invasores espaciais para disparar múltiplas ondas de naves inimigas.

Brief

Space Invaders é um clássico dos arcade que o coloca numa nave espacial contra uma invasão alienígena. Ao tentar abatê-los, eles estão a disparar de volta, e você só tem uma quantidade limitada de protecção antes de ser atingido.

Nível 1

A parte central do jogo é que você está a mover-se em torno de uma nave espacial tentando atingir um monte de alienígenas com as suas armas. Enquanto há um de vocês, há muitos deles.
Crie uma nave espacial que possa se mover e atirar em alienígenas que não estejam se movendo.

>

Nível 2

O que torna o jogo complicado, é que os alienígenas estão constantemente se movendo. Cada vez que eles atingem a borda da área de jogo, eles caem e aceleram, aproximando-se da sua nave.
Adicionar movimento aos alienígenas indo de um lado para o outro na área de jogo. Cada vez que os alienígenas chegam a um lado, eles devem descer um nível. Eles também devem acelerar em certos intervalos.

Nível 3

Você está por sua conta, mas felizmente você pode obter alguma proteção. Você tem escudos que você pode esconder atrás que ajudam a protegê-lo enquanto duram.
Crie vários escudos na frente da espaçonave do jogador que podem levar uma quantidade limitada de danos.

>

Para fazer

>
• Criar um novo jogo

>

• Criar alienígenas estáticos

>

• Criar uma nave espacial do jogador

>

• Adicionar controles da nave espacial

>

• Adicionar arma da nave espacial

>

• Configurar alienígena dano

>

• Faça os alienígenas dispararem de volta

>

• Faça os alienígenas moverem-se

>

• Adicionar intervalos alienígenas

>

• Adicionar escudos

>

>

Tutoriais

>

>
• Aprenda JavaScript construindo 7 jogos (freecodecamp.org)

Inspiração

• Invasores de Espaço (codepen.io)

Layout Idea

Tema de Enquadramento

>

Categoria: Ferramentas &Bibliotecas

Criar um tema do Gatsby que estabeleça um projeto com o framework CSS Tailwind.

Brief

Como desenvolvedores, geralmente temos que fazer um monte de passos semelhantes a qualquer momento que criamos um novo projeto. Mas ferramentas como temas nos permitem abstrair esses passos e empacotá-los de uma forma fácil de usar que pode funcionar para qualquer novo projeto.

Level 1

Gatsby themes são um sistema tipo plugin onde podemos aproveitar o pipeline Gatsby para compartilhar funcionalidades como um pacote em npm.

Esta abertura abre a porta para realmente fazer qualquer coisa que faríamos num site Gatsby, mas tornando-o reutilizável para qualquer site Gatsby.
Criar um novo tema Gatsby que, quando usado, cria uma nova página de guia de estilo em qualquer projeto que seja adicionado a.

Level 2

O objetivo dos temas não é apenas criar páginas, mas adicionar funcionalidades que nos tornem produtivos. Isto inclui coisas como frameworks e configurações de projeto.
Adicionar um framework CSS ao tema Gatsby que permite que o projeto seja adicionado para usar esse framework.

Nível 3

As vezes os temas são melhores apenas como ferramentas, às vezes é útil ter opiniões. Uma forma de adicionar funcionalidades úteis a um framework CSS é criar componentes de stock.
Criar componentes React reutilizáveis utilizando o framework CSS que podem ser utilizados no projecto ao qual o tema foi adicionado.

>

Fazer

>
• Criar um novo tema

>

• Adicionar ao projecto de exemplo

>

• Criar nova página de estilo

>

• Adicionar framework CSS
• Utilizar CSS no exemplo
• Criar componentes
• Utilizar componentes

Toolbox

• Temas Gatsby (gatsbyjs.org)
• Tailwind (tailwindcss.com)

Tutorials

• Construir um Tema (gatsbyjs.org)
• O que é CSS Tailwind e como posso adicioná-lo ao meu Website ou React App? (freecodecamp.org)

Inspiração

• Tema Gatsby Tailwind (github.com)

Layout Idea

Webmentions

Category: Add-Ons do Projeto

Adicionar integração de webmentions a um site que mostra interações do Twitter com o site.

Brief

Interacção social é uma forma impactante de trazer mais audiência e conversa a tópicos sobre os quais escrevemos.

Salvar algo num website mostra que a interação pode ser útil para inspirar as pessoas a querer se envolver ou deixar as pessoas sentirem que podem fazer parte dela.

Nível 1

A fim de fazer uso de Webmentions, um website precisa ser configurado com meta tags para fornecer informações.
Adicionar as meta tags apropriadas a um website e validar seu uso com webmention.io.

Nível 2

A API Webmentions é uma forma de programar conexões em interações sociais a partir de uma URL do seu website. Ela permite que você obtenha o tipo de interação e até mesmo o avatar do perfil da pessoa.
Conecte um website a Webmentions e adicione uma lista de interações sociais às páginas de postagens do blog.

Nível 3

Agora que o site está mostrando todas as interações, deve haver uma maneira fácil de se juntar à conversa.
Adicionar um link social que, quando clicado, cria um tweet com um link para a página.

Para Fazer

• Adicionar meta tags ao website
• Validar meta tags
• Conectar à Webmention
• Conectar social com Bridgy
• Lista de interacções
• Adicionar botão de tweet

Toolbox

• Menção Web.io (webmention.io)
• Bridgy (brid.gy)
• Gatsby Plugin Webmention (github.com)

Tutoriais

• Indieweb pt2: Usando Webmentions em Onze (mxb.dev)
• Webmentions do lado do cliente (swyx.io)
• Começando com Webmentions em Gatsby (knutmelvaer.no)
• Construindo Webmentions de Plugin de Gatsby (christopherbiscardi.com)

Inspiração

• Knut Melvær (knutmelvaer.no)
• Swyx (swyx.io)

Layout Idea

Product Hunt

Category: Clones

Criar um clone de Caça ao Produto que permite às pessoas postar um novo produto com classificações.

Brief

Todos vivemos para produtos, sejam os nossos telemóveis ou as aplicações que usamos nos nossos portáteis.

Embora existam toneladas de produtos no mundo, pode ser difícil navegar entre o bom e o mau. Ferramentas como o Product Hunt fornecem uma plataforma para aprender sobre novas ferramentas e obter reações e críticas de outros.

Nível 1

A parte mais importante de aprender sobre novos produtos é o próprio produto. Queremos saber o que é o produto, como ele se parece e como funciona.
Criar uma página que permita adicionar um novo produto a um website com um título, imagem e descrição.

Nível 2

Quando aprendemos sobre produtos, as opiniões são uma forma de confiarmos num produto antes de o comprarmos. Ajuda-nos a ganhar confiança no que estamos prestes a gastar o nosso dinheiro ou tempo em.
Adicionar a capacidade das pessoas para adicionar comentários sobre cada produto.

Nível 3

Pessoas adoram produtos, por isso há toneladas deles no mundo. Há muitos para tentar classificar manualmente, então precisamos de um mecanismo para pesquisar e navegar com.
Adicionar a capacidade de pesquisar produtos e navegar por categoria.

>

Para Fazer

>
• Criar site de produtos

>

• Criar banco de dados

>

• Adicionar forma de produto

>

• Adicionar produto ao banco de dados

>

• Pedir produto para página

>

• Adicionar formulário de avaliação

>

• Adicionar comentários à base de dados

>

• Adicionar comentários ao produto

>

• Adicionar pesquisa de produtos

>

• Adicionar categorias de produtos

>

>

Toolbox

>
• Hasura (hasura.io)

Tutoriais

• Construindo uma aplicação clone de Caça ao Produto usando Hasura e Next.js (logrocket.com)
• Como construir uma versão básica de Caça ao Produto usando React (freecodecamp.org)

Layout Idea

Outros Projetos

Se você quiser mais idéias de projetos, confira 50 Projetos para React & a web estática!

Descarregar gratuitamente em 50reactprojects.com