Mais 9 projetos para aprimorar suas habilidades em Front-End

Introdução

Independentemente de você ser um iniciante em programação ou um desenvolvedor experiente, nesta área é essencial estudar novos conceitos e linguagens/frameworks para acompanhar as tendências.

Por exemplo, o React — cujo código o Facebook abriu há apenas quatro anos — já se tornou a escolha número um para desenvolvedores JavaScript em todo o mundo.

O Vue e o Angular, claro, também têm sua base de fãs legítima. E ainda há o Svelte e outros frameworks universais, como Next.js ou Nuxt.js. E Gatsby, Gridsome, Quasar… e muito mais.

Se você quer se destacar como um desenvolvedor JavaScript experiente, deve ter pelo menos alguma experiência com diferentes frameworks e bibliotecas — além de trabalhar com o bom e velho JS.

Para ajudar você a se tornar um mestre do front-end em 2020, compilei nove projetos diferentes, cada um dedicado a diferentes frameworks e bibliotecas JavaScript como stack técnica que você pode criar e adicionar ao seu portfólio. Lembre-se de que nada ajuda mais do que criar coisas na prática, então siga em frente, ligue sua mente e torne isso possível.

Este artigo foi traduzido com o apoio da empresa EDISON Software, que realiza provadores virtuais para lojas de múltiplas marcas, além de testa software.

Aplicativo de busca de filmes com React (usando hooks)

A primeira coisa que você poderia começar é criar um aplicativo de busca de filmes com React. Abaixo está uma imagem de como o aplicativo final deve parecer:

O que você vai aprender
Criando este aplicativo, você melhorará suas habilidades em React, utilizando a API Hook relativamente nova. O projeto utiliza componentes React, múltiplos hooks, uma API externa e, claro, alguns estilos CSS.

Stack técnico e funcionalidades

• React com hooks
• create-react-app
• JSX
• CSS

Sem usar classes, esses projetos oferecem a você uma ótima porta de entrada para o React funcional e definitivamente irão ajudá-lo em 2020. Você pode encontrar um exemplo de projeto aqui. Siga as instruções ou faça tudo do seu jeito.

Aplicativo de chat com Vue

Outro ótimo projeto para você é criar um aplicativo de chat, utilizando minha biblioteca JavaScript favorita: VueJS. O aplicativo deverá se parecer mais ou menos assim:

O que você vai aprender
Neste guia, você aprenderá a criar um aplicativo Vue do zero — criar componentes, gerenciar estados, criar rotas, conectar-se a serviços de terceiros e até mesmo lidar com autenticação.

Stack técnico e funcionalidades

• -projeto, utilizando
• Vuex
• Vue Router
• Vue CLI
• Pusher
• CSS

Este é realmente um ótimo projeto para começar a trabalhar com Vue ou aprimorar suas habilidades existentes para se envolver no desenvolvimento em 2020. Você pode encontrar o tutorial aqui.

Um aplicativo bonito para visualizar o clima com Angular 8

Este exemplo ajudará você a criar um belo aplicativo para visualizar o clima usando Angular 8:

O que você vai aprender
Este projeto irá ensiná-lo habilidades valiosas ao criar aplicativos do zero — desde o design até o desenvolvimento, até um aplicativo pronto para implantação.

Stack técnico e funcionalidades

• Angular 8
• Firebase
• Renderização no lado do servidor
• CSS com Grid e Flexbox
• Mobile friendly e responsivo
• Modo escuro
• Interface bonita

O que eu realmente gosto neste projeto abrangente é que você não aprende as coisas isoladamente. Em vez disso, você aprende todo o processo de desenvolvimento — desde o design até a implantação final.

Aplicativo de To-Do usando Svelte

Svelte é como o novo garoto na abordagem de componentes — pelo menos, semelhante ao React, Vue e Angular. E é uma das novidades mais quentes de 2020.

Aplicativos de To-Do podem não ser o tema mais quente, mas realmente ajudarão você a aprimorar suas habilidades em Svelte. Ele ficará assim:

O que você vai aprender
Neste tutorial, você aprenderá a criar um aplicativo usando Svelte 3, do início ao fim. Você usará componentes, estilização e manipuladores de eventos.

Stack técnico e funcionalidades

• Svelte 3
• Componentes
• Estilização com CSS
• Sintaxe ES 6

