Creando una plataforma de votación en línea: Desafíos, soluciones y aprendizajes clave.

Tutoriales

¡Hola a todos! 👋 Recientemente, trabajé en una simple y segura plataforma de votación en línea para mi proyecto de mini-college, y quería compartir cómo lo hice. Desde la gestión de registros de usuarios hasta la configuración de un sistema de aprobación de admin, este proyecto me enseñó mucho sobre la construcción de aplicaciones web funcionales utilizando JavaScript y localStorage. En este post de blog, les guiaré a través del desarrollo de la plataforma, los retos que encontré y cómo los superé.

El objetivo era crear una simple plataforma de votación que pudiera manejar:

  • Registros de usuarios: Permitir a los votantes registrarse con sus detalles.

  • Votación: Permitir a los usuarios votar de forma segura en encuestas.

  • Control de admin: Permitir a un admin gestionar las encuestas, aprobar/rechazar registros de usuarios y supervisar el proceso de votación.

Al principio, consideré usar una infraestructura de backend completa con MongoDB, pero quería mantener las cosas simples, así que usé localStorage para gestionar los datos para esta primera versión del proyecto.

  1. Páginas de inicio de sesión y registro: Los usuarios pueden crear una cuenta o iniciar sesión.

  2. Aprobación de Administrador: El registro de usuarios require aprobación del administrador antes de que puedan votar.

  3. Sistema de Votación: Los usuarios registrados pueden votar en encuestas activas.

  4. Panel de Administrador: El administrador puede crear y administrar encuestas, ver solicitudes de usuarios y controlar quién puede votar.

Comenzé construyendo un simple sistema de inicio de sesión y registro utilizando HTML, CSS, JavaScript y localStorage para manejar los datos del usuario. La cuenta de administrador estaba hardcodeada, pero los usuarios podían registrarse proporcionando su nombre completo, identificación electoral y contraseña. Sin embargo, rápidamente me di cuenta de que dejar que cualquiera se registre y vote sin aprobación del administrador no era la mejor idea.

Para hacer que la plataforma fuera más segura, introduje un sistema de aprobación de administrador. Cada vez que un usuario se registra, su solicitud se almacena en localStorage y se marca como “pendiente”. El administrador puede entonces revisar y aprobar o rechazar estas solicitudes.

  • Seguimiento de Solicitudes Pendientes: Necesitaba asegurarme de que los usuarios que esperaban aprobación no pudieran votar aún.

  • Aprobación de Usuarios: Una vez aprobado, los datos del usuario debían ser trasladados de la lista “pendiente” a la lista “usuarios registrados” en localStorage.

Configuré un sistema simple donde:

  1. Las solicitudes de registro se almacenaban en localStorage bajo una clave especial (accountRequests).

  2. Cuando el administrador aprobaba a un usuario, sus datos se trasladaban a la lista users, otorgándoles acceso al sistema de votación.

  3. Si se rechazaba, la solicitud permanecía en localStorage para referencia futura, de modo que el administrador pudiera hacer un seguimiento de todas las decisiones.

La página de administración permitía la creación de encuestas dinámicas, donde el administrador podía agregar múltiples opciones de voto. Los datos de las encuestas se almacenaban en localStorage y se presentaban a los usuarios una vez que ingresaban y fueran aprobados.

  • Las encuestas son creadas por el admin con un formulario que permite opciones dinámicas. El formulario permite al admin agregar tantas opciones como sea necesario para cada encuesta.

  • Luego los usuarios pueden ver estas encuestas y emitir su voto.

El sistema de votación fue diseñado para ser sencillo: una vez que los usuarios ingresaban y fueran aprobados por el admin, podían ver las encuestas activas y emitir sus votos.

  • Evitar Votos Duplicados: Necesité asegurarme de que los usuarios solo pudieran votar una vez por encuesta.

  • Almacenar Resultados: Los votos eran guardados en localStorage, vinculados a el usuario específico y la encuesta.

