This branch contains the frontend UI for BadgeMe, a zk-KYC verification demo built with Next.js and Tailwind CSS. It integrates a mock API to simulate badge verification and is ready for backend integration (e.g., key gen/attest routes).
- Privacy-focused KYC badge UI with verified/not verified states.
- Mock API for fetching badge data (flags, region).
- Wallet input validation (starts with '0x' for mock Ethereum-style addresses).
- Re-verify button for dynamic updates.
- Responsive design with Tailwind utilities.
- Enter "0x123" or "0xABCDEF456" in the wallet field and submit to see a verified badge with flags (OVER18, AML_OK).
- Enter "abc" to see not verified (no flags).
- Spaces and special chars are not allowed.
- The mock API simulates zk-proof responses—replace with real backend for production.
- Switch to this branch:
- git checkout feature/frontend-ui
- Navigate to the frontend folder:
- cd frontend
- Install dependencies:
- npm install
- Start the development server:
- npm run dev
- Open http://localhost:3000 in your browser.
- Test the UI:
- Enter a valid wallet (starts with '0x') and click "Verify KYC" to see green "Verified" badge.
- Enter an invalid wallet to see red "Not Verified".
- Use the "Re-Verify" button to refetch data.
- Check responsiveness on mobile (resize browser).
- Mock API is temporary—needs real integration with backend (e.g., attestation endpoints).
- Wallet validation is simplified—update to Midnight's Bech32 format if needed.
- Feedback welcome—test and report issues in the PR!
- Next.js for routing and API.
- Tailwind CSS for styling.
- React hooks (useState, useEffect) for interactivity.
MIT License (consistent with project).
Contributions to this frontend branch are welcome—fork and PR!