order page cannot order without login and wallet connect
landing page
gradient
scroll animate

Inspiration

Problem observed: Most e‑commerce loyalty programs are siloed, points expire, and users have no real ownership or liquidity.
- Web3 opportunity: Blockchain lets loyalty rewards become tradable, portable assets that users truly own.
- Personal motivation: Love of high‑fidelity audio + belief that Web3 should solve real‑world consumer pain points, not just DeFi speculation.
- Goal: Build a premium shopping experience where every purchase earns you a blockchain‑based token you can use, trade, or hold—turning brand loyalty into liquid equity. ## What it does
- Frontend: Next.js (App Router) storefront with stunning 3D headphone visualizations (Three.js / React Three Fiber) and smooth Framer Motion animations.
- Web3 loyalty: ERC‑20 AETHER Points (ATP) smart contract (Hardhat, OpenZeppelin ERC20+Ownable) that mints 1.5 ATP per order to the buyer’s wallet.
- Backend/API:
- POST /api/rewards/mint-points – called after successful checkout to mint ATP.
- GET /api/rewards/get-balance – reads a user’s ATP balance from their connected wallet.
- POST /api/rewards/redeem-points – burns ATP and returns a unique discount code for future purchases.
- Wallet integration: Wagmi + Ethers.js lets users connect any Ethereum/Polygon wallet (MetaMask, WalletConnect, etc.) to view balance and redeem.
- Database: Dockerized MySQL stores orders, user info, and non‑blockchain data (secure, environment‑variable‑driven).
- Security: Private keys kept only in .env; backend validates addresses; rate‑limited endpoints; only authenticated users can access rewards.
- User flow: Browse → configure → purchase → automatically earn ATP in wallet → connect wallet anytime to see balance & redeem for discounts. ## How we built it
- Smart contract
- Wrote ATPToken.sol (ERC20 + Ownable) with mint/burn functions.
- Compiled & tested with Hardhat; deployed to local node and Polygon Mumbai testnet.
- Verified contract address and stored in .env (NEXT_PUBLIC_TOKEN_CONTRACT_ADDRESS).
- Frontend
- Scaffolded with create-next-app (TypeScript, Tailwind).
- Built product pages with React Three Fiber for 3D renders; added Framer Motion for micro‑interactions.
- Created reusable components (Navbar, WalletConnection, RewardsDashboard, etc.).
- Integrated Wagmi/Ethers for wallet connection and contract calls.
- Backend/API
- Created Next.js API routes under /api/rewards/*.
- Used mysql2 package to talk to Docker‑composed MySQL.
- Added validation, rate‑limiting, and error handling.
- DevOps
- docker-compose.yml spins up MySQL.
- Scripts: npx hardhat node (local blockchain), npx hardhat run scripts/deploy.js --network .
- Environment template (.env.example) guides users to set RPC URL, private key, contract address, and DB credentials.
- Testing
- Manual end‑to‑end flow: place order → see mint event on block explorer → connect wallet → verify balance → redeem for discount code.
- Tested on localhost Hardhat node and Mumbai testnet. ## Challenges we ran into objects; abstracted with Wagmi to smooth over differences. objects; abstracted with Wagmi to smooth over differences.
- Gas‑price volatility on testnet: Early mint transactions sometimes failed due to low gas; implemented a fallback to estimate gas and add a buffer.
- 3D model performance: High‑poly GLTF models caused frame drops; optimized with Draco compression and reduced LOD, and used React Three Fiber’s dispose on unmount.
- Environment variable mismatch: Forgetting to copy NEXT_PUBLIC_TOKEN_CONTRACT_ADDRESS after deployment caused minting errors; added a post‑deploy reminder script.
- Database connection pooling: Initial Docker‑Compose setup hit connection limits under load; tuned MySQL max_connections and added connection pooling in the API routes. ## Accomplishments that we're proud of
- Full‑stack Web3 e‑commerce: From smart contract to UI to API, everything works end‑to‑end on a testnet.
- Real token utility: ATP is an actual ERC‑20 token viewable on block explorers, transferable, and redeemable for real discounts.
- Polished 3D/UI experience: High‑quality product visuals with smooth animations make the storefront feel premium, not “crypto‑gimmicky.”
- Secure architecture: Private keys never touch the frontend; all sensitive ops happen in backend API routes.
- Rapid deployment: One‑click local dev setup (npm install, docker-compose up -d, npx hardhat node, npm run dev) gets a newcomer running in <5 minutes.
- Learn‑and‑teach: The repo serves as a clear example for other developers wanting to add ERC‑20 loyalty to any Next.js shop. ## What we learned
- Web3 UX matters: Users expect the same smoothness as Web2; abstracting wallet complexity (via Wagmi) is essential for adoption.
- Gas awareness: Even on testnets, transaction costs and timing affect perceived reliability—always estimate and handle failures gracefully.
- 3D optimization: Balancing visual fidelity with performance is an iterative process; tools like glTF-Pipeline and Draco are indispensable.
- Security by design: Keeping secrets out of the client and validating inputs on the server is non‑negotiable when dealing with token minting.
- Full‑stack debugging: Issues can span contract, API, and UI; having good logging (Hardhat console.log, API response logs, React devtools) saved hours.
- Community tooling: OpenZeppelin, Wagmi, and Hardhat saved weeks of reinventing the wheel; leveraging audited libraries is critical for security. ## What's next for Aether Audio
- Mainnet launch: Deploy ATP token to Polygon PoS (or Ethereum L2) after auditing; add a faucet/test‑net‑to‑mainnet bridge for early users.
- Marketplace integration: Allow ATP to be traded on DEXs (Uniswap V3, SushiSwap) and displayed in wallet interfaces (Show token logo, description).
- Dynamic rewards: Implement tiered earning (e.g., 2× ATP for limited‑edition models, bonus for referring friends).
- Governance: Introduce a DAO where ATP holders can vote on future product designs, charity partnerships, or reward‑rate adjustments.
- Analytics dashboard: Store (off‑chain) metrics on redemption rates, user retention, and A/B‑test different reward amounts.
- Cross‑brand loyalty: Partner with other audio/Web3 brands to accept ATP across ecosystems, creating a universal “audio‑loyalty” token.
- Mobile app: React Native version with WalletConnect‑enabled QR‑code login for on‑the‑go shopping and reward checking.