36
loading...
Sorteio de Amigo Secreto com NextJS e Firebase
Todos os anos, no Natal, minha família faz um amigo secreto. Ou amigo oculto, ou até a versão zoeira que chamamos de amigo da onça. É uma tradição. Mas todos os anos temos o mesmo problema: conseguir reunir todas as pessoas que irão participar da brincadeira em algum lugar para realizar o sorteio.
Claro que nós já tentamos usar algum aplicativo de celular pra isso. Mas, nesse caso, eu tenho que ficar ensinando as pessoas, todo mundo precisa criar uma conta, decorar uma senha. E eu tenho parentes com dificuldades até para instalar o aplicativo no celular. E como eu sou "o cara do computador", isso sempre sobrava pra mim.
Então esse ano eu resolvi o problema, criando eu mesmo um aplicativo, mas com uma abordagem diferente. Eu usei NextJS e a real time database do Google Firebase para realizar um sorteio de um grupo de amigo secreto, on-line. Não precisa criar uma conta, confirmar endereço de email nem decorar uma senha. Basta acessar o aplicativo pelo navegador e preencher as informações. Quando o sorteio for realizado você vai poder ver quem é o seu amigo secreto e, se ele tiver preenchido as informações dele, você verá mais alguns detalhes como tamanho dos sapatos e das roupas que usa. Basta tirar um print da tela e pronto. É como se fosse o seu papelzinho.
Você pode conferir o aplicativo em: https://amigo-secreto-app.vercel.app/
O projeto está no GitHub: https://github.com/Bignotto/amigo-secreto-app
Iniciei o projeto planejando os caminhos para os dois tipos de usuário que a aplicação teria: os usuários que irão criar os grupos de amigo secreto e os usuários que entrarão em algum grupo de amigo secreto. Listei as ações que os usuários fariam usando o aplicativo e comecei a escrever o código.
A partir da página Home, o usuário já poderia criar o seu grupo apenas dando um nome pra ele. Só na página seguinte ele iria preencher seu nome, a data e a hora da festa de revelação, onde será a festa e até sugerir um valor médio para os presentes.
Com o grupo criado, o usuário é redirecionado para a página do grupo e pode ver as informações do grupo que acabou de registrar, o código de convite e a senha do grupo. Também pode ver os participantes do grupo e, se for o criador do grupo, pode remover algum usuário indesejado.
Também na página Home, o usuário que foi convidado pode digitar o código do convite para entrar no grupo dos seus amigos. Na página seguinte ele diz seu nome e a senha do grupo.
Quando o grupo for sorteado, todos os amigos do grupo verão o botão que revela o seu amigo secreto.
Como os usuários não precisam criar uma conta nem nada, não será possível recuperar o resultado do sorteio. Mas é só tirar um print da tela e guardar como se fosse aquele papelzinho do amigo secreto tradicional.
Escolhi o NextJS porque é muito prático de começar uma aplicação, principalmente por já ter todo o roteamento de páginas logo de início. Também porque hospedar um projeto NextJS na Vercel é bastante fácil e prático.
Já o real time database do Google Firebase funcionou perfeitamente com a minha idéia para o aplicativo. Ninguém precisou ficar atualizando o aplicativo pra ver o resultado do sorteio. Assim que o criador do grupo realizar o sorteio o resultado é mostrado para os usuários imediatamente!
Também usei Chakra UI para os componentes e estilização da aplicação. Assim eu consegui dar prioridade em implementar a lógica de como tudo funcionaria.
36