Não há muitos bons projetos iniciais em Svelte, então eu encontrei esta boa opção para começar.

Приложение для электронной коммерции с помощью Next.js

Next.js é o framework mais popular para construir aplicativos React que suportam renderização no lado do servidor fora da caixa.

Este projeto mostrará como criar um aplicativo de e-commerce que se parece com isto:

O que você vai aprender
Neste projeto, você aprenderá a desenvolver usando Next.js — criando novas páginas e componentes, extraindo dados, além de estilizar e implantar o aplicativo Next.

Stack técnico e funcionalidades

• Next.js
• Componentes e páginas
• Amostragem de Dados
• Estilização
• Implantação do projeto
• SSR e SPA

É sempre bom ter um exemplo real, como um aplicativo de comércio eletrônico, para aprender algo novo. Você pode encontrar o tutorial aqui.

Полноценный мультиязычный блог с Nuxt.js

Nuxt.js para Vue é como Next.js para React: um ótimo framework para combinar recursos de renderização do lado do servidor e aplicativos de página única.
O último aplicativo que você pode criar terá esta aparência:

O que você vai aprender

Neste exemplo de projeto, você aprenderá como criar um website completo usando Nuxt.js — desde a configuração inicial até a implantação final.

Ele utiliza muitos recursos interessantes que o Nuxt pode oferecer, como páginas e componentes, além de estilização com SCSS.

Stack técnico e funcionalidades

• Nuxt.js
• Componentes e páginas
• Módulo Storyblock
• Mixins
• Vuex para gerenciamento de estado
• SCSS para estilização
• Middlewares do Nuxt

Este é realmente um projeto incrível, que inclui muitas funcionalidades incríveis do Nuxt.js. Eu pessoalmente adoro trabalhar com Nuxt, então você deve experimentá-lo, pois isso também o tornará um excelente desenvolvedor Vue.

Blog com Gatsby

Gatsby é um ótimo gerador de sites estáticos que utiliza React e GraphQL. Este é o resultado do projeto:

O que você vai aprender

Neste guia, você aprenderá a usar o Gatsby para criar um blog que você usará para escrever seus próprios artigos, utilizando React e GraphQL.

Stack técnico e funcionalidades

• Gatsby
• React
• GraphQL
• Plugins e temas
• MDX/Markdown
• Bootstrap CSS
• Modelos

Se você alguma vez quis ter um blog, este é um ótimo exemplo de como fazê-lo usando React e GraphQL.

Não estou dizendo que o WordPress é uma má escolha, mas com o Gatsby você pode criar sites de alto desempenho usando React — o que é uma combinação incrível.

Blog com Gridsome

Gridsome para Vue… Bem, já vimos isso com Next/Nuxt.
Mas o mesmo vale para Gridsome e Gatsby. Ambos usam GraphQL como camada de dados, mas o Gridsome utiliza VueJS. É também um incrível gerador de sites estáticos que o ajudará a criar ótimos blogs:

O que você vai aprender

Este projeto ensinará você a criar um blog simples para começar a trabalhar com Gridsome, GraphQL e Markdown. Ele também cobre como implantar o aplicativo através do Netlify.

Stack técnico e funcionalidades

• Gridsome
• -projeto, utilizando
• GraphQL
• Markdown
• Netlify

Este não é, certamente, o tutorial mais completo, mas abrange os conceitos básicos do Gridsome e Markdown e pode ser um bom ponto de partida..

Player de áudio semelhante ao SoundCloud, usando Quasar.

Quasar é mais um framework Vue que pode ser utilizado para criar aplicativos móveis. Neste projeto, você criará um aplicativo de reprodutor de áudio, por exemplo:

O que você vai aprender

Enquanto outros projetos se concentram principalmente em aplicativos web, este mostrará como criar um aplicativo móvel usando Vue e o framework Quasar.
Você deve já ter o Cordova funcionando com o Android Studio/Xcode configurado. Se não, o guia tem um link para o site do Quasar, onde eles mostram como configurar tudo.

Stack técnico e funcionalidades

• Quasar
• -projeto, utilizando
• Cordova
• WaveSurfer
• Componentes UI

Um pequeno projeto, demonstrando as capacidades do Quasar para criar aplicativos móveis.

Fonte: habr.com