🥇8 projetos de aprendizado

«Um mestre comete mais erros do que um iniciante — tentativas»

Oferecemos 8 opções de projetos que podem ser feitos "por diversão" para obter uma experiência real de desenvolvimento.

Projeto 1. Clone do Trello

Clone do Trello por Indrek Lasn .

O que você vai aprender:

Organização de rotas de processamento de requisições (Routing).
Arrastar e soltar.
Como criar novos objetos (painéis, listas, cartões).
Processamento e validação de dados de entrada.
Do lado do cliente: como usar o armazenamento local, como salvar dados no armazenamento local, como ler dados do armazenamento local.
Do lado do servidor: como usar bancos de dados, como salvar dados no banco, como ler dados do banco.

Aqui está um exemplo de repositório, feito em React+Redux.

Projeto 2. Painel de administração

Repositório do Github.

Aplicativo CRUD simples, ideal para aprender os fundamentos. Vamos aprender:

Criar usuários, gerenciar usuários.
Interagir com o banco de dados — criar, ler, editar, excluir usuários.
Validação de entrada e trabalho com formulários.

Projeto 3. Rastreador de criptomoedas (aplicativo móvel nativo)

Repositório do Github.

Em qualquer coisa: Swift, Objective-C, React Native, Java, Kotlin.

Vamos aprender:

Como funcionam os aplicativos nativos.
Como extrair dados da API.
Como funcionam os layouts nativos de páginas.
Como trabalhar com simuladores móveis.

Experimente esta API. Encontrou uma melhor — escreva nos comentários.

Se estiver interessado, aqui está um tutorial.

Projeto 4. Configurar seu próprio webpack config do zero

Tecnicamente, isso não é um aplicativo, mas é uma tarefa muito útil para entender como o webpack funciona por trás. Agora não será uma "caixa preta", mas uma ferramenta compreensível.

Requisitos:

Compilar es7 para es5 (fundamentos).
Compilar jsx para js — ou - .vue para .js (será necessário aprender loaders)
Configurar webpack dev server e hot module reloading. (vue-cli e create-react-app usam ambos)
Usar Heroku, now.sh ou Github, aprender a implantar projetos webpack.
Configurar seu pré-processador favorito para compilar css — scss, less, stylus.
Aprender a usar imagens e svgs com webpack.

Aqui está um ótimo recurso para iniciantes absolutos.

Projeto 5. Clone do Hackernews

Todo Jedi deve fazer seu próprio Hackernews.

O que você vai aprender ao longo do caminho:

Como interagir com a API do hackernews.
Como criar um aplicativo de página única.
Como implementar recursos como visualização de comentários, comentários individuais, perfis.
Organização de rotas de processamento de requisições (Routing).

Projeto 6. Todo

TodoMVC.

Sério? Todo lista? Existem milhares. Mas acredite, há uma razão para tal popularidade.
Um aplicativo de lista de tarefas é uma excelente maneira de garantir que você entenda o básico. Tente criar um aplicativo em Javascript puro e outro em seu framework favorito.

Aprenda a: