
  Este projeto veio de um desafio de código para uma entrevista de emprego, onde o desafio era criar uma urna eletrônica.

  O meu principal foco foi nos detalhes do código em si, como na componentização e nas melhores práticas em ReactJS, além de ser modular, ou seja, se houverem mais candidatos ou mais secções de voto basta adicionar ao mock que a urna irá criar novas telas, a área de cola irá se atualizar e a apuração também irá mostrar os novos dados, sem necessidade de adicionar uma nova tela ao código, mas sim apenas nos dados enviados a máquina!
 
  Ao clicar no icone de informação( i ) você ve os dados que a urna aceita receber!



  Caso deseje saber como era o desafio, aqui estão as regras:



  PROJETO URNA ELETRÔNICA

  O desafio consiste em criar uma aplicação web utilizando react (Apenas frontend) para simular uma votação, de maneira parecida com uma urna eletrônica. Os parâmetros são os seguintes:
  
  Os dados simulados devem seguir esta padronização:

Eleitores:
  {“Id”: 1234, “Nome”: “Eleitor A”},
  {“Id”: 5678, “Nome”: “Eleitor B”},
  {“Id”: 9012, “Nome”: “Eleitor C”},
  {“Id”: 9314, “Nome”: “Eleitor D”},

Lanches - Sim, as pessoas votarão em seus lanches prediletos =)
  {“Id”: 11, “Nome”: “Hamburguer”},
  {“Id”: 22, “Nome”: “Pizza”},
  {“Id”: 33, “Nome”: “Pastel”}

Bebidas
  {“Id”: 444, “Nome”: “Refrigerante”},
  {“Id”: 777, “Nome”: “Suco”},
  {“Id”: 999, “Nome”: “Água”}

OBS: Você pode adicionar mais dados ao mock caso queira, como fotos (URL) ou mais informações sobre os ítens.



A tela geral deve ser composta por um teclado numérico a direita, similar ao utilizado em uma urna eletrônica com as opções confirmar, branco ou corrigir, e à esquerda, uma tela que irá mudar de acordo com o momento da votação. (Apenas o lado esquerdo muda) 

#TELA 1
  - Quadrados em branco para identificação do eleitor. Após digitar no teclado numérico e clicar em confirma, a urna deve localizar o eleitor e deverá seguir para a tela seguinte ou informar “Pessoa Não Identificada”.

# TELA 2
  - No cabeçalho, os dados da pessoa que está votando
  - No meio da tela, quadrados em branco para informar o numero do lanche.
  - Após digitar o número, o mesmo é consultado e o lanche correspondente já deve ser exibido, sendo preciso confirmar.
 
# TELA 3
  - No cabeçalho, os dados da pessoa que está votando
  - No meio da tela, quadrados em branco para informar a bebida.
  - Após digitar o número, a bebida correspondente já deve ser exibida, sendo preciso confirmar.
 
# TELA 4
  - Apenas a palavra FIM
  - Essa tela deve ser substituída pela tela 1 automaticamente após 3 segundos para uma nova votação.
 
# TELA 5
  - Acessível apenas ao ser digitado 0000 como pessoa
  - Exibe um pequeno relatório de quantos votos cada lanche teve, incluindo brancos e nulos
  - Exibe o número de pessoas que votaram

# IMPORTANTE
  - Todos os votos devem ser persistidos em local storage ou sqlite, a vontade;
  - O botão BRANCO não deve ser exibido na tela 1
  - A votação em branco ou nulo deve ser  possível nas telas 2 e 3
  - Uma pessoa não pode votar duas vezes (exibir erro: “PESSOA JÁ VOTOU”) 
  - Não será cobrado responsividade para esse projeto,
  - Atenção para a componentização
  - Podem ser utilizadas quaisquer libs que auxiliarem no desenvolvimento, a única exigência é o REACT.
  - O teclado a ser utilizado deverá ser apenas o virtual, implementado, utilizando o mouse. Não o teclado físico do computador. 





Urna Eletrônica

Simula completamente uma urna eletrônica!


    Com este aplicativo você pode implementar o sistema dele em qualquer site para ele se tornar apto para receber feedbacks dos usuários!
 
    Após o envio do feedback é guardado os dados no banco de dados postgre além de enviar um email com o conteúdo do feedback!
 
    Em breve pretendo adicionar esta funcionalidade ao meu portfólio, porém com sistema de notificação e mais robusto, pois o e-mail enviado é apenas um exemplo(funcional) nesta aplicação
 


NLW 8 - Widget