Cada voto estaba vinculado a la identificación del usuario y al cuestionario específico. Esto garantizó que cada usuario pudiera votar solo una vez, y los resultados se almacenaron de manera segura en localStorage.

Quería asegurarme de que los usuarios supieran si su registro había sido aprobado, rechazado o aún pendiente. Para ello, agregué una página “Ver Estado” donde los usuarios podían ingresar su ID de registro para ver su estado de aprobación.

  • Mantener el Estado del Usuario: Hacer un seguimiento de cada solicitud de registro y asociarla con el estado correcto resultó en un reto.

Cada solicitud de registro se asignó un ID único, y los usuarios podían ingresar este ID para verificar si su solicitud fue aprobada, rechazada o aún pendiente. Esta simple página de estado mejoró la experiencia del usuario proporcionándole una respuesta inmediata sobre su solicitud.

Inicialmente, no estaba seguro de cómo estructurar el sistema de aprobación. Después de algunos intentos y errores, decidí usar localStorage para gestionar el proceso de aprobación de usuarios. Esto mantuvo el sistema simple y permitió actualizaciones rápidas por parte del administrador.

Permitir que el administrador agregue opciones de voto dinámicamente fue un reto, pero muy recompensador. Lo implementé permitiendo que el administrador cree encuestas con tantas opciones como sea necesario, que posteriormente se guardan como arrays en localStorage.

Una parte complicada fue asegurar que los usuarios sólo pudieran votar una vez por encuesta. Este problema resolví enlazando los votos con la identificación del usuario y la identificación de la encuesta, garantizando que cada usuario sólo pudiera votar una vez.

Construir esta plataforma de votación me enseñó mucho sobre el manejo de datos de usuario, la creación de flujos de trabajo de aprobación y la gestión de contenido dinámico con localStorage. Aquí están algunas de las conclusiones clave:

  • Gestión de Usuarios: Aprendí cómo manejar cuentas de usuario, incluyendo la gestión de registros pendientes y aprobaciones.

  • localStorage para Persistencia de Datos: Esta fue mi primera vez usar localStorage extensivamente para un proyecto y fue una gran experiencia de aprendizaje. Funciona bien para pequeños proyectos pero puede necesitar ser reemplazado por una base de datos como MongoDB para escalabilidad.

  • Construir un Panel de Administrador: Crear una página de administrador para manejar usuarios y encuestas me dio insights en las complejidades del control administrativo en un sistema.

Mientras que la versión actual de la plataforma funciona perfectamente para votaciones a pequeña escala, estoy considerando migrarla a una solución más robusta en el futuro:

  • Integración con MongoDB: Para proyectos mayores, migrar a MongoDB ofrecería mejor persistencia de datos y escalabilidad.

  • Implementación de Backend: Utilizar Express.js para el backend permitiría un manejo más seguro de los datos y una gestión más fácil de cuentas de usuarios y encuestas.

Por ahora, estoy contento con cómo se ha turnado la plataforma. Es simple, seguro y funcional para el alcance del proyecto.

Echa un vistazo a la plataforma en vivo: Plataforma de Votación En Línea
Explora el código en GitHub: Repositorio del Sistema de Votación

Construir esta plataforma de votación en línea fue una experiencia de aprendizaje fantástica. Desde manejar el registro de usuarios y las aprobaciones de administradores hasta crear encuestas dinámicas y garantizar la seguridad de los datos, cada desafío me ayudó a crecer como desarrollador. Estoy emocionado de llevar estos aprendizajes a futuros proyectos, ¡y espero que esta publicación te inspire a construir algo similar!

¡Gracias por leer, y no dudes en compartir tus pensamientos o preguntas a continuación! 😄

Source:
https://arkadiptakundu.hashnode.dev/building-an-online-voting-platform-challenges-solutions-and-key-learnings