Construindo um Plataforma de Votação Online: Desafios, Soluções e Aprendizados Chave

Bom dia, pessoal! 👋 Recentemente, eu trabalhei em uma simples e segura plataforma de votação online para o meu projeto de mini-curso da faculdade e quis compartilhar como eu fiz isso. Desde gerenciar registros de usuários até configurar um sistema de aprovação de admin, este projeto me ensinou muito sobre a construção de aplicações web funcionais usando JavaScript e localStorage. Nesta postagem de blog, eu vais guiar você pelo desenvolvimento da plataforma, os desafios que encontrei e como eu os superou.

🎯 Visão geral do projeto: O que eu propus fazer

O objetivo era criar uma simples plataforma de votação que pudesse lidar com:

Registros de Usuários: Permitir que votantes se inscrevam com seus detalhes.
Votação: Permitir que usuários votem em enquetes de forma segura.
Controle de Administrador: Permitir que um admin gerencie as enquetes, aprovar/rejeitar registros de usuários e supervisione o processo de votação.

A princípio, eu pensei em usar um backend completo com MongoDB, mas eu quis manter as coisas simples, então usei localStorage para gerenciar dados para esta versão inicial do projeto.

🌟 Funcionalidades chave:

Páginas de Login & Registro: Usuários podem criar uma conta ou fazer login.
Aprovação de Administrador: O registo de utilizadores require aprovação do administrador antes de serem capazes de votar.
Sistema de Votação: Utilizadores registados podem votar em enquetes ativas.
Painel de Administrador: O administrador pode criar e gerir enquetes, ver pedidos de utilizadores e controlar quem pode votar.

🛠️ Processo de Desenvolvimento: Como Construí a Plataforma

1. Configuração do Projeto

Comecei construindo um simples sistema de login e registo usando HTML, CSS, JavaScript e localStorage para tratar os dados do utilizador. A conta de administrador foi codificada de forma fixa, mas os utilizadores podiam registar-se fornecendo o seu nome completo, ID de eleitor e palavra-passe. No entanto, rapidamente percebi que permitir que qualquer pessoa se registasse e votasse sem a aprovação do administrador não era a melhor ideia.

2. Adicionar Aprovação de Administrador para Registos

Para tornar a plataforma mais segura, introduzi um sistema de aprovação de administrador. Quando um utilizador se regista, a sua solicitação é armazenada no localStorage e marcada como “pendente”. O administrador pode então revisar e aprovar ou rejeitar estas solicitações.

🚧 Desafios com a Aprovação de Administrador:

Rastrear Solicitações Pendentes: Eu precisava ter certeza de que os usuários à espera de aprovação não conseguiriam votar ainda.
Aprovando Usuários: Assim que aprovado, os dados do usuário tinham que ser movidos da lista “pendente” para a lista “usuários registrados” no localStorage.

✅ Solução:

Eu configurei um simples sistema onde:

As solicitações de registro eram armazenadas no localStorage sob uma chave especial (accountRequests).
Quando o admin aprovava um usuário, seus detalhes eram movidos para a lista users, concedendo-lhes acesso ao sistema de votação.
Se rejeitado, a solicitação permanecia no localStorage para referência futura, para que o admin pudesse manter controle de todas as decisões.

3. Criando e Gerindo Pesquisas

A página de admin permitia a criação de enquetes dinâmicas, onde o admin podia adicionar múltiplas opções de voto. Os dados das enquetes eram armazenados no localStorage e apresentados aos usuários assim que eles estavam logados e aprovados.

📝 Criando Enquetes:

Enquetes são criadas pelo admin com um formulário que permite opções dinâmicas. O formulário permite que o admin adicione quantas opções forem necessárias para cada enquete.
Usuários podem então visualizar essas enquetes e votar.

4. Tratamento de Votos e Resultados

O sistema de votação foi projetado para ser simples: assim que os usuários logavam e fossem aprovados pelo admin, eles podiam ver as enquetes ativas e votar.

🗳️ Desafios de Votação:

Evitar Votos Duplicados: Eu precisava ter certeza de que usuários só podiam votar uma vez por enquete.
Armazenando Resultados: Os votos eram salvos no localStorage, vinculados à usuário e enquete específicos.

✅ Solução:

Cada voto estava ligado à ID do usuário e à enquete específica. Isso garantiu que cada usuário pudesse votar apenas uma vez, e os resultados foram armazenados de forma segura no localStorage.

5. Exibição do Status de Registro do Usuário

Eu quis garantir que os usuários soubessem se o seu registro havia sido aprovado, rejeitado ou ainda pendente. Para fazer isso, eu adicionei uma página “Verificar Status” onde os usuários podiam entrar com o ID de seu registro para verificar seu status de aprovação.

📋 Desafios de Status:

Manter o Status do Usuário: Fazer acompanhamento de cada pedido de registro e associá-lo com o status correto foi complicado.

✅ Solução:

Cada pedido de registro foi atribuído um ID único, e os usuários podiam entrar com este ID para ver se o seu pedido foi aprovado, rejeitado ou ainda pendente. Esta página de status simples melhorou a experiência do usuário, fornecendo retorno em tempo real sobre seu pedido.

🔑 Desafios Chave e Como Eu Solucionei

1. Gerenciar Pedidos de Usuários e Aprovações de Administrador

Inicialmente, eu não estava certo de como estruturar o sistema de aprovação. Depois de algumas tentativas e erros, decidi usar o localStorage para gerenciar o processo de aprovação de usuários. Isso deixou o sistema simples e permitiu atualizações rápidas por parte do admin.

2. Gerenciar Enquetes Dinâmicas

Permitir que o admin adicione opções de voto dinamicamente foi desafiante mas recompensador. Eu implementei isso permitindo que o admin crie enquetes com quantas opções forem necessárias, que foram então salvas como arrays no localStorage.

3. Armazenando Votos e Evitando Votos Duplicados

Umas parte complicada foi garantir que usuários só podiam votar uma vez por enquete. Eu resolvi isso ligando votos à ID do usuário e à ID da enquete, garantindo que cada usuário só pudesse votar uma vez.

💡 O que Eu Aprendi

Construir esta plataforma de votação me ensinou muito sobre o tratamento de dados do usuário, criando fluxos de aprovação e gerenciando conteúdo dinâmico com o localStorage. Aqui estão algumas das lições chave:

Gerenciamento de Usuários: Eu aprendi a gerenciar contas de usuário, incluindo o tratamento de registros pendentes e aprovações.
localStorage para Persistência de Dados: Este foi o primeiro projeto em que usei extensivamente o localStorage e foi uma ótima experiência de aprendizagem. Ele funciona bem para pequenos projetos, mas pode precisar ser substituído por um banco de dados como MongoDB para escalabilidade.
Construindo um Painel de Administração: Criar uma página de admin para gerenciar usuários e enquetes deu-me insights sobre as complexidades do controle administrativo em um sistema.

🌟 Melhorias Futuras

Enquanto a versão atual do portal funciona ótimo para votações em pequena escala, estou considerando migrá-la para uma solução mais robusta no futuro:

Integração com MongoDB: Para projetos maiores, a migração para MongoDB ofereceria melhor persistência de dados e escalabilidade.
Implementação de Backend: Usar Express.js para o backend permitiria um melhor manuseio de dados e gerenciamento mais fácil de contas de usuário e enquetes.

Para agora, estou satisfeito com a forma que a plataforma se tornou. É simples, segura e funcional para o escopo do projeto.

Confere a plataforma live: Plataforma de Votação Online
Explore o código no GitHub: Repositório do Sistema de Votação

Em resumo 🥜

A construção desta plataforma de votação online foi uma experiência de aprendizagem fantástica. Desde o gerenciamento de cadastro de usuários e aprovadas de administradores até a criação de enquetes dinâmicas e a garantia de segurança dos dados, cada desafio ajudou-me a crescer como desenvolvedor. Estou animado para levar essas aprendizagens para projetos futuros, e espero que este post inspire você a construir algo semelhante!

Obrigado por ler, e sinta-se livre para compartilhar suas ideias ou perguntas abaixo! 😄