Widget de Feedback para usuários enviar relatórios sobre seu site!


    !! SITE EM DESENVOLVIMENTO !!

    Com este site você poderá administrar seus tempos de solução do cubo mágico, assim você pode visualizar sua evolução, definir metas e visualizar seu progresso!
    
    Neste projeto temos um sistema completo de login(Github/Google) e armazenamento de dados e scores dos usuários, porém, não sendo necessário o usuário estar logado para registar os scores, o login é apenas para salvá-los, que para isso foi utilizado o FaunaDB.
    
    O site ainda está em produção, uma das coisas que estou para adicionar é a visualização completa de determinada solução, pois atualmente só é possível ver qual foi o tempo e se foi DNF, porém é salvo além disso o embaralhamento(scramble) o dia que foi feito e as letras utilizadas para tal embaralhamento(se for no modo vendado).
    
    Este site surgiu com a necessidade de além de monitorar, ter um local para anotar as etapas de solução para quando for resolver "vendado / sem ver", que é a área que estou treinando ultimamente. Neste tipo de solução precisamos associar letras as posições do cubo e inspecioná-lo de uma maneira diferente. Como nem sempre me lembrarei de umas 12 letras para os cantos e umas 10 letras para as bordas então foi necessário criar um local onde fosse possível anotar estas letras.
    
    A maioria das informações são de testes, como os gráficos e os tempos de solução. Sendo apenas verdadeiros a foto com 59 segundos e um cubo do lado e o tempo de 6:31 segundos do modo "vendado / sem ver / blindfold"


Kubic.

Site para monitorar seus scores com Cubo Mágico!


    Neste website você pode visualizar notícias, assinando ou não, porém para os não assinantes a notícia é enviada pela metade, como uma prévia de uma notícia, e para visualizar seu conteúdo completo deve efetuar a assinatura de $9.90/por mês.
 
    Neste projeto temos um sistema completo de login, uma vez logado você pode optar por realizar a sua assinatura das notícias, quando a assinatura é feita a sua conta terá livre acesso as notícias completas.
 
    Para os pagamentos foi utilizado a ferramenta "Stripe" onde é ela que gerencia toda parte de pagamento, além do Stripe é utilizado a autenticação do NextJS juntamente com o banco de dados do FaunaDB para armazenar os clientes e os usuários logados.
   
    Projeto em experimento, as fotos dos pagamentos realizados, como é possível notar, são apenas pagamentos testes, porém seria necessário apenas mudar as chaves para se tornar uma aplicação com funcionamento real.


Ig.news

Seu site de noticias por apenas $9.90/mes


    Neste aplicativo é possível comentar suas expectativas para o evento chamado DoWhile, estando logando com sua conta do github!
    
    Com o método que eu desenvolvi, o mesmo sistema do servidor roda tanto para o aplicativo da internet quanto para o aplicativo do celular.
    
    Essa aplicação foi construída em todos os estágios, desde seu back-end até seu front-end, com comunicações em tempo real


NLW 7 - DoWhile

Veja e comente suas as espectativas para o evento


    Site criado em NextJS onde é possível visualizar os filmes desde os mais recentes até os mais populares.
    
    Projeto pessoal, para aprimorar meus conhecimentos em ReactJS, responsividade, e fetch a API de dados de filmes "The Movie Database", onde tive que visualizar a sua documentação para fazer as pesquisas.
    
    Site completamente funcional, trabalhando no modelo SPA (single page application), desenvolvido com NextJS e Typescript!


Trailer Vision

Site onde é possível visualizar Filmes/Series e seus trailers


    Aplicativo de rede social onde é necessário fazer um "login"(apenas com nome) na sua conta do github, e então você terá acesso a seus seguidores.
    
    Aplicativo simples apenas para ser apresentado os conceitos do react, algumas informações são inseridas estaticamente, como os amigos, já as comunidades são adicionadas pelo banco de dados do DatoCMS.
    
    O diferencial desta aplicação é que todo o servidor foi realizado pelo meu app, não sendo necessário utilizar o servidor da vercell dos criadores do evento, pois se eles retirarem o servidor deles do ar minha aplicação ficaria inútil...


Outerkut

Interface de rede social inspirada no Orkut


    LetmeAsk é um aplicativo de perguntas e respostas, onde uma pessoa cria uma sala em tempo real e outras pessoas entram na sala e realizam suas perguntas para serem respondidas. Perfeito para gerenciamento de perguntas em massa durante eventos/live/shows/apresentações etc...
    
    Neste projeto, é possível realizar todo o login pela sua conta do google.
    As mensagens chegam em tempo real se comunicando com o banco de dados do firebase.
    
    Existem 3 tipos de página: o login, a página das perguntas e respostas, e a página administrativa, que é a página de quem criou a sala de perguntas e respostas!


NLW 6 - Letme ask

