Vote DApp Frontend

Una aplicación web moderna para interactuar con tu contrato de votación en Ethereum, construida con Next.js, TypeScript, Wagmi y RainbowKit.

🚀 Características

• Diseño Moderno: Interfaz atractiva y responsiva con Tailwind CSS
• Conexión de Wallet: Integración completa con RainbowKit para múltiples wallets
• Interacción con Smart Contract: Usando Wagmi v2 para llamadas optimizadas
• Panel de Administración: Control completo para el propietario del contrato
• Tiempo Real: Actualizaciones automáticas del estado de la votación
• Experiencia de Usuario: Feedback visual y notificaciones toast

📋 Requisitos Previos

• Node.js 18+
• npm o yarn
• Wallet de Ethereum (MetaMask, WalletConnect, etc.)
• Tu contrato desplegado en Sepolia testnet

🛠️ Instalación

1. Crea el proyecto Next.js:

npx create-next-app@latest vote-dapp-frontend --typescript --tailwind --eslint --app
cd vote-dapp-frontend

2. Instala las dependencias:

npm install @rainbow-me/rainbowkit@^2.1.0 @tanstack/react-query@^5.51.23 react-hot-toast@^2.4.1 viem@^2.17.5 wagmi@^2.12.0

3. Configura las variables de entorno: Crea un archivo .env.local en la raíz del proyecto:

NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=tu_project_id_aqui
NEXT_PUBLIC_VOTING_CONTRACT_ADDRESS=0x_tu_direccion_del_contrato

4. Actualiza la configuración:

• Reemplaza YOUR_WALLET_CONNECT_PROJECT_ID en src/config/wagmi.ts con tu Project ID de WalletConnect
• Actualiza VOTING_CONTRACT_ADDRESS con la dirección de tu contrato desplegado

🔧 Configuración

1. WalletConnect Project ID

1. Ve a WalletConnect Cloud
2. Crea un nuevo proyecto
3. Copia el Project ID
4. Actualízalo en el archivo de configuración

2. Dirección del Contrato

Reemplaza la dirección del contrato en src/config/wagmi.ts:

export const VOTING_CONTRACT_ADDRESS = '0xTU_DIRECCION_DEL_CONTRATO';

🏃‍♂️ Ejecutar el Proyecto

npm run dev

La aplicación estará disponible en http://localhost:3000

📁 Estructura del Proyecto

src/
├── app/
│   ├── globals.css          # Estilos globales
│   ├── layout.tsx           # Layout principal
│   ├── page.tsx             # Página principal
│   └── providers.tsx        # Proveedores de contexto
├── components/
│   ├── AdminPanel.tsx       # Panel de administración
│   ├── CandidateCard.tsx    # Tarjeta de candidato
│   ├── VotingDashboard.tsx  # Dashboard de votación
│   └── VotingStats.tsx      # Estadísticas
└── config/
    └── wagmi.ts             # Configuración de Wagmi

🎯 Funcionalidades

Para Usuarios

• Conectar Wallet: Conexión segura con múltiples opciones
• Ver Candidatos: Lista visual de todos los candidatos
• Votar: Sistema de votación simple e intuitivo
• Ver Estadísticas: Conteos de votos en tiempo real

Para Administradores

• Gestionar Votación: Iniciar y finalizar votaciones
• Agregar Candidatos: Formulario para nuevos candidatos
• Panel de Control: Vista completa del estado del sistema

🔒 Seguridad

• Solo el propietario del contrato puede administrar la votación
• Validación de transacciones en el frontend
• Manejo seguro de estados de carga
• Validación de inputs del usuario

🎨 Personalización

Colores

Puedes personalizar los colores en tailwind.config.js:

colors: {
  primary: {
    // Tu paleta de colores personalizada
  }
}

Componentes

Todos los componentes están modularizados y pueden ser personalizados fácilmente.

🐛 Solución de Problemas

Error de Conexión de Wallet

• Verifica que tengas una wallet instalada
• Asegúrate de estar en la red Sepolia
• Revisa que el Project ID de WalletConnect sea correcto

Transacciones Fallidas

• Verifica que tengas ETH suficiente para gas
• Asegúrate de que la votación esté activa (para votar)
• Confirma que eres el propietario (para funciones admin)

Problemas de Carga

• Verifica la dirección del contrato
• Asegúrate de que el contrato esté desplegado
• Revisa la consola del navegador para errores

📚 Recursos Adicionales

• Documentación de Next.js
• Documentación de Wagmi
• Documentación de RainbowKit
• Documentación de Tailwind CSS

🤝 Contribuir

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

📄 Licencia

Este proyecto está bajo la Licencia MIT - ver el archivo LICENSE para detalles.

---

¡Tu Vote DApp está listo para funcionar! 🎉