Algumas ideias de projeto para praticar

Pesquisei no Google algumas ideias de projeto para criarmos e praticar os aprendizados dos estudos de javascript e reacjtjs. As descrições dos projetos são simples mas acaba por ser proposital já que o objetivo é terminar o projeto de forma a ter uma aplicação funcionando em um espaço curto de tempo, quem sabe, uma aplicação por dia.

Flowers

Essa sugestão é para fazer uma tela de cadastro de visitante em um evento de orquídea onde deve inserir duas informações, como número ou email e nome completo.

Servirá como cadastro de presença no evento e para concorrer a sorteios no decorrer do evento.

Algumas informações são será apresentado em tablet e deve guardar em as informações caso fique sem internet, local storage e quando possível, subir para a núvem.

whatsapp-group

Existe um grupo de whatsapp muito movimentado, e quase todo dia removo alguém do grupo, para não ficar muito cheio e para não perder o foco no assunto.

Quero criar mais um ou dois grupos para dividir as pessoas, e assim poder ter mais foco em cada um deles.

O que precisamos então é criar um “formulário” que a pessoa vá avançando e respondendo algumas perguntas, que, por fim, irá dizer pra ela se ela pode entrar no grupo ou não, em qual grupo, etc.

Relógio Pomodoro

Criar um app de um relógio pomodoro usando uma destas ferramentas; Thunkable, buuble, WebFlow (será um web app neste caso), AppsGeyser.

Repetidas Vezes

Criar projeto novo com React e exibir um componente repetidas vezes.

Crie um array de objetos ou valores, em um arquivo .js separado só pra isso, e permita que sua interface liste os itens do array em uma interface minimamente agradável.

Se precisar de ajuda pra criar o projeto base do react, uma opção pode ser usar o create-react-create-app.

Pacote NPM

Criar o componente, publicar um pacote npm que permita qualquer um instalar seu componente e usa-lo.

Se precisar de ajuda pra criar o projeto base do react, uma opção pode ser usar o create-react-create-app.

Previsao de Tempo

Obter previsão do tempo com ReactJs.
Criar um aplicação que a partir da localização do usuário (ou informando o CEP) obtém a previsão do tempo para hoje e talvez os próximos dias, e exibe em interface bem amigável.

Real Time

Criar projeto usando Firebase realtime database.
Criar interface simples que permita incluir objetos em uma lista (ao menos 3 dados por objeto). Permitir excluir cada um dos itens.

Permitir editar cada um dos itens
Fazer deploy do projeto pelo Firebase Cli
Criar interface de autenticação usando o GitHub
Criar um repositório para o código com readme bem escrito
Documentar em inglês

Sapo Developers

Em JavaScript e sem usar qualquer framework, deve ser criado o Jogo da Memoria (“memory match”) usando a lista de “badges” do Codebits num tabuleiro 6x3.

Indicações:
O jogo deverá corre no browser e no inicio deve aparecer um botão “Novo Jogo”
Quando se clica em “Novo Jogo”, é feito um pedido JsonP ao endpoint da API dos “badges” do Codebits (o parâmetro JsonP é “callback”) — ver legenda.
Da resposta, devem ser escolhidos 9 “badges” aleatórios para formar os pares e construir o tabuleiro 6x3 usando a imagem do bot do codebits como “default/costas”, mostrando um botão “Iniciar Jogo”.
Quando se clica “Iniciar Jogo” deve ser mostrado um contador que vai contando o tempo até que o jogo seja terminado.
Para jogar, o jogador vai clicando nos bots para os virar e mostrar as imagens (aos pares) até que todos os pares sejam encontrados. Quando o par virado não for igual este volta à posição inicial.
Quando o jogador terminar o jogo, o contador deve parar e deve ser mostrado um link para partilhar o tempo do jogo no twitter com a mensagem “Memory JavaScript FTW em: <tempo do jogo>”

Legenda:
Endpoint da API: https://services.sapo.pt/Codebits/listbadges
Imagem default/costas: https://i2.wp.com/codebits.eu/logos/defaultavatar.jpg
URL de partilha do twitter: https://twitter.com/intent/tweet/?text=<Texto para partilhar>
Exemplo de um jogo da memória: http://c1.quickcachr.fotos.sapo.pt/i/o43138c2c/14885783_9Vj9A.png

User Login

Criar banco de dados com tabela “users”, inclua ao menos um registro manualmente.

Ao acessar a url principal do sistema, caso não esteja autenticado redirecionar para rota de login, caso já logado, redirecionar para rota de dashboard. Rota de login /login/ deve exibir campo de email e senha.

Permitir ao usuário realizar o login, avisando caso o usuário não seja encontrado, ou se a senha não corresponder. Na rota de dashboard exibir os dados do usuário logado.

Fornecer rota /api/users/{id} que ao chamar retorna os dados do usuário em JSON, para ser consumido por outro sistema. Fornecer rota /api/users/add/ que recebe um post e inclui um novo usuário.

Permitir o usuário logado, pela interface, listar e incluir novos usuários (usando ajax ou não).

Interface UX

- [ ] Criar uma interface usando Material Design Lite.
- [ ] Utilize o Material Design Lite para criar uma interface bacana para um web/app mobile fictício, utilizando ao menos os componentes Navigation Layout, Cards, Menus.
- [ ] Abrir um dialog do Material Design Lite com um formulário contendo três inputs; nome, email e telefone. Validar (bem) o preenchimento dos três campos.

- [ ] Adicionar os inputs de endereço começando pelo CEP, que ao sair dele, valida, e então obtém o endereço e preenche os demais.. usar o componente Loading
- [ ] Criar um repositório para o código com readme bem escrito
- [ ] Documentar em inglês

Localização Usuário

- [ ] Obter a localização do usuário e exibir na interface detalhes sobre isso.
- [ ] Utilizando javascript obter a localização do visitante, e exibir na interface o endereço completo de onde ele estiver.
- [ ] Em JF, dependendo da conexão, a localização pode “cair” em BH, mas, ignore isso.. apenas use os dados e apresente.

- [ ] Exibir o mapa com um pin no exato local
- [ ] Calcular a distância deste ponto até a App Machine (-21.7725621,-43.3469667)
- [ ] Criar um repositório para o código com readme bem escrito
- [ ] Documentar em inglês

Foram listados onze sugestões de projetos. O desafio é fazer todos, um por dia. Sim, é desafiador. Principalmente por que é um desafio para quem está começando a adquirir a habilidade de programar.

A sugestão é focar na documentação da linguagem de programação que decidir usar. No meu caso, da stack reactjs, com javascript, html, css, nodejs, e as diversas bibliotecas que complementam esse universo. Tomara que tenha gostado, aplauda o artigo! Até o próximo artigo e ótimos códigos.