Crie salas de perguntas e respostas para gerenciar as duvidas de seu publíco


    Com este app é possível ouvir podcasts, mesmo em segundo plano, além disso é possível pausa-lo, alterar a duração atual do áudio, e ver um resumo sobre o podcast atual.
    
    Neste projeto pegamos os dados de um servidor local (json-server)!
    
    Neste projeto temos acesso a um player de áudio, onde ao navegar pelo site o player não é afetado, mantendo seu estado, assim como o menu deste site preserva o estado e não é recarregado.
    


NLW 5 - WorldListener

Ouça podcasts, basta escolher um e ouvir!


    Neste projeto temos um cronômetro, onde ao chegar a zero ele lhe proporciona um desafio, como beber água, se levantar, para tirar o foco da tarefa atual, após o desafio ser completado, você ganha uma pontuação e avança de nível, quando disponível.
    
    O método Pomodoro consiste em 25 minutos de estudo e 5 minutos de descanso e essa aplicação faz o usuário se motivar a cumprir pela sua gamificação.
    


NLW 4 - Movit

Organize seus estudos utilizando o metodo Pomodoro


    Projeto desenvolvido com um pessoal do discord.
Neste projeto você pode definir tarefas com horários, marcar tarefas concluídas, criar e excluir tarefas existentes, com sistema de modal para algumas alterações.
    
Notas:
    
    Trabalhar em grupo tem seus desafios, o desafio dessa vez foi a falta de comprometimento do grupo, de 7 pessoas destinadas a trabalhar neste aplicativo, eu fiz cerca de 80% da aplicação e o restante apenas mais 2 pessoas contribuíram, realmente posso dizer que sem minha contribuição não haveria este app.
    Além disso, o grupo não sabia utilizar o git, então basicamente tive que gerenciar os arquivos pelo google drive...
    Porém não é de todo mal, passei desses desafios e posso dizer que o projeto foi concluído!


To-Do Manager


        Projeto realizado com objetivo de treinar técnicas em CSS, com esse objetivo escolhi tentar recriar a interface inicial da steam, onde ficou realmente muito parecida com a interface original, que pode ser vista em algumas das fotos listadas
     
        * O Clone da interface (o projeto) não possui as imagens dos jogos.
           
        Projeto é um clone de interface simples, não tendo nenhum tipo de interação ou funcionamento além da página inicial.
    Utilizado apenas html e css.
     
        Se você se confundiu é porque está bom, não é mesmo?
    

Steam APP - UI Clone

Copia da interface do aplicativo da Steam


    Site desenvolvido somente utilizando html e bootstrap, onde você pode ver e fazer pedidos a pizzaria, preenchendo e enviando o formulário (claro, este é um site exemplo e nenhuma pizza é entregue...)
    
    O que gostei do curso é que todas as partes do site foram bem explicadas e desenvolvidas, além do bootstrap que facilita a montagem de um site responsivo.


Pizzaria Da Nave


        Um projeto para gerenciar os pontos ganhos por partida em eventos do jogo League Of Legends. Este projeto foi criado após uma necessidade do meu irmão de gerenciar seus pontos ganhos por vitórias ou derrotas, neste aplicativo você encontra um modo de gerenciar os dias e os pontos ganhos para obter uma média e saber seu progresso durante os dias!
 
        Sem utilização de frameworks, o verdadeiro desafio foi a lógica de programar esse sistema todo, incluindo as datas, pontos, medias, status, em javascript nativo.
 
        Para testar, preencha os dados com valores fictícios(ou reais..) para poder entrar na tela de gerenciamento.


Points Of Progress (LOL)

Visualizador de pontos do passe da temporada de League Of Legends.


    Neste projeto de estudo foi colocado em prática diversas técnicas em html e css.
    
    Site bem simples e fácil de realizar, principalmente se utilizar algum framework, pois esse site se encontra em html e css nativo.
    


Google Glass

Clone da antiga interface do google glass


    Neste aplicativo, após você entrar nele você verá uma mapa e nesse mapa é onde há ícones de orfanatos, após escolher um orfanato clicando em seu ícone você entrará na página do orfanato. Na página do orfanato é possível visualizar as imagens dele, sua localização, realizar o agendamento e um comentário.
    
    O diferencial deste projeto é a parte dos comentários que não foi proposta no evento e decidi implementar essa funcionalidade.
    
    Além disso esse foi meu primeiro projeto onde instalei componentes de terceiros, utilizando o npm


NLW 3 - Happy

Happy é um app comunitário onde você agenda visitas em orfanatos proximos a você!


    Primeiro projeto realizado, iniciando minha jornada no desenvolvimento web, parece simples, porém ele possui muitas técnicas de alinhamento e de lógica em javascript
    
    O diferencial é que ele tem sua decisão fixa, ele só vai escolher uma opção. Se perguntar novamente a mesma coisa ele não mudará a sua opinião! sendo perfeito para escolhas simples que você não consegue decidir
    


Pergunte Ao Peixe

Pergunte ao peixe 2 opções e ele lhe dará uma resposta!