MonVote is a fully-responsive decentralized application (dApp) built for community governance. It allows users to create and vote on proposals, with all data and actions recorded on the Monad Testnet blockchain.

• Wallet Connection: Seamlessly connect to the Monad Testnet (Chain ID: 10143) via MetaMask. The app ensures you are on the correct network.
• Create Proposals: Users can create new governance proposals with a title and description, which are then submitted as a transaction to the blockchain.
• Browse Proposals: View a live feed of all community proposals, sorted with the newest first. The list updates in real-time as new proposals are created.
• On-Chain Voting: Cast your vote (Upvote/Downvote) on any proposal. Each vote is a transaction recorded on the Monad Testnet.
• Duplicate Vote Prevention: The smart contract and the UI prevent a user from voting on the same proposal more than once.
• Dynamic Detail View: Click the "Details" button on any proposal to open a pop-up modal with its full description and current vote counts.
• Interactive Feedback: Receive toast notifications for transaction submissions and confirmations. A sound effect plays upon a successful vote.
• Block Explorer Integration: Easily view your transactions (proposal creation, votes) on the Monad Testnet Explorer.
• Fully Responsive: A mobile-first design ensures a great user experience on all devices, from desktop to mobile phones.
• Light & Dark Mode: A theme toggle allows users to switch between light and dark modes.

• Framework: Next.js (with App Router)
• Language: TypeScript
• Blockchain Interaction: Ethers.js
• UI Components: ShadCN UI
• Styling: Tailwind CSS
• Form Management: React Hook Form & Zod for validation
• Target Network: Monad Testnet

This project is set up to run in a development environment like Firebase Studio.

• Node.js (v18 or later)
• MetaMask browser extension.
• Test MON on the Monad Testnet.

1. Install dependencies:

   npm install

2. Run the development server:

   npm run dev

3. Open your browser to http://localhost:9002 to see the application.

• src/app/: Contains the main pages and layouts for the Next.js application.
  • src/app/main/page.tsx: The main page displaying the list of proposals.
  • src/app/create/page.tsx: The page for creating a new proposal.
• src/app/components/: Contains all the reusable React components.
  • ProposalCard.tsx: The card for displaying a single proposal.
  • CreateProposal.tsx: The form for submitting a new proposal.
  • Header.tsx: The main navigation header.
  • providers/: Contains React Context providers for managing global state (AppStateProvider, Web3Provider).
• src/lib/: Core logic, constants, and utility functions.
  • constants.ts: Blockchain constants like Chain ID and Contract Address.
  • contract.ts: The ABI for the MonVote smart contract.
  • types.ts: TypeScript type definitions.
  • utils.ts: Helper functions.
• hooks/: Custom React hooks, such as useWeb3.
• public/: Static assets, including the sound.mp3 file for vote confirmations.
• src/ai/: Configuration for Genkit.
• contracts/: Contains the Solidity source code for the smart